From ade7e71d744c5fe55da4b18b1cb4fcdb17c93191 Mon Sep 17 00:00:00 2001 From: NCanggoro Date: Sun, 24 Sep 2023 18:06:57 +0700 Subject: [PATCH] add interweave --- package.json | 5 ++ src/components/CustomInterweave/index.tsx | 64 +++++++++++++++++++++++ src/components/index.ts | 4 +- src/pages/LocationDetail/index.tsx | 43 ++++++++++++--- yarn.lock | 56 +++++++++++++++++++- 5 files changed, 164 insertions(+), 8 deletions(-) create mode 100644 src/components/CustomInterweave/index.tsx diff --git a/package.json b/package.json index 39e62d5..2bbab0d 100644 --- a/package.json +++ b/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", diff --git a/src/components/CustomInterweave/index.tsx b/src/components/CustomInterweave/index.tsx new file mode 100644 index 0000000..f804253 --- /dev/null +++ b/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 ( + + // + ); +} \ No newline at end of file diff --git a/src/components/index.ts b/src/components/index.ts index c0b8adf..69f5ba8 100644 --- a/src/components/index.ts +++ b/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 } \ No newline at end of file diff --git a/src/pages/LocationDetail/index.tsx b/src/pages/LocationDetail/index.tsx index 1cbede2..a9413ed 100644 --- a/src/pages/LocationDetail/index.tsx +++ b/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(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, 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) { + 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, "
") + + setPageState({ ...pageState, temp: temp }) } useEffect(() => { @@ -240,6 +265,9 @@ function LocationDetail() { autoComplete={'off'} />
/ score
+ {pageState.is_score_rating_panic_msg && +
{pageState.is_score_rating_panic_msg}
+ }
@@ -259,12 +287,15 @@ function LocationDetail() { Review Guidelines - + POST +
@@ -608,11 +639,11 @@ function LocationDetail() { anoeantoeh aoenthaoe aoenth aot
- {screen.width >= 1024 && + {/* {screen.width >= 1024 &&
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?
- } + } */}
diff --git a/yarn.lock b/yarn.lock index 630a6d7..9fbf3d0 100644 --- a/yarn.lock +++ b/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"