From 5c764dac8fe70907d40fa61e1f72d6c565a4aab9 Mon Sep 17 00:00:00 2001 From: yukionishi1129 Date: Thu, 18 Apr 2024 21:57:12 +0900 Subject: [PATCH 1/9] add bookmark tooltip --- web/client/package-lock.json | 179 ++++++++++++++++++ web/client/package.json | 2 + web/client/src/components/ui/alert-dialog.tsx | 141 ++++++++++++++ web/client/src/components/ui/tooltip.tsx | 30 +++ .../articles/components/ArticleCard.tsx | 9 +- .../components/ArticleCardWrapper.tsx | 26 +-- .../components/Tooltip/AddBookmarkTooptip.tsx | 32 ++++ .../articles/components/Tooltip/index.tsx | 0 .../components/DeleteBookmarkAlertDialog.tsx | 45 +++++ 9 files changed, 444 insertions(+), 20 deletions(-) create mode 100644 web/client/src/components/ui/alert-dialog.tsx create mode 100644 web/client/src/components/ui/tooltip.tsx create mode 100644 web/client/src/features/articles/components/Tooltip/AddBookmarkTooptip.tsx create mode 100644 web/client/src/features/articles/components/Tooltip/index.tsx create mode 100644 web/client/src/features/bookmarks/components/DeleteBookmarkAlertDialog.tsx diff --git a/web/client/package-lock.json b/web/client/package-lock.json index fd535760..2ff49a14 100644 --- a/web/client/package-lock.json +++ b/web/client/package-lock.json @@ -13,6 +13,7 @@ "@auth/supabase-adapter": "^0.6.2", "@hookform/resolvers": "^3.3.4", "@prisma/client": "^5.12.0", + "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", @@ -23,6 +24,7 @@ "@radix-ui/react-switch": "^1.0.3", "@radix-ui/react-tabs": "^1.0.4", "@radix-ui/react-toast": "^1.1.5", + "@radix-ui/react-tooltip": "^1.0.7", "@supabase/auth-helpers-nextjs": "^0.10.0", "@supabase/ssr": "^0.1.0", "@supabase/supabase-js": "^2.42.0", @@ -832,6 +834,40 @@ "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.10.5.tgz", "integrity": "sha512-eSkJsnhBWv5kCTSU1tSUVl9mpFu+5NXXunZc83le8GMjMlsWwQArSc7cJJ4yl+aDFY0NGLi0AjZWMn1axOrkRg==" }, + "node_modules/@floating-ui/core": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz", + "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==", + "dependencies": { + "@floating-ui/utils": "^0.2.1" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz", + "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==", + "dependencies": { + "@floating-ui/core": "^1.0.0", + "@floating-ui/utils": "^0.2.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz", + "integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==", + "dependencies": { + "@floating-ui/dom": "^1.6.1" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", + "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" + }, "node_modules/@google-cloud/firestore": { "version": "6.8.0", "resolved": "https://registry.npmjs.org/@google-cloud/firestore/-/firestore-6.8.0.tgz", @@ -1408,6 +1444,57 @@ "@babel/runtime": "^7.13.10" } }, + "node_modules/@radix-ui/react-alert-dialog": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.0.5.tgz", + "integrity": "sha512-OrVIOcZL0tl6xibeuGt5/+UxoT2N27KCFOPjFyfXMnchxSHZ/OW7cCX2nGlIYJrbHK/fczPcFzAwvNBB6XBNMA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-dialog": "1.0.5", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-slot": "1.0.2" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-arrow": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz", + "integrity": "sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-avatar": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.0.4.tgz", @@ -1695,6 +1782,38 @@ } } }, + "node_modules/@radix-ui/react-popper": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.3.tgz", + "integrity": "sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@floating-ui/react-dom": "^2.0.0", + "@radix-ui/react-arrow": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1", + "@radix-ui/react-use-rect": "1.0.1", + "@radix-ui/react-use-size": "1.0.1", + "@radix-ui/rect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-portal": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz", @@ -1939,6 +2058,40 @@ } } }, + "node_modules/@radix-ui/react-tooltip": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz", + "integrity": "sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-dismissable-layer": "1.0.5", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-popper": "1.1.3", + "@radix-ui/react-portal": "1.0.4", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-slot": "1.0.2", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-visually-hidden": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-use-callback-ref": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz", @@ -2026,6 +2179,24 @@ } } }, + "node_modules/@radix-ui/react-use-rect": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz", + "integrity": "sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/rect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-use-size": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz", @@ -2067,6 +2238,14 @@ } } }, + "node_modules/@radix-ui/rect": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz", + "integrity": "sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==", + "dependencies": { + "@babel/runtime": "^7.13.10" + } + }, "node_modules/@rushstack/eslint-patch": { "version": "1.7.2", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.7.2.tgz", diff --git a/web/client/package.json b/web/client/package.json index 348ab195..5cbfcda6 100644 --- a/web/client/package.json +++ b/web/client/package.json @@ -21,6 +21,7 @@ "@auth/supabase-adapter": "^0.6.2", "@hookform/resolvers": "^3.3.4", "@prisma/client": "^5.12.0", + "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", @@ -31,6 +32,7 @@ "@radix-ui/react-switch": "^1.0.3", "@radix-ui/react-tabs": "^1.0.4", "@radix-ui/react-toast": "^1.1.5", + "@radix-ui/react-tooltip": "^1.0.7", "@supabase/auth-helpers-nextjs": "^0.10.0", "@supabase/ssr": "^0.1.0", "@supabase/supabase-js": "^2.42.0", diff --git a/web/client/src/components/ui/alert-dialog.tsx b/web/client/src/components/ui/alert-dialog.tsx new file mode 100644 index 00000000..25e7b474 --- /dev/null +++ b/web/client/src/components/ui/alert-dialog.tsx @@ -0,0 +1,141 @@ +"use client" + +import * as React from "react" +import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" + +import { cn } from "@/lib/utils" +import { buttonVariants } from "@/components/ui/button" + +const AlertDialog = AlertDialogPrimitive.Root + +const AlertDialogTrigger = AlertDialogPrimitive.Trigger + +const AlertDialogPortal = AlertDialogPrimitive.Portal + +const AlertDialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName + +const AlertDialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + +)) +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName + +const AlertDialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogHeader.displayName = "AlertDialogHeader" + +const AlertDialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogFooter.displayName = "AlertDialogFooter" + +const AlertDialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName + +const AlertDialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogDescription.displayName = + AlertDialogPrimitive.Description.displayName + +const AlertDialogAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName + +const AlertDialogCancel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName + +export { + AlertDialog, + AlertDialogPortal, + AlertDialogOverlay, + AlertDialogTrigger, + AlertDialogContent, + AlertDialogHeader, + AlertDialogFooter, + AlertDialogTitle, + AlertDialogDescription, + AlertDialogAction, + AlertDialogCancel, +} diff --git a/web/client/src/components/ui/tooltip.tsx b/web/client/src/components/ui/tooltip.tsx new file mode 100644 index 00000000..30fc44d9 --- /dev/null +++ b/web/client/src/components/ui/tooltip.tsx @@ -0,0 +1,30 @@ +"use client" + +import * as React from "react" +import * as TooltipPrimitive from "@radix-ui/react-tooltip" + +import { cn } from "@/lib/utils" + +const TooltipProvider = TooltipPrimitive.Provider + +const Tooltip = TooltipPrimitive.Root + +const TooltipTrigger = TooltipPrimitive.Trigger + +const TooltipContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, sideOffset = 4, ...props }, ref) => ( + +)) +TooltipContent.displayName = TooltipPrimitive.Content.displayName + +export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } diff --git a/web/client/src/features/articles/components/ArticleCard.tsx b/web/client/src/features/articles/components/ArticleCard.tsx index a0045a5b..83754025 100644 --- a/web/client/src/features/articles/components/ArticleCard.tsx +++ b/web/client/src/features/articles/components/ArticleCard.tsx @@ -35,10 +35,14 @@ export const ArticleCard: FC = ({
-

+

{article.title}

+

+ {showDiffDateToCurrentDate(article.publishedAt)} +

+
{/* eslint-disable-next-line @next/next/no-img-element */} = ({

))}
-

- {showDiffDateToCurrentDate(article.publishedAt)} -

diff --git a/web/client/src/features/articles/components/ArticleCardWrapper.tsx b/web/client/src/features/articles/components/ArticleCardWrapper.tsx index 7ff209fd..c65b5fd7 100644 --- a/web/client/src/features/articles/components/ArticleCardWrapper.tsx +++ b/web/client/src/features/articles/components/ArticleCardWrapper.tsx @@ -2,7 +2,6 @@ import { User } from "@supabase/supabase-js"; import { FC } from "react"; import { FcBookmark } from "react-icons/fc"; -import { MdOutlineBookmarkAdd } from "react-icons/md"; // import { uuid } from "uuidv4"; import { Button } from "@/components/ui/button"; @@ -11,6 +10,7 @@ import { ArticleType } from "@/types/article"; import { ArticleCard } from "./ArticleCard"; import { ArticleDetailSheet } from "./ArticleDetailSheet"; +import { AddBookmarkTooltip } from "./Tooltip/AddBookmarkTooptip"; import { useArticleBookmark } from "../hooks/useArticleBookmark"; type ArticleCardWrapperProps = { @@ -26,14 +26,11 @@ export const ArticleCardWrapper: FC = ({ useArticleBookmark({ article }); return ( -
-
- - - -
- -
+
+ + + +
{user && (
{bookmarkId ? ( @@ -45,13 +42,10 @@ export const ArticleCardWrapper: FC = ({ ) : ( - + )}
)} diff --git a/web/client/src/features/articles/components/Tooltip/AddBookmarkTooptip.tsx b/web/client/src/features/articles/components/Tooltip/AddBookmarkTooptip.tsx new file mode 100644 index 00000000..e281fb52 --- /dev/null +++ b/web/client/src/features/articles/components/Tooltip/AddBookmarkTooptip.tsx @@ -0,0 +1,32 @@ +import { FC } from "react"; +import { MdOutlineBookmarkAdd } from "react-icons/md"; + +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; + +type AddBookmarkTooltipProps = { + articleId: string; + handleAddBookmark: (articleId: string) => Promise; +}; + +export const AddBookmarkTooltip: FC = ({ + articleId, + handleAddBookmark, +}: AddBookmarkTooltipProps) => { + return ( + + + handleAddBookmark(articleId)}> + + + +

Add bookmark

+ + + + ); +}; diff --git a/web/client/src/features/articles/components/Tooltip/index.tsx b/web/client/src/features/articles/components/Tooltip/index.tsx new file mode 100644 index 00000000..e69de29b diff --git a/web/client/src/features/bookmarks/components/DeleteBookmarkAlertDialog.tsx b/web/client/src/features/bookmarks/components/DeleteBookmarkAlertDialog.tsx new file mode 100644 index 00000000..948d2b5c --- /dev/null +++ b/web/client/src/features/bookmarks/components/DeleteBookmarkAlertDialog.tsx @@ -0,0 +1,45 @@ +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, + AlertDialogTrigger, +} from "@/components/ui/alert-dialog"; +import { Button } from "@/components/ui/button"; + +type DeleteBookmarkAlertDialogProps = { + bookmarkTitle: string; +}; + +export function DeleteBookmarkAlertDialog({ + bookmarkTitle, +}: DeleteBookmarkAlertDialogProps) { + return ( + + + + + + + + Are you sure you want me to delete it? + + + This action cannot be undone. This will permanently remove your data + from our servers. +

+ Delete bookmark title is ${bookmarkTitle} + + + + Cancel + Delete + + + + ); +} From 38b17c7f4f211a6b0b1b1e81c2045041c64f5c74 Mon Sep 17 00:00:00 2001 From: yukionishi1129 Date: Thu, 18 Apr 2024 22:05:12 +0900 Subject: [PATCH 2/9] delete tooltip --- web/client/src/components/ui/tooltip.tsx | 20 ++++++------ .../components/ArticleCardWrapper.tsx | 20 ++++-------- ...markTooptip.tsx => AddBookmarkTooltip.tsx} | 0 .../Tooltip/DeleteBookmarkTooltip.tsx | 32 +++++++++++++++++++ .../articles/components/Tooltip/index.tsx | 2 ++ 5 files changed, 51 insertions(+), 23 deletions(-) rename web/client/src/features/articles/components/Tooltip/{AddBookmarkTooptip.tsx => AddBookmarkTooltip.tsx} (100%) create mode 100644 web/client/src/features/articles/components/Tooltip/DeleteBookmarkTooltip.tsx diff --git a/web/client/src/components/ui/tooltip.tsx b/web/client/src/components/ui/tooltip.tsx index 30fc44d9..061129f4 100644 --- a/web/client/src/components/ui/tooltip.tsx +++ b/web/client/src/components/ui/tooltip.tsx @@ -1,15 +1,15 @@ -"use client" +"use client"; -import * as React from "react" -import * as TooltipPrimitive from "@radix-ui/react-tooltip" +import * as TooltipPrimitive from "@radix-ui/react-tooltip"; +import * as React from "react"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; -const TooltipProvider = TooltipPrimitive.Provider +const TooltipProvider = TooltipPrimitive.Provider; -const Tooltip = TooltipPrimitive.Root +const Tooltip = TooltipPrimitive.Root; -const TooltipTrigger = TooltipPrimitive.Trigger +const TooltipTrigger = TooltipPrimitive.Trigger; const TooltipContent = React.forwardRef< React.ElementRef, @@ -24,7 +24,7 @@ const TooltipContent = React.forwardRef< )} {...props} /> -)) -TooltipContent.displayName = TooltipPrimitive.Content.displayName +)); +TooltipContent.displayName = TooltipPrimitive.Content.displayName; -export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } +export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }; diff --git a/web/client/src/features/articles/components/ArticleCardWrapper.tsx b/web/client/src/features/articles/components/ArticleCardWrapper.tsx index c65b5fd7..17fbb492 100644 --- a/web/client/src/features/articles/components/ArticleCardWrapper.tsx +++ b/web/client/src/features/articles/components/ArticleCardWrapper.tsx @@ -1,16 +1,13 @@ "use client"; import { User } from "@supabase/supabase-js"; import { FC } from "react"; -import { FcBookmark } from "react-icons/fc"; // import { uuid } from "uuidv4"; -import { Button } from "@/components/ui/button"; - import { ArticleType } from "@/types/article"; import { ArticleCard } from "./ArticleCard"; import { ArticleDetailSheet } from "./ArticleDetailSheet"; -import { AddBookmarkTooltip } from "./Tooltip/AddBookmarkTooptip"; +import { AddBookmarkTooltip, DeleteBookmarkTooltip } from "./Tooltip"; import { useArticleBookmark } from "../hooks/useArticleBookmark"; type ArticleCardWrapperProps = { @@ -32,22 +29,19 @@ export const ArticleCardWrapper: FC = ({
{user && ( -
+ <> {bookmarkId ? ( - + ) : ( )} -
+ )}
diff --git a/web/client/src/features/articles/components/Tooltip/AddBookmarkTooptip.tsx b/web/client/src/features/articles/components/Tooltip/AddBookmarkTooltip.tsx similarity index 100% rename from web/client/src/features/articles/components/Tooltip/AddBookmarkTooptip.tsx rename to web/client/src/features/articles/components/Tooltip/AddBookmarkTooltip.tsx diff --git a/web/client/src/features/articles/components/Tooltip/DeleteBookmarkTooltip.tsx b/web/client/src/features/articles/components/Tooltip/DeleteBookmarkTooltip.tsx new file mode 100644 index 00000000..97714394 --- /dev/null +++ b/web/client/src/features/articles/components/Tooltip/DeleteBookmarkTooltip.tsx @@ -0,0 +1,32 @@ +import { FC } from "react"; +import { FcBookmark } from "react-icons/fc"; + +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; + +type DeleteBookmarkTooltipProps = { + bookmarkId: string; + handleRemoveBookmark: (bookmarkId: string) => Promise; +}; + +export const DeleteBookmarkTooltip: FC = ({ + bookmarkId, + handleRemoveBookmark, +}: DeleteBookmarkTooltipProps) => { + return ( + + + handleRemoveBookmark(bookmarkId)}> + + + +

Delete bookmark

+ + + + ); +}; diff --git a/web/client/src/features/articles/components/Tooltip/index.tsx b/web/client/src/features/articles/components/Tooltip/index.tsx index e69de29b..3d918b22 100644 --- a/web/client/src/features/articles/components/Tooltip/index.tsx +++ b/web/client/src/features/articles/components/Tooltip/index.tsx @@ -0,0 +1,2 @@ +export * from "./AddBookmarkTooltip"; +export * from "./DeleteBookmarkTooltip"; From 3a81348904b41111f1d9449723057a6955cdb47e Mon Sep 17 00:00:00 2001 From: yukionishi1129 Date: Thu, 18 Apr 2024 22:11:40 +0900 Subject: [PATCH 3/9] DeleteBookmarkAlertDialog --- .../components/DeleteBookmarkAlertDialog.tsx | 13 +++- .../features/bookmarks/hooks/useBookmark.ts | 64 +++++++++++++++++++ 2 files changed, 75 insertions(+), 2 deletions(-) create mode 100644 web/client/src/features/bookmarks/hooks/useBookmark.ts diff --git a/web/client/src/features/bookmarks/components/DeleteBookmarkAlertDialog.tsx b/web/client/src/features/bookmarks/components/DeleteBookmarkAlertDialog.tsx index 948d2b5c..ad8201d6 100644 --- a/web/client/src/features/bookmarks/components/DeleteBookmarkAlertDialog.tsx +++ b/web/client/src/features/bookmarks/components/DeleteBookmarkAlertDialog.tsx @@ -1,3 +1,5 @@ +import { DeleteBookmarkTooltip } from "@/features/articles/components/Tooltip"; + import { AlertDialog, AlertDialogAction, @@ -9,19 +11,26 @@ import { AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog"; -import { Button } from "@/components/ui/button"; + +import { useBookmark } from "../hooks/useBookmark"; type DeleteBookmarkAlertDialogProps = { bookmarkTitle: string; + bookmarkId: string; }; export function DeleteBookmarkAlertDialog({ bookmarkTitle, + bookmarkId, }: DeleteBookmarkAlertDialogProps) { + const { handleRemoveBookmark } = useBookmark(); return ( - + diff --git a/web/client/src/features/bookmarks/hooks/useBookmark.ts b/web/client/src/features/bookmarks/hooks/useBookmark.ts new file mode 100644 index 00000000..9245d114 --- /dev/null +++ b/web/client/src/features/bookmarks/hooks/useBookmark.ts @@ -0,0 +1,64 @@ +import { useCallback } from "react"; + +import { getUser } from "@/features/users/actions/user"; + +import { useStatusToast } from "@/hooks/useStatusToast"; + +import { fetchBookmarkByIdCountAPI } from "../actions/bookmark"; +import { deleteBookmark } from "../repository/bookmark"; + +export const useBookmark = () => { + const { successToast, failToast } = useStatusToast(); + + const handleRemoveBookmark = useCallback( + async (bookmarkId: string) => { + if (!bookmarkId) return; + const res = await fetchBookmarkByIdCountAPI({ + bookmarkId: bookmarkId, + }); + if (res.status === 401) { + failToast({ + description: "Fail: Unauthorized", + }); + return; + } + if (res.status !== 200) { + failToast({ + description: "Fail: Something went wrong", + }); + return; + } + if (!res.data?.count) { + failToast({ + description: "Fail: Bookmark not found", + }); + return; + } + + const user = await getUser(); + if (!user) { + failToast({ + description: "Fail: Please login to remove bookmark", + }); + return; + } + + const id = await deleteBookmark({ + bookmarkId: bookmarkId, + userId: user?.id || "", + }); + if (!id) { + failToast({ + description: "Fail: Something went wrong", + }); + return; + } + successToast({ + description: "Remove bookmark", + }); + }, + [successToast, failToast] + ); + + return { handleRemoveBookmark }; +}; From a107d48bf823b466f6621c0bf5c09d01c0391707 Mon Sep 17 00:00:00 2001 From: yukionishi1129 Date: Thu, 18 Apr 2024 22:21:39 +0900 Subject: [PATCH 4/9] bookmark wrapper --- .../articles/components/ArticleList.tsx | 8 +++--- .../bookmarks/components/BookmarkCard.tsx | 11 ++++---- .../components/BookmarkCardWrapper.tsx | 25 +++++++++++++++++++ .../bookmarks/components/BookmarkList.tsx | 9 +++---- 4 files changed, 37 insertions(+), 16 deletions(-) create mode 100644 web/client/src/features/bookmarks/components/BookmarkCardWrapper.tsx diff --git a/web/client/src/features/articles/components/ArticleList.tsx b/web/client/src/features/articles/components/ArticleList.tsx index 5913ca79..7417a0c2 100644 --- a/web/client/src/features/articles/components/ArticleList.tsx +++ b/web/client/src/features/articles/components/ArticleList.tsx @@ -110,11 +110,9 @@ export function ArticleList({ ) : (
{flatArticles.map((article) => ( - +
+ +
))}
{hashMore && ( diff --git a/web/client/src/features/bookmarks/components/BookmarkCard.tsx b/web/client/src/features/bookmarks/components/BookmarkCard.tsx index 9412e11c..3987f6c8 100644 --- a/web/client/src/features/bookmarks/components/BookmarkCard.tsx +++ b/web/client/src/features/bookmarks/components/BookmarkCard.tsx @@ -32,11 +32,15 @@ export const BookmarkCard: FC = ({
-

+

{bookmark.title}

-
+

+ {`登録: ${showDiffDateToCurrentDate(bookmark.createdAt)}`} +

+ +
{/* eslint-disable-next-line @next/next/no-img-element */} = ({ {bookmark.platformName}

-

- {`登録: ${showDiffDateToCurrentDate(bookmark.createdAt)}`} -

diff --git a/web/client/src/features/bookmarks/components/BookmarkCardWrapper.tsx b/web/client/src/features/bookmarks/components/BookmarkCardWrapper.tsx new file mode 100644 index 00000000..c5c47828 --- /dev/null +++ b/web/client/src/features/bookmarks/components/BookmarkCardWrapper.tsx @@ -0,0 +1,25 @@ +"use client"; +import { FC } from "react"; +// import { uuid } from "uuidv4"; + +import { BookmarkType } from "@/types/bookmark"; + +import { BookmarkCard } from "./BookmarkCard"; +import { BookmarkDetailSheet } from "./BookmarkDetailSheet"; + +type BookmarkCardWrapperProps = { + bookmark: BookmarkType; +}; + +export const BookmarkCardWrapper: FC = ({ + bookmark, +}: BookmarkCardWrapperProps) => { + return ( +
+ + + +
+
+ ); +}; diff --git a/web/client/src/features/bookmarks/components/BookmarkList.tsx b/web/client/src/features/bookmarks/components/BookmarkList.tsx index 3cf0b151..64a0d266 100644 --- a/web/client/src/features/bookmarks/components/BookmarkList.tsx +++ b/web/client/src/features/bookmarks/components/BookmarkList.tsx @@ -8,8 +8,7 @@ import { Loader } from "@/components/ui/loader"; import { BookmarkType } from "@/types/bookmark"; import { LanguageStatus } from "@/types/language"; -import { BookmarkCard } from "./BookmarkCard"; -import { BookmarkDetailSheet } from "./BookmarkDetailSheet"; +import { BookmarkCardWrapper } from "./BookmarkCardWrapper"; import { FetchBookmarkListAPIResponse } from "../actions/bookmark"; type Props = { @@ -103,10 +102,8 @@ export const BookmarkList: FC = ({ return (
{flatBookmarks.map((bookmark) => ( -
- - - +
+
))}
From 4baecdab90d5e66204dac1ef62243d66e0cd6287 Mon Sep 17 00:00:00 2001 From: yukionishi1129 Date: Thu, 18 Apr 2024 22:54:15 +0900 Subject: [PATCH 5/9] alertdialog --- web/client/src/components/ui/alert-dialog.tsx | 51 ++++++++++--------- .../components/BookmarkCardWrapper.tsx | 8 ++- .../components/BookmarkListTemplate.tsx | 2 +- .../{ => Dialog}/CreateBookmarkDialog.tsx | 6 +-- .../DeleteBookmarkAlertDialog.tsx | 34 +++++++++---- .../bookmarks/components/Dialog/index.tsx | 2 + 6 files changed, 63 insertions(+), 40 deletions(-) rename web/client/src/features/bookmarks/components/{ => Dialog}/CreateBookmarkDialog.tsx (97%) rename web/client/src/features/bookmarks/components/{ => Dialog}/DeleteBookmarkAlertDialog.tsx (57%) create mode 100644 web/client/src/features/bookmarks/components/Dialog/index.tsx diff --git a/web/client/src/components/ui/alert-dialog.tsx b/web/client/src/components/ui/alert-dialog.tsx index 25e7b474..04d9f66d 100644 --- a/web/client/src/components/ui/alert-dialog.tsx +++ b/web/client/src/components/ui/alert-dialog.tsx @@ -1,16 +1,17 @@ -"use client" +"use client"; -import * as React from "react" -import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" +import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"; +import * as React from "react"; -import { cn } from "@/lib/utils" -import { buttonVariants } from "@/components/ui/button" +import { buttonVariants } from "@/components/ui/button"; -const AlertDialog = AlertDialogPrimitive.Root +import { cn } from "@/lib/utils"; -const AlertDialogTrigger = AlertDialogPrimitive.Trigger +const AlertDialog = AlertDialogPrimitive.Root; -const AlertDialogPortal = AlertDialogPrimitive.Portal +const AlertDialogTrigger = AlertDialogPrimitive.Trigger; + +const AlertDialogPortal = AlertDialogPrimitive.Portal; const AlertDialogOverlay = React.forwardRef< React.ElementRef, @@ -24,8 +25,8 @@ const AlertDialogOverlay = React.forwardRef< {...props} ref={ref} /> -)) -AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName +)); +AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName; const AlertDialogContent = React.forwardRef< React.ElementRef, @@ -42,8 +43,8 @@ const AlertDialogContent = React.forwardRef< {...props} /> -)) -AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName +)); +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName; const AlertDialogHeader = ({ className, @@ -56,8 +57,8 @@ const AlertDialogHeader = ({ )} {...props} /> -) -AlertDialogHeader.displayName = "AlertDialogHeader" +); +AlertDialogHeader.displayName = "AlertDialogHeader"; const AlertDialogFooter = ({ className, @@ -70,8 +71,8 @@ const AlertDialogFooter = ({ )} {...props} /> -) -AlertDialogFooter.displayName = "AlertDialogFooter" +); +AlertDialogFooter.displayName = "AlertDialogFooter"; const AlertDialogTitle = React.forwardRef< React.ElementRef, @@ -82,8 +83,8 @@ const AlertDialogTitle = React.forwardRef< className={cn("text-lg font-semibold", className)} {...props} /> -)) -AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName +)); +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName; const AlertDialogDescription = React.forwardRef< React.ElementRef, @@ -94,9 +95,9 @@ const AlertDialogDescription = React.forwardRef< className={cn("text-sm text-muted-foreground", className)} {...props} /> -)) +)); AlertDialogDescription.displayName = - AlertDialogPrimitive.Description.displayName + AlertDialogPrimitive.Description.displayName; const AlertDialogAction = React.forwardRef< React.ElementRef, @@ -107,8 +108,8 @@ const AlertDialogAction = React.forwardRef< className={cn(buttonVariants(), className)} {...props} /> -)) -AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName +)); +AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName; const AlertDialogCancel = React.forwardRef< React.ElementRef, @@ -123,8 +124,8 @@ const AlertDialogCancel = React.forwardRef< )} {...props} /> -)) -AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName +)); +AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName; export { AlertDialog, @@ -138,4 +139,4 @@ export { AlertDialogDescription, AlertDialogAction, AlertDialogCancel, -} +}; diff --git a/web/client/src/features/bookmarks/components/BookmarkCardWrapper.tsx b/web/client/src/features/bookmarks/components/BookmarkCardWrapper.tsx index c5c47828..3429a4c2 100644 --- a/web/client/src/features/bookmarks/components/BookmarkCardWrapper.tsx +++ b/web/client/src/features/bookmarks/components/BookmarkCardWrapper.tsx @@ -6,6 +6,7 @@ import { BookmarkType } from "@/types/bookmark"; import { BookmarkCard } from "./BookmarkCard"; import { BookmarkDetailSheet } from "./BookmarkDetailSheet"; +import { DeleteBookmarkAlertDialog } from "./Dialog"; type BookmarkCardWrapperProps = { bookmark: BookmarkType; @@ -19,7 +20,12 @@ export const BookmarkCardWrapper: FC = ({ -
+
+ +
); }; diff --git a/web/client/src/features/bookmarks/components/BookmarkListTemplate.tsx b/web/client/src/features/bookmarks/components/BookmarkListTemplate.tsx index fb9ae122..7c9f9a03 100644 --- a/web/client/src/features/bookmarks/components/BookmarkListTemplate.tsx +++ b/web/client/src/features/bookmarks/components/BookmarkListTemplate.tsx @@ -6,7 +6,7 @@ import { LanguageStatus } from "@/types/language"; import { BookmarkLanguageTabMenu } from "./BookmarkLanguageTabMenu"; import { BookmarkList } from "./BookmarkList"; -import { CreateBookmarkDialog } from "./CreateBookmarkDialog"; +import { CreateBookmarkDialog } from "./Dialog"; import { fetchBookmarkListAPI } from "../actions/bookmark"; type ArticleListProps = { diff --git a/web/client/src/features/bookmarks/components/CreateBookmarkDialog.tsx b/web/client/src/features/bookmarks/components/Dialog/CreateBookmarkDialog.tsx similarity index 97% rename from web/client/src/features/bookmarks/components/CreateBookmarkDialog.tsx rename to web/client/src/features/bookmarks/components/Dialog/CreateBookmarkDialog.tsx index 6f25117a..244dc61c 100644 --- a/web/client/src/features/bookmarks/components/CreateBookmarkDialog.tsx +++ b/web/client/src/features/bookmarks/components/Dialog/CreateBookmarkDialog.tsx @@ -45,9 +45,9 @@ import { checkJapaneseArticle } from "@/lib/check"; import { LanguageStatus } from "@/types/language"; import { OgpType } from "@/types/ogp"; -import { fetchBookmarkCountByArticleUrlAPI } from "../actions/bookmark"; -import { serverRevalidateBookmark } from "../actions/serverAction"; -import { createBookmark } from "../repository/bookmark"; +import { fetchBookmarkCountByArticleUrlAPI } from "../../actions/bookmark"; +import { serverRevalidateBookmark } from "../../actions/serverAction"; +import { createBookmark } from "../../repository/bookmark"; type CreateBookmarkDialogProps = { user: User | undefined; diff --git a/web/client/src/features/bookmarks/components/DeleteBookmarkAlertDialog.tsx b/web/client/src/features/bookmarks/components/Dialog/DeleteBookmarkAlertDialog.tsx similarity index 57% rename from web/client/src/features/bookmarks/components/DeleteBookmarkAlertDialog.tsx rename to web/client/src/features/bookmarks/components/Dialog/DeleteBookmarkAlertDialog.tsx index ad8201d6..1342d191 100644 --- a/web/client/src/features/bookmarks/components/DeleteBookmarkAlertDialog.tsx +++ b/web/client/src/features/bookmarks/components/Dialog/DeleteBookmarkAlertDialog.tsx @@ -1,4 +1,4 @@ -import { DeleteBookmarkTooltip } from "@/features/articles/components/Tooltip"; +import { FcBookmark } from "react-icons/fc"; import { AlertDialog, @@ -11,8 +11,14 @@ import { AlertDialogTitle, AlertDialogTrigger, } from "@/components/ui/alert-dialog"; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from "@/components/ui/tooltip"; -import { useBookmark } from "../hooks/useBookmark"; +import { useBookmark } from "../../hooks/useBookmark"; type DeleteBookmarkAlertDialogProps = { bookmarkTitle: string; @@ -26,12 +32,18 @@ export function DeleteBookmarkAlertDialog({ const { handleRemoveBookmark } = useBookmark(); return ( - - - + + + + + + + + +

Delete bookmark

+ + + @@ -45,8 +57,10 @@ export function DeleteBookmarkAlertDialog({ - Cancel - Delete + CANCEL + handleRemoveBookmark(bookmarkId)}> + DELETE + diff --git a/web/client/src/features/bookmarks/components/Dialog/index.tsx b/web/client/src/features/bookmarks/components/Dialog/index.tsx new file mode 100644 index 00000000..54e7669f --- /dev/null +++ b/web/client/src/features/bookmarks/components/Dialog/index.tsx @@ -0,0 +1,2 @@ +export * from "./CreateBookmarkDialog"; +export * from "./DeleteBookmarkAlertDialog"; From 668131b2cfae1605a1ee02f60a5fb9acc4831b65 Mon Sep 17 00:00:00 2001 From: yukionishi1129 Date: Thu, 18 Apr 2024 22:56:51 +0900 Subject: [PATCH 6/9] reload --- .../bookmarks/components/Dialog/CreateBookmarkDialog.tsx | 1 - web/client/src/features/bookmarks/hooks/useBookmark.ts | 2 ++ 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/web/client/src/features/bookmarks/components/Dialog/CreateBookmarkDialog.tsx b/web/client/src/features/bookmarks/components/Dialog/CreateBookmarkDialog.tsx index 244dc61c..5ca8ccf0 100644 --- a/web/client/src/features/bookmarks/components/Dialog/CreateBookmarkDialog.tsx +++ b/web/client/src/features/bookmarks/components/Dialog/CreateBookmarkDialog.tsx @@ -99,7 +99,6 @@ export const CreateBookmarkDialog: FC = ({ ); const handleAddSubmit = useCallback(async () => { - console.log("🔥🔥🔥🔥🔥🔥"); startOgpPending(async () => { if (!user) { failToast({ diff --git a/web/client/src/features/bookmarks/hooks/useBookmark.ts b/web/client/src/features/bookmarks/hooks/useBookmark.ts index 9245d114..b5e5ad32 100644 --- a/web/client/src/features/bookmarks/hooks/useBookmark.ts +++ b/web/client/src/features/bookmarks/hooks/useBookmark.ts @@ -5,6 +5,7 @@ import { getUser } from "@/features/users/actions/user"; import { useStatusToast } from "@/hooks/useStatusToast"; import { fetchBookmarkByIdCountAPI } from "../actions/bookmark"; +import { serverRevalidateBookmark } from "../actions/serverAction"; import { deleteBookmark } from "../repository/bookmark"; export const useBookmark = () => { @@ -56,6 +57,7 @@ export const useBookmark = () => { successToast({ description: "Remove bookmark", }); + await serverRevalidateBookmark(); }, [successToast, failToast] ); From 8c5833e673fded53cd4d4b0557927132c51514ec Mon Sep 17 00:00:00 2001 From: yukionishi1129 Date: Thu, 18 Apr 2024 23:03:17 +0900 Subject: [PATCH 7/9] switch --- .../components/BookmarkListTemplate.tsx | 4 +- .../Switch/BookmarkLanguageSwitch.tsx | 52 +++++++++++++++++++ .../bookmarks/components/Switch/index.tsx | 1 + 3 files changed, 55 insertions(+), 2 deletions(-) create mode 100644 web/client/src/features/bookmarks/components/Switch/BookmarkLanguageSwitch.tsx create mode 100644 web/client/src/features/bookmarks/components/Switch/index.tsx diff --git a/web/client/src/features/bookmarks/components/BookmarkListTemplate.tsx b/web/client/src/features/bookmarks/components/BookmarkListTemplate.tsx index 7c9f9a03..1ca3ed60 100644 --- a/web/client/src/features/bookmarks/components/BookmarkListTemplate.tsx +++ b/web/client/src/features/bookmarks/components/BookmarkListTemplate.tsx @@ -4,9 +4,9 @@ import { getUser } from "@/features/users/actions/user"; import { LanguageStatus } from "@/types/language"; -import { BookmarkLanguageTabMenu } from "./BookmarkLanguageTabMenu"; import { BookmarkList } from "./BookmarkList"; import { CreateBookmarkDialog } from "./Dialog"; +import { BookmarkLanguageSwitch } from "./Switch"; import { fetchBookmarkListAPI } from "../actions/bookmark"; type ArticleListProps = { @@ -31,7 +31,7 @@ export const BookmarkListTemplate: FC = async ({

Read Later

- diff --git a/web/client/src/features/bookmarks/components/Switch/BookmarkLanguageSwitch.tsx b/web/client/src/features/bookmarks/components/Switch/BookmarkLanguageSwitch.tsx new file mode 100644 index 00000000..d10e5caa --- /dev/null +++ b/web/client/src/features/bookmarks/components/Switch/BookmarkLanguageSwitch.tsx @@ -0,0 +1,52 @@ +"use client"; + +import { Loader } from "lucide-react"; +import { useRouter } from "next/navigation"; +import { FC, useCallback, useState } from "react"; + +import { Label } from "@/components/ui/label"; +import { Switch } from "@/components/ui/switch"; + +import { LanguageStatus } from "@/types/language"; + +type BookmarkLanguageSwitchProps = { + languageStatus: LanguageStatus; + keyword?: string; +}; + +export const BookmarkLanguageSwitch: FC = ({ + languageStatus, + keyword, +}: BookmarkLanguageSwitchProps) => { + const switchLabel = languageStatus === 1 ? "Japanese" : "English"; + const [isEng, setIsEng] = useState(switchLabel === "English"); + const [isLoading, setIsLoading] = useState(false); + const router = useRouter(); + + const onChange = useCallback( + (checked: boolean) => { + setIsLoading(true); + const language = checked ? 2 : 1; + setIsEng(checked); + let path = `/bookmark/?languageStatus=${language}?`; + if (keyword) { + path += `&keyword=${keyword}`; + } + setIsLoading(false); + router.replace(path); + }, + [keyword, router] + ); + + return ( +
+ {isLoading ? ( + + ) : ( + + )} + + +
+ ); +}; diff --git a/web/client/src/features/bookmarks/components/Switch/index.tsx b/web/client/src/features/bookmarks/components/Switch/index.tsx new file mode 100644 index 00000000..d709829c --- /dev/null +++ b/web/client/src/features/bookmarks/components/Switch/index.tsx @@ -0,0 +1 @@ +export * from "./BookmarkLanguageSwitch"; From 181164cdb52ab98384295ff573c027e79802c146 Mon Sep 17 00:00:00 2001 From: yukionishi1129 Date: Thu, 18 Apr 2024 23:14:51 +0900 Subject: [PATCH 8/9] switch --- .../components/ui/switch/LanguageSwitch.tsx | 37 +++++++++++++++++++ web/client/src/components/ui/switch/index.tsx | 2 + .../src/components/ui/{ => switch}/switch.tsx | 0 .../components/ArticleListTemplate.tsx | 2 +- .../{ => Switch}/ArticleLanguageSwitch.tsx | 19 ++++------ .../articles/components/Switch/index.tsx | 1 + .../Switch/BookmarkLanguageSwitch.tsx | 19 ++++------ 7 files changed, 55 insertions(+), 25 deletions(-) create mode 100644 web/client/src/components/ui/switch/LanguageSwitch.tsx create mode 100644 web/client/src/components/ui/switch/index.tsx rename web/client/src/components/ui/{ => switch}/switch.tsx (100%) rename web/client/src/features/articles/components/{ => Switch}/ArticleLanguageSwitch.tsx (72%) create mode 100644 web/client/src/features/articles/components/Switch/index.tsx diff --git a/web/client/src/components/ui/switch/LanguageSwitch.tsx b/web/client/src/components/ui/switch/LanguageSwitch.tsx new file mode 100644 index 00000000..671b7b2b --- /dev/null +++ b/web/client/src/components/ui/switch/LanguageSwitch.tsx @@ -0,0 +1,37 @@ +"use client"; + +import { Loader } from "lucide-react"; +import { FC } from "react"; + +import { Label } from "@/components/ui/label"; +import { Switch } from "@/components/ui/switch"; + +type LanguageSwitchProps = { + isEng: boolean; + isLoading: boolean; + label: string; + onCheckedChange: (checked: boolean) => void; +}; + +export const LanguageSwitch: FC = ({ + isEng, + isLoading, + label, + onCheckedChange, +}: LanguageSwitchProps) => { + return ( +
+ {isLoading ? ( + + ) : ( + + )} + + +
+ ); +}; diff --git a/web/client/src/components/ui/switch/index.tsx b/web/client/src/components/ui/switch/index.tsx new file mode 100644 index 00000000..fe347eb9 --- /dev/null +++ b/web/client/src/components/ui/switch/index.tsx @@ -0,0 +1,2 @@ +export * from "./switch"; +export * from "./LanguageSwitch"; diff --git a/web/client/src/components/ui/switch.tsx b/web/client/src/components/ui/switch/switch.tsx similarity index 100% rename from web/client/src/components/ui/switch.tsx rename to web/client/src/components/ui/switch/switch.tsx diff --git a/web/client/src/features/articles/components/ArticleListTemplate.tsx b/web/client/src/features/articles/components/ArticleListTemplate.tsx index 3ca67d3a..d5be2a72 100644 --- a/web/client/src/features/articles/components/ArticleListTemplate.tsx +++ b/web/client/src/features/articles/components/ArticleListTemplate.tsx @@ -10,8 +10,8 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { ArticleTabType } from "@/types/article"; import { LanguageStatus } from "@/types/language"; -import { ArticleLanguageSwitch } from "./ArticleLanguageSwitch"; import { ArticleList } from "./ArticleList"; +import { ArticleLanguageSwitch } from "./Switch"; import { fetchArticlesAPI } from "../actions/article"; type ArticleListTemplateProps = { diff --git a/web/client/src/features/articles/components/ArticleLanguageSwitch.tsx b/web/client/src/features/articles/components/Switch/ArticleLanguageSwitch.tsx similarity index 72% rename from web/client/src/features/articles/components/ArticleLanguageSwitch.tsx rename to web/client/src/features/articles/components/Switch/ArticleLanguageSwitch.tsx index 1329621d..6c02ae2f 100644 --- a/web/client/src/features/articles/components/ArticleLanguageSwitch.tsx +++ b/web/client/src/features/articles/components/Switch/ArticleLanguageSwitch.tsx @@ -1,11 +1,9 @@ "use client"; -import { Loader } from "lucide-react"; import { useRouter } from "next/navigation"; import { FC, useCallback, useState } from "react"; -import { Label } from "@/components/ui/label"; -import { Switch } from "@/components/ui/switch"; +import { LanguageSwitch } from "@/components/ui/switch"; import { ArticleTabType } from "@/types/article"; import { LanguageStatus } from "@/types/language"; @@ -42,14 +40,11 @@ export const ArticleLanguageSwitch: FC = ({ ); return ( -
- {isLoading ? ( - - ) : ( - - )} - - -
+ ); }; diff --git a/web/client/src/features/articles/components/Switch/index.tsx b/web/client/src/features/articles/components/Switch/index.tsx new file mode 100644 index 00000000..556c77b7 --- /dev/null +++ b/web/client/src/features/articles/components/Switch/index.tsx @@ -0,0 +1 @@ +export * from "./ArticleLanguageSwitch"; diff --git a/web/client/src/features/bookmarks/components/Switch/BookmarkLanguageSwitch.tsx b/web/client/src/features/bookmarks/components/Switch/BookmarkLanguageSwitch.tsx index d10e5caa..fed4b53b 100644 --- a/web/client/src/features/bookmarks/components/Switch/BookmarkLanguageSwitch.tsx +++ b/web/client/src/features/bookmarks/components/Switch/BookmarkLanguageSwitch.tsx @@ -1,11 +1,9 @@ "use client"; -import { Loader } from "lucide-react"; import { useRouter } from "next/navigation"; import { FC, useCallback, useState } from "react"; -import { Label } from "@/components/ui/label"; -import { Switch } from "@/components/ui/switch"; +import { LanguageSwitch } from "@/components/ui/switch"; import { LanguageStatus } from "@/types/language"; @@ -39,14 +37,11 @@ export const BookmarkLanguageSwitch: FC = ({ ); return ( -
- {isLoading ? ( - - ) : ( - - )} - - -
+ ); }; From 9ec7b8d6796957bf484face2113b4dab90967fd5 Mon Sep 17 00:00:00 2001 From: yukionishi1129 Date: Thu, 18 Apr 2024 23:27:27 +0900 Subject: [PATCH 9/9] language --- .../articles/components/ArticleList.tsx | 4 +++ .../components/ArticleListTemplate.tsx | 31 ++++++------------- 2 files changed, 13 insertions(+), 22 deletions(-) diff --git a/web/client/src/features/articles/components/ArticleList.tsx b/web/client/src/features/articles/components/ArticleList.tsx index 7417a0c2..b6cbc822 100644 --- a/web/client/src/features/articles/components/ArticleList.tsx +++ b/web/client/src/features/articles/components/ArticleList.tsx @@ -91,6 +91,10 @@ export function ArticleList({ }; }, [hashMore]); + useEffect(() => { + setArticles(initialArticles); + }, [initialArticles]); + useEffect(() => { if (offset > 1) { loadMore(offset); diff --git a/web/client/src/features/articles/components/ArticleListTemplate.tsx b/web/client/src/features/articles/components/ArticleListTemplate.tsx index d5be2a72..666432ad 100644 --- a/web/client/src/features/articles/components/ArticleListTemplate.tsx +++ b/web/client/src/features/articles/components/ArticleListTemplate.tsx @@ -123,28 +123,15 @@ const ArticleListContent = async ({ />
- {languageStatus === 1 && ( - - )} - {languageStatus === 2 && ( - - )} + ); };