Merge pull request #34 from a-company-jp/feature/all-change

色々修正した

Author: pirotyyy

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^2.2.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -15,9 +16,12 @@
     "copy-image-clipboard": "^2.1.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.51.3",
     "react-icons": "^5.0.1",
+    "react-redux": "^9.1.1",
     "react-scripts": "5.0.1",
+    "redux-thunk": "^3.1.0",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },

src/App.tsx

@@ -2,16 +2,20 @@ import "./App.css";
 import "./font/LINESeedJP_OTF_Rg.woff";
 import "./font/LINESeedJP_OTF_Bd.woff";
 import "./font/LINESeedJP_OTF_Th.woff";
-import CardList from "./components/CardList";
-import { UIProvider } from "@yamada-ui/react";
-import { useState } from "react";
-import useLGTMFetch from "./hooks/useLGTMFetch";
-import Sidebar from "./components/Sidebar";
+import CardList from "./components/features/CardList";
+import { Loading, UIProvider } from "@yamada-ui/react";
+import { useEffect } from "react";
+import Sidebar from "./components/features/Sidebar";
+import { useDispatch, useSelector } from "react-redux";
+import { getLgtms } from "./store/lgtmListSlice";
+import { AppDispatch, RootState } from "./store";
 
 function App() {
-  const [uploaded, setUploaded] = useState(false);
-  const [activePage] = useState(1);
-  const { LGTMUrls } = useLGTMFetch(activePage, uploaded, setUploaded);
+  const { lgtms, loading } = useSelector((state: RootState) => state.lgtms);
+  const dispatch = useDispatch<AppDispatch>();
+  useEffect(() => {
+    dispatch(getLgtms());
+  }, [dispatch]);
 
   const styles = {
     container: "grid grid-cols-7 h-screen w-screen",
@@ -22,13 +26,15 @@ function App() {
   return (
     <UIProvider>
       <div className={styles.container} style={{ fontFamily: "regular" }}>
-        <Sidebar
-          className="col-span-2"
-          uploaded={uploaded}
-          setUploaded={setUploaded}
-        />
+        <Sidebar className="col-span-2" />
         <div className={styles.content}>
-          <CardList {...LGTMUrls} />
+          {loading ? (
+            <div className="h-full flex justify-center items-center">
+              <Loading size="3xl" />
+            </div>
+          ) : (
+            <CardList lgtms={lgtms} />
+          )}
         </div>
       </div>
     </UIProvider>

src/components/.keep

@@ -1,16 +1,17 @@
 import React, { useState } from "react";
 import { FaRegCheckCircle, FaRegCopy } from "react-icons/fa";
-import { imageCopy } from "../../utils";
+import { imageCopy } from "../../../utils";
+import { Lgtm } from "../../../types/lgtm";
 
-export type CardProps = {
-  imageUrl: string;
-};
+interface Props {
+  lgtm: Lgtm;
+}
 
-const Card = ({ imageUrl }: CardProps) => {
+const Card = ({ lgtm }: Props) => {
   const [isCopying, setIsCopying] = useState(false);
 
   const handleCopyClick = async () => {
-    await imageCopy(imageUrl);
+    await imageCopy(lgtm.url);
     setIsCopying(true);
     setTimeout(() => {
       setIsCopying(false);
@@ -39,7 +40,7 @@ const Card = ({ imageUrl }: CardProps) => {
       >
         <img
           alt="LGTMの画像"
-          src={imageUrl}
+          src={lgtm.url}
           className="max-h-48 max-w-100 transition-opacity group-hover:opacity-30"
         />
         {isCopying ? (

src/components/CardList/index.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import Card from "../Card";
+import { Lgtm } from "../../../types/lgtm";
+
+interface Props {
+  lgtms: Lgtm[];
+}
+
+function CardList({ lgtms }: Props) {
+  const styles = {
+    container: "flex flex-col",
+    grid: "grid grid-cols-3 gap-4",
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={`${styles.grid} my-4`}>
+        {lgtms.map((lgtm) => (
+          <Card key={lgtm.id} lgtm={lgtm} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default CardList;