Merge pull request #35 from crow-fox/fix/ColorGridItem

Fix/color grid item
crow-fox · May 6, 2024 · 0b92fbb · 0b92fbb
2 parents 1e99c33 + b6cb021
commit 0b92fbb
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 52 deletions.
diff --git a/app/_features/color/ColorController.tsx b/app/_features/color/ColorController.tsx
@@ -18,7 +18,7 @@ export function ColorController({ tailwindColors }: Props) {
       ) : (
         <p>
           <button
-            onClick={resetCurrentColor}
+            onClick={() => resetCurrentColor()}
             className=" rounded-lg bg-gray-900 px-4 py-2  text-white dark:bg-gray-200 dark:text-gray-950 "
           >
             選択を解除

diff --git a/app/_features/color/ColorGridItem.tsx b/app/_features/color/ColorGridItem.tsx
@@ -12,7 +12,6 @@ import {
 } from "@/app/_features/color/tailwind";
 import { useTailwindColorQuery } from "@/app/_features/color/useTailwindColorQuery";
 import { useClipboardCopy } from "@/app/_utils/useClipboardCopy";
-import Link from "next/link";
 import { useCallback } from "react";
 
 type Props = {
@@ -30,7 +29,7 @@ type Props = {
 };
 
 export function ColorGridItem({ color, tailwindColors }: Props) {
-  const { createColorHref, currentColor } =
+  const { currentColor, selectColor, resetCurrentColor } =
     useTailwindColorQuery(tailwindColors);
 
   const contrastResult =
@@ -50,6 +49,10 @@ export function ColorGridItem({ color, tailwindColors }: Props) {
     await clipboardCopy(color.value);
   }, [color.value, clipboardCopy]);
 
+  const handleClickColor = useCallback(() => {
+    isCurrent ? resetCurrentColor({ scroll: false }) : selectColor(color);
+  }, [color, isCurrent, resetCurrentColor, selectColor]);
+
   return (
     <div
       className={[
@@ -73,13 +76,12 @@ export function ColorGridItem({ color, tailwindColors }: Props) {
         {currentColor.type !== "notFound" && "テキスト"}
       </div>
       <div className="grid grid-cols-[auto_1fr] items-center gap-x-1 text-sm/none">
-        <Link
-          scroll={false}
-          href={createColorHref(color)}
+        <button
+          onClick={handleClickColor}
           className="text-sm/none after:absolute after:inset-0 after:block  after:hover:shadow-[inset_0_0_0_2px_theme(colors.gray[900])] focus-visible:outline-none after:focus-visible:shadow-[inset_0_0_0_2px_theme(colors.gray[900])] after:dark:hover:shadow-[inset_0_0_0_2px_theme(colors.gray[200])]  after:dark:focus-visible:shadow-[inset_0_0_0_2px_theme(colors.gray[200])]"
         >
           {color.value}
-        </Link>
+        </button>
         <button
           onClick={handleCopy}
           className=" isolate inline-grid size-6 place-content-center rounded-lg border border-gray-900 bg-white text-sm/none  dark:border-gray-200 dark:bg-gray-950"

diff --git a/app/_features/color/useTailwindColorQuery.ts b/app/_features/color/useTailwindColorQuery.ts
@@ -9,8 +9,9 @@ import { useURLQueryParams } from "@/app/_utils/useURLQueryParams";
 import { useCallback, useMemo } from "react";
 
 export function useTailwindColorQuery(tailwindColors: TailwindColors) {
-  const { getQueryValue, deleteQueries, updateQueries, createHrefWithQueries } =
-    useURLQueryParams<"colorname" | "colorgrade">();
+  const { getQueryValue, deleteQueries, updateQueries } = useURLQueryParams<
+    "colorname" | "colorgrade"
+  >();
 
   const colorName = getQueryValue("colorname") ?? "";
   const colorGrade = getQueryValue("colorgrade") ?? "";
@@ -25,31 +26,11 @@ export function useTailwindColorQuery(tailwindColors: TailwindColors) {
     );
   }, [colorName, colorGrade, tailwindColors]);
 
-  const resetCurrentColor = useCallback(() => {
-    deleteQueries(["colorname", "colorgrade"]);
-  }, [deleteQueries]);
-
-  const createColorHref = useCallback(
-    (
-      color:
-        | {
-            name: TailwindGradedColorName;
-            grade: TailwindColorGrade;
-          }
-        | { name: TailwindSingleColorName },
-    ) => {
-      if ("grade" in color) {
-        return createHrefWithQueries({
-          colorname: color.name,
-          colorgrade: color.grade,
-        });
-      }
-      return createHrefWithQueries({
-        colorname: color.name,
-        colorgrade: undefined,
-      });
+  const resetCurrentColor = useCallback(
+    (options: { scroll: boolean } = { scroll: true }) => {
+      deleteQueries(["colorname", "colorgrade"], options);
     },
-    [createHrefWithQueries],
+    [deleteQueries],
   );
 
   const selectColor = useCallback(
@@ -61,16 +42,15 @@ export function useTailwindColorQuery(tailwindColors: TailwindColors) {
           }
         | { name: TailwindSingleColorName },
     ) => {
-      if ("grade" in color) {
-        return updateQueries({
+      return updateQueries(
+        {
           colorname: color.name,
-          colorgrade: color.grade,
-        });
-      }
-      return updateQueries({
-        colorname: color.name,
-        colorgrade: undefined,
-      });
+          colorgrade: "grade" in color ? color.grade : undefined,
+        },
+        {
+          scroll: false,
+        },
+      );
     },
     [updateQueries],
   );
@@ -79,6 +59,5 @@ export function useTailwindColorQuery(tailwindColors: TailwindColors) {
     selectColor,
     currentColor,
     resetCurrentColor,
-    createColorHref,
   } as const;
 }
diff --git a/app/_utils/useURLQueryParams.ts b/app/_utils/useURLQueryParams.ts
@@ -44,14 +44,6 @@ export function useURLQueryParams<T extends string>() {
     [pathname, router, searchParams],
   );
 
-  const createHrefWithQueries = useCallback(
-    (queries: Queries<T>) => {
-      const queryString = createQueryString(searchParams, queries);
-      return `${pathname}?${queryString}`;
-    },
-    [pathname, searchParams],
-  );
-
   const deleteQueries = useCallback(
     (queryKeys: T[], options: { scroll: boolean } = { scroll: true }) => {
       // 対象のクエリパラメーターのみ削除
@@ -69,7 +61,6 @@ export function useURLQueryParams<T extends string>() {
   return {
     getQueryValue,
     updateQueries,
-    createHrefWithQueries,
     deleteQueries,
   } as const;
 }