add interweave

package.json

@@ -12,8 +12,13 @@
     "@reduxjs/toolkit": "^1.9.5",
     "@types/react-redux": "^7.1.26",
     "axios": "^1.5.0",
+    "emojibase": "^15.0.0",
+    "interweave": "^13.1.0",
+    "interweave-autolink": "^5.1.0",
+    "interweave-emoji": "^7.0.0",
     "moment": "^2.29.4",
     "preact": "^10.16.0",
+    "react": "^18.2.0",
     "react-redux": "^8.1.2",
     "react-router-dom": "^6.16.0",
     "redux-persist": "^6.0.0",

src/components/CustomInterweave/index.tsx

@@ -0,0 +1,64 @@
+import { stripHexcode } from 'emojibase';
+import { InterweaveProps, FilterInterface, MatcherInterface, Interweave } from 'interweave';
+import { IpMatcher, UrlMatcher, EmailMatcher, HashtagMatcher } from 'interweave-autolink';
+import { EmojiMatcher, PathConfig } from 'interweave-emoji';
+
+const globalFilters: FilterInterface[] = [];
+
+const globalMatchers: MatcherInterface[] = [
+    new EmailMatcher('email'),
+    new IpMatcher('ip'),
+    new UrlMatcher('url'),
+    new HashtagMatcher('hashtag'),
+    new EmojiMatcher('emoji', {
+        convertEmoticon: true,
+        convertShortcode: true,
+        convertUnicode: true,
+    }),
+];
+
+function getEmojiPath(hexcode: string, { enlarged }: PathConfig): string {
+    return `//cdn.jsdelivr.net/emojione/assets/3.1/png/${enlarged ? 64 : 32}/${stripHexcode(
+        hexcode,
+    ).toLowerCase()}.png`;
+}
+
+interface Props extends InterweaveProps {
+    instagram?: boolean;
+    twitter?: boolean;
+}
+
+export default function CustomInterweave({
+    filters = [],
+    matchers = [],
+    twitter,
+    instagram,
+    ...props
+}: Props) {
+    let hashtagUrl = '';
+
+    if (twitter) {
+        hashtagUrl = 'https://twitter.com/hashtag/{{hashtag}}';
+    } else if (instagram) {
+        hashtagUrl = 'https://instagram.com/explore/tags/{{hashtag}}';
+    }
+
+    return (
+        <Interweave 
+            filters={[...globalFilters, ...filters]}
+            matchers={[...globalMatchers, ...matchers]}
+            // hashtagUrl={hashtagUrl}
+            emojiSource={getEmojiPath}
+            // newWindow
+            {...props}
+        />
+        // <BaseInterweave
+        //     filters={[...globalFilters, ...filters]}
+        //     matchers={[...globalMatchers, ...matchers]}
+        //     hashtagUrl={hashtagUrl}
+        //     emojiPath={getEmojiPath}
+        //     newWindow
+        //     {...props}
+        // />
+    );
+}

src/components/index.ts

@@ -2,10 +2,12 @@ import Header from "./Header";
 import SeparatorWithAnchor from "./Separator/WithAnchor";
 import DefaultSeparator from "./Separator/Default";
 import Footer from './Footer/';
+import CustomInterweave from "./CustomInterweave";
 
 export {
   Header,
   SeparatorWithAnchor,
   DefaultSeparator,
-  Footer
+  Footer,
+  CustomInterweave
 }

src/pages/LocationDetail/index.tsx

@@ -7,7 +7,7 @@ import useCallbackState from '../../types/state-callback';
 import { EmptyLocationDetailResponse, LocationDetailResponse, LocationResponse, emptyLocationResponse } from './types';
 import { useAutosizeTextArea } from '../../utils';
 import { getImagesByLocationService, getLocationService } from "../../services";
