diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 257c8a6..cd92d0c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -92,9 +92,6 @@ taehui-ts: specifier: workspace:^ version: link:../taehui-ts - urlcat: - specifier: ^3.1.0 - version: 3.1.0 devDependencies: '@types/crypto-js': specifier: ^4.2.1 @@ -109,8 +106,8 @@ specifier: ^20.10.2 version: 20.10.2 '@types/react': - specifier: ^18.2.40 - version: 18.2.40 + specifier: ^18.2.41 + version: 18.2.41 '@types/react-dom': specifier: ^18.2.17 version: 18.2.17 @@ -173,7 +170,7 @@ version: 5.0.1(@babel/plugin-syntax-flow@7.22.5)(@babel/plugin-transform-react-jsx@7.22.5)(eslint@8.55.0)(react@18.2.0)(sass@1.69.5)(typescript@5.3.2) react-textarea-autosize: specifier: ^8.5.3 - version: 8.5.3(@types/react@18.2.40)(react@18.2.0) + version: 8.5.3(@types/react@18.2.41)(react@18.2.0) react-toastify: specifier: ^9.1.3 version: 9.1.3(react-dom@18.2.0)(react@18.2.0) @@ -189,9 +186,6 @@ taehui-ts: specifier: workspace:^ version: link:../taehui-ts - urlcat: - specifier: ^3.1.0 - version: 3.1.0 devDependencies: '@types/crypto-js': specifier: ^4.2.1 @@ -206,8 +200,8 @@ specifier: ^20.10.2 version: 20.10.2 '@types/react': - specifier: ^18.2.40 - version: 18.2.40 + specifier: ^18.2.41 + version: 18.2.41 '@types/react-dom': specifier: ^18.2.17 version: 18.2.17 @@ -233,8 +227,8 @@ specifier: ^6.9.10 version: 6.9.10 '@types/react': - specifier: ^18.2.40 - version: 18.2.40 + specifier: ^18.2.41 + version: 18.2.41 dayjs: specifier: ^1.11.10 version: 1.11.10 @@ -3201,14 +3195,14 @@ /@types/react-dom@18.2.17: resolution: {integrity: sha512-rvrT/M7Df5eykWFxn6MYt5Pem/Dbyc1N8Y0S9Mrkw2WFCRiqUgw9P7ul2NpwsXCSM1DVdENzdG9J5SreqfAIWg==} dependencies: - '@types/react': 18.2.40 + '@types/react': 18.2.41 dev: true /@types/react-router-dom@5.3.3: resolution: {integrity: sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==} dependencies: '@types/history': 4.7.11 - '@types/react': 18.2.40 + '@types/react': 18.2.41 '@types/react-router': 5.1.20 dev: true @@ -3216,11 +3210,11 @@ resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==} dependencies: '@types/history': 4.7.11 - '@types/react': 18.2.40 + '@types/react': 18.2.41 dev: true - /@types/react@18.2.40: - resolution: {integrity: sha512-H+BUhb9C1zBtogDLAk+KCNRKiHDrqSwQT/0z0PVTwMFBxqg3011ByLomADtgkgMkfwj4AMOiXBReyLTUBg681g==} + /@types/react@18.2.41: + resolution: {integrity: sha512-CwOGr/PiLiNBxEBqpJ7fO3kocP/2SSuC9fpH5K7tusrg4xPSRT/193rzolYwQnTN02We/ATXKnb6GqA5w4fRxw==} dependencies: '@types/prop-types': 15.7.5 '@types/scheduler': 0.16.3 @@ -9643,7 +9637,7 @@ react-dom: 18.2.0(react@18.2.0) dev: false - /react-textarea-autosize@8.5.3(@types/react@18.2.40)(react@18.2.0): + /react-textarea-autosize@8.5.3(@types/react@18.2.41)(react@18.2.0): resolution: {integrity: sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==} engines: {node: '>=10'} peerDependencies: @@ -9652,7 +9646,7 @@ '@babel/runtime': 7.22.6 react: 18.2.0 use-composed-ref: 1.3.0(react@18.2.0) - use-latest: 1.2.1(@types/react@18.2.40)(react@18.2.0) + use-latest: 1.2.1(@types/react@18.2.41)(react@18.2.0) transitivePeerDependencies: - '@types/react' dev: false @@ -10996,12 +10990,6 @@ requires-port: 1.0.0 dev: false - /urlcat@3.1.0: - resolution: {integrity: sha512-qY6b94/aGMIHh70EEQ/4hfR2LUGZ+fPQNp64cf7yRX9kAp4XG2tx7LgYUU1Qkh17bFylME0u4n3lOezonougPw==} - dependencies: - qs: 6.11.2 - dev: false - /use-composed-ref@1.3.0(react@18.2.0): resolution: {integrity: sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==} peerDependencies: @@ -11010,7 +10998,7 @@ react: 18.2.0 dev: false - /use-isomorphic-layout-effect@1.1.2(@types/react@18.2.40)(react@18.2.0): + /use-isomorphic-layout-effect@1.1.2(@types/react@18.2.41)(react@18.2.0): resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==} peerDependencies: '@types/react': '*' @@ -11019,11 +11007,11 @@ '@types/react': optional: true dependencies: - '@types/react': 18.2.40 + '@types/react': 18.2.41 react: 18.2.0 dev: false - /use-latest@1.2.1(@types/react@18.2.40)(react@18.2.0): + /use-latest@1.2.1(@types/react@18.2.41)(react@18.2.0): resolution: {integrity: sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==} peerDependencies: '@types/react': '*' @@ -11032,9 +11020,9 @@ '@types/react': optional: true dependencies: - '@types/react': 18.2.40 + '@types/react': 18.2.41 react: 18.2.0 - use-isomorphic-layout-effect: 1.1.2(@types/react@18.2.40)(react@18.2.0) + use-isomorphic-layout-effect: 1.1.2(@types/react@18.2.41)(react@18.2.0) dev: false /use-sync-external-store@1.2.0(react@18.2.0): diff --git a/qwilight-fe/package.json b/qwilight-fe/package.json index a3c3ff2..6d0ec4d 100644 --- a/qwilight-fe/package.json +++ b/qwilight-fe/package.json @@ -24,15 +24,14 @@ "reactstrap": "^9.2.1", "sprintf-js": "^1.1.3", "sweetalert2": "^11.10.1", - "taehui-ts": "workspace:^", - "urlcat": "^3.1.0" + "taehui-ts": "workspace:^" }, "devDependencies": { "@types/crypto-js": "^4.2.1", "@types/dompurify": "^3.0.5", "@types/jest": "^29.5.10", "@types/node": "^20.10.2", - "@types/react": "^18.2.40", + "@types/react": "^18.2.41", "@types/react-dom": "^18.2.17", "@types/react-router-dom": "^5.3.3", "@types/sprintf-js": "^1.1.4", diff --git a/qwilight-fe/src/avatar/AvatarView.tsx b/qwilight-fe/src/avatar/AvatarView.tsx index e511492..82aef50 100644 --- a/qwilight-fe/src/avatar/AvatarView.tsx +++ b/qwilight-fe/src/avatar/AvatarView.tsx @@ -84,29 +84,29 @@ const to = useTo(); - const { wantAvatarName } = useParams<{ wantAvatarName: string }>(); + const { want } = useParams<{ want: string }>(); const { t } = useTranslation(); useEffect(() => { - setInput(wantAvatarName ?? ""); - }, [wantAvatarName, setInput]); + setInput(want ?? ""); + }, [want, setInput]); useEffect(() => { - if (wantAvatarName) { + if (want) { setLoading(true); (async () => { - if (wantAvatarName.startsWith("#")) { + if (want.startsWith("#")) { await getAvatar(t, { - avatarID: wantAvatarName.substring(wantAvatarName.indexOf("#") + 1), + avatarID: want.substring(want.indexOf("#") + 1), }); } else { - await getAvatar(t, { avatarName: wantAvatarName }); + await getAvatar(t, { avatarName: want }); } setLoading(false); })(); } - }, [getAvatar, t, wantAvatarName]); + }, [getAvatar, t, want]); useEffect(() => { if (avatarID) { diff --git a/qwilight-fe/src/note/CommentItems.tsx b/qwilight-fe/src/note/CommentItems.tsx index 0b57163..3b285bb 100644 --- a/qwilight-fe/src/note/CommentItems.tsx +++ b/qwilight-fe/src/note/CommentItems.tsx @@ -59,8 +59,8 @@ isP={isP} commentary={commentary} isTargetAvatar={ - (wantAvatarID && wantAvatarID === avatarID ? true : false) || - (wantAvatarName && wantAvatarName === avatarName ? true : false) + !!(wantAvatarID && wantAvatarID === avatarID) || + !!(wantAvatarName && wantAvatarName === avatarName) } judgmentMode={judgmentMode} hitPointsMode={hitPointsMode} diff --git a/qwilight-fe/src/note/NoteView.tsx b/qwilight-fe/src/note/NoteView.tsx index 94bad3b..700655e 100644 --- a/qwilight-fe/src/note/NoteView.tsx +++ b/qwilight-fe/src/note/NoteView.tsx @@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next"; import { Button, Col, Input, Row } from "reactstrap"; import { sprintf } from "sprintf-js"; -import { usePage } from "taehui-ts/fe-utility"; +import { usePage, useWant } from "taehui-ts/fe-utility"; import { useNoteStore } from "src/Stores"; import NoteItems from "src/note/NoteItems"; @@ -17,14 +17,12 @@ totalCount, highestCount, setInput, - setWant, lastPage, isLoading, getNote, fit, src, input, - want, pageUnit, viewUnit, } = useNoteStore(); @@ -33,14 +31,24 @@ const { page, setPage } = usePage(); + const { want, setWant } = useWant("/qwilight/note"); + useEffect(() => { - getNote(page, setPage); + setInput(want); + }, [setInput, want]); + + useEffect(() => { + getNote(want, page, setPage); }, [getNote, fit, src, want, pageUnit, page, viewUnit, setPage]); const onWant = () => { setWant(input); }; + const onClose = () => { + setWant(""); + }; + return ( <> @@ -70,13 +78,7 @@ - diff --git a/qwilight-fe/src/note/setNoteStore.ts b/qwilight-fe/src/note/setNoteStore.ts index 48b4584..d3f0b80 100644 --- a/qwilight-fe/src/note/setNoteStore.ts +++ b/qwilight-fe/src/note/setNoteStore.ts @@ -17,8 +17,7 @@ fit: 0, src: 0, input: "", - want: "", - lastPage: 0, + lastPage: 1, pageUnit: 10, viewUnit: 20, isLoading: false, @@ -35,13 +34,9 @@ this.input = input; }, - setWant(want: string) { - this.want = want; - }, - - async getNote(page: number, setPage: (page: number) => void) { - this.wantAvatar = this.src === 1 ? this.want : ""; - if ((this.want !== lastWant || this.src !== lastSrc) && page > 1) { + async getNote(want: string, page: number, setPage: (page: number) => void) { + this.wantAvatar = this.src === 1 ? want : ""; + if ((want !== lastWant || this.src !== lastSrc) && page > 1) { setPage(1); } else { const millis = getMillis(); @@ -51,7 +46,7 @@ params: { fit: this.fit, src: this.src, - want: this.want, + want, page, viewUnit: this.viewUnit, }, @@ -61,14 +56,17 @@ runInAction(() => { this.totalCount = data.totalCount; this.highestCount = data.highestCount; - this.lastPage = Math.ceil(data.noteCount / this.viewUnit); + this.lastPage = Math.max( + 1, + Math.ceil(data.noteCount / this.viewUnit), + ); this.notes = data.notes; this.isLoading = false; }); } } } - lastWant = this.want; + lastWant = want; lastSrc = this.src; }, }; diff --git a/qwilight-fe/src/qwilight/QwilightView.tsx b/qwilight-fe/src/qwilight/QwilightView.tsx index c196c71..cd30273 100644 --- a/qwilight-fe/src/qwilight/QwilightView.tsx +++ b/qwilight-fe/src/qwilight/QwilightView.tsx @@ -147,7 +147,7 @@ } /> }> @@ -166,7 +166,7 @@ } /> }> diff --git a/taehui-fe/package.json b/taehui-fe/package.json index dc1bbc5..e702993 100644 --- a/taehui-fe/package.json +++ b/taehui-fe/package.json @@ -23,15 +23,14 @@ "reactstrap": "^9.2.1", "sprintf-js": "^1.1.3", "sweetalert2": "^11.10.1", - "taehui-ts": "workspace:^", - "urlcat": "^3.1.0" + "taehui-ts": "workspace:^" }, "devDependencies": { "@types/crypto-js": "^4.2.1", "@types/dompurify": "^3.0.5", "@types/jest": "^29.5.10", "@types/node": "^20.10.2", - "@types/react": "^18.2.40", + "@types/react": "^18.2.41", "@types/react-dom": "^18.2.17", "@types/showdown": "^2.0.6", "@types/sprintf-js": "^1.1.4", diff --git a/taehui-ts/package.json b/taehui-ts/package.json index b8decf8..b63671d 100644 --- a/taehui-ts/package.json +++ b/taehui-ts/package.json @@ -23,7 +23,7 @@ "devDependencies": { "@rollup/plugin-typescript": "^11.1.5", "@types/qs": "^6.9.10", - "@types/react": "^18.2.40", + "@types/react": "^18.2.41", "dayjs": "^1.11.10", "qs": "^6.11.2", "react": "^18.2.0", diff --git a/taehui-ts/src/fe-utility.ts b/taehui-ts/src/fe-utility.ts index 3e15fce..d56dde0 100644 --- a/taehui-ts/src/fe-utility.ts +++ b/taehui-ts/src/fe-utility.ts @@ -1,5 +1,5 @@ import { useCallback, useEffect, useState } from "react"; -import { useNavigate, useSearchParams } from "react-router-dom"; +import { useNavigate, useParams, useSearchParams } from "react-router-dom"; export function useWindowArea() { const [windowLength, setWindowLength] = useState(window.innerWidth); @@ -43,3 +43,18 @@ ), }; } + +export function useWant(route: string) { + const to = useTo(); + const { want = "" } = useParams<{ want: string }>(); + + return { + want, + setWant: useCallback( + (want: string) => { + to(route + "/" + want); + }, + [to, route], + ), + }; +}