-import { DefaultSeparator, SeparatorWithAnchor } from '../../components';
+import { DefaultSeparator, SeparatorWithAnchor, CustomInterweave } from '../../components';
 
 function LocationDetail() {
   const [locationDetail, setLocationDetail] = useCallbackState<LocationDetailResponse>(EmptyLocationDetailResponse)
@@ -16,7 +16,9 @@ function LocationDetail() {
   const [pageState, setPageState] = useState({
     critic_filter_name: 'highest rated',
     critic_filter_type: 0,
-    show_sort: false
+    show_sort: false,
+    is_score_rating_panic_msg: '',
+    temp: ''
   })
   const [reviewValue, setReviewValue] = useState({
     review_textArea: '',
@@ -76,11 +78,34 @@ function LocationDetail() {
       ...reviewValue,
       score_input: val.value
     })
+
+    setPageState({
+      ...pageState,
+      is_score_rating_panic_msg: ''
+    })
   }
 
   function onChangeCriticsSort(e: TargetedEvent<HTMLAnchorElement>, sort_name: string, sort_type: number): void {
     e.preventDefault()
-    setPageState({ show_sort: false, critic_filter_name: sort_name, critic_filter_type: sort_type })
+    setPageState({ ...pageState, show_sort: false, critic_filter_name: sort_name, critic_filter_type: sort_type })
+  }
+
+  function handleSubmitReview(e: TargetedEvent<HTMLAnchorElement>) {
+    e.preventDefault();
+
+    if(Number(reviewValue.score_input) > 100) {
+      setPageState({ ...pageState, is_score_rating_panic_msg: "SCORE MUST BE LESS OR EQUAL THAN 100"})
+      return
+    }
+    
+    if(reviewValue.score_input === '') {
+      setPageState({ ...pageState, is_score_rating_panic_msg: "SCORE MUSTN'T BE EMPTY"})
+      return
+    }
+
+    const temp = reviewValue.review_textArea.replace(/\n/g, "<br>")
+
+    setPageState({ ...pageState, temp: temp })
   }
 
   useEffect(() => {
@@ -240,6 +265,9 @@ function LocationDetail() {
                         autoComplete={'off'}
                       />
                       <div className={'inline-block text-xs ml-2 text-tertiary'}>/ score</div>
+                      {pageState.is_score_rating_panic_msg &&
+                        <div className={'inline-block text-xs ml-2 text-error'}>{pageState.is_score_rating_panic_msg}</div>
+                      }
                     </div>
                     <div style={{ clear: 'both' }} />
                   </div>
@@ -259,12 +287,15 @@ function LocationDetail() {
                       <a>Review Guidelines</a>
                     </div>
                     <span className={'text-xxs p-1'} style={{ backgroundColor: 'gray', letterSpacing: 1 }}>
-                      <a href={'#'}>
+                      <a href={'#'} onClick={handleSubmitReview}>
                         POST
                       </a>
                     </span>
                   </div>
                 </div>
+                <CustomInterweave 
+                  content={pageState.temp}
+                />
               </div>
 
               <div name={'CRTICITS REVIEW'} style={{ margin: '50px 0', textAlign: 'left' }}>
@@ -608,11 +639,11 @@ function LocationDetail() {
                 anoeantoeh aoenthaoe aoenth aot
               </div>
             </div>
-            {screen.width >= 1024 &&
+            {/* {screen.width >= 1024 &&
               <div className={'bg-secondary'} style={{ display: 'table-cell', position: 'relative', verticalAlign: 'top', width: 330, textAlign: 'left', padding: 15, boxSizing: 'border-box', height: 1080 }}>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit cumque aliquam doloribus in reiciendis? Laborum, ea assumenda, tempora dolore placeat aspernatur, cumque totam sequi debitis dolor nam eligendi suscipit aliquid?
               </div>
-            }
+            } */}
           </div>
           <div style={{ clear: 'both'}} />
         </section>

yarn.lock

@@ -702,6 +702,21 @@ electron-to-chromium@^1.4.477:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.499.tgz#dc36b67f4c8e273524e8d2080c5203a6a76987b6"
   integrity sha512-0NmjlYBLKVHva4GABWAaHuPJolnDuL0AhV3h1hES6rcLCWEIbRL6/8TghfsVwkx6TEroQVdliX7+aLysUpKvjw==
 
+emojibase-regex@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/emojibase-regex/-/emojibase-regex-6.0.1.tgz#dc0b33d05c02f045ea44795d453698b205d41f0f"
+  integrity sha512-Mj1UT6IIk4j91yMFE0QetpUYcmsr5ZDkkOIMSGafhIgC086mBMaCh2Keaykx8YEllmV7hmx5zdANDzCYBYAVDw==
+
+emojibase@^15.0.0:
+  version "15.0.0"
+  resolved "https://registry.yarnpkg.com/emojibase/-/emojibase-15.0.0.tgz#f41b7773ec9a8a332373c18628ff4471255bd769"
+  integrity sha512-bvSIs98sHaVnyKPmW+obRjo49MFx0g+rhfSz6mTePAagEZSlDPosq0b6AcSJa5gt48z3VP2ooXclyBs8vIkpGA==
+
+emojibase@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/emojibase/-/emojibase-6.1.0.tgz#c3bc281e998a0e06398416090c23bac8c5ed3ee8"
+  integrity sha512-1GkKJPXP6tVkYJHOBSJHoGOr/6uaDxZ9xJ6H7m6PfdGXTmQgbALHLWaVRY4Gi/qf5x/gT/NUXLPuSHYLqtLtrQ==
+
 esbuild@^0.18.10:
   version "0.18.20"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.18.20.tgz#4709f5a34801b43b799ab7d6d82f7284a9b7a7a6"
@@ -735,6 +750,11 @@ escalade@^3.1.1:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
+escape-html@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
+
 escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
@@ -877,6 +897,26 @@ inherits@2:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
+interweave-autolink@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/interweave-autolink/-/interweave-autolink-5.1.0.tgz#a5a5438c45c5e4d631838473845be1fdd38a664b"
+  integrity sha512-WOEakAdwqv/W2H85cLdigkpMM7o6qVg4CWM6iO5cHrFCywwUh+ILVmZgX1tHphEpa55sFdzpKNO2EHhAjbR4GA==
+
+interweave-emoji@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/interweave-emoji/-/interweave-emoji-7.0.0.tgz#937455fcc616121761034d0c120edec4af8586c6"
+  integrity sha512-3yFBreW2h+I/Tjf9LpF/bKKdjGSi5DT1RxrRFibmmDjTB1tCyPe5X3XFNdglwoRPErgFL1qqFpQWQJKUlUwARg==
+  dependencies:
+    emojibase "^6.1.0"
+    emojibase-regex "^6.0.1"
+
+interweave@^13.1.0:
+  version "13.1.0"
+  resolved "https://registry.yarnpkg.com/interweave/-/interweave-13.1.0.tgz#4b7a0a87a7eb32001bef64525f68d95296dee03c"
+  integrity sha512-JIDq0+2NYg0cgL7AB26fBcV0yZdiJvPDBp+aF6k8gq6Cr1kH5Gd2/Xqn7j8z+TGb8jCWZn739jzalCz+nPYwcA==
+  dependencies:
+    escape-html "^1.0.3"
+
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@@ -913,7 +953,7 @@ jiti@^1.18.2:
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.19.3.tgz#ef554f76465b3c2b222dc077834a71f0d4a37569"
   integrity sha512-5eEbBDQT/jF1xg6l36P+mWGGoH9Spuy0PCdSr2dtWRDGC6ph/w9ZCL4lmESW8f8F7MwT3XKescfP0wnZWAKL9w==
 
-js-tokens@^4.0.0:
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
@@ -943,6 +983,13 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+loose-envify@^1.1.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
 lru-cache@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920"
@@ -1173,6 +1220,13 @@ react-router@6.16.0:
   dependencies:
     "@remix-run/router" "1.9.0"
 
+react@^18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"