Merge pull request #34 from Sea10wood/listtodo

date取得の実装
Sea10wood · May 20, 2023 · 0dd382e · 0dd382e
2 parents ffd57c4 + 3aaaee2
commit 0dd382e
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 11 deletions.
diff --git a/public/images/cat .glb → public/cat.glb b/public/images/cat .glb → public/cat.glb
diff --git a/src/components/Cat.tsx b/src/components/Cat.tsx
@@ -3,7 +3,7 @@ import { useFrame } from "@react-three/fiber";
 import { useRef } from "react";
 
 const Cat = () => {
-    const { scene, animations } = useGLTF("cat.glb");
+    const { scene, animations } = useGLTF("/cat.glb");
     const ref = useRef();
     const { actions } = useAnimations(animations, ref);
     console.log(scene);

diff --git a/src/components/DatePick.tsx b/src/components/DatePick.tsx
@@ -2,7 +2,7 @@ import { useState } from "react";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 
-const DatePickerComponent = () => {
+const DatePick = () => {
     const [selectedDate, setSelectedDate] = useState<Date>();
 
     return (
@@ -18,4 +18,4 @@ const DatePickerComponent = () => {
         />
     );
 };
-export default DatePickerComponent;
+export default DatePick;
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -8,15 +8,15 @@ export const Header = () => {
             sx={{
                 backgroundColor: "#fffff0",
                 width: "100%",
-                height: "13vh",
+                height: "6vh",
                 margin: "0 0",
             }}
         >
             <Image
                 src="/images/nyan.gif"
                 alt="nyan.gif"
-                height={100}
-                width={100}
+                height={45}
+                width={45}
             />
         </Box>
     );

diff --git a/src/components/Request.tsx b/src/components/Request.tsx
@@ -55,12 +55,13 @@ export default function Request() {
                         <Image
                             src="/images/catclose.png"
                             alt="cat close.png"
+                            width={100}
+                            height={100}
                             style={{
                                 textAlign: "right",
                                 position: "absolute",
                                 right: 0,
-                                width: "15%",
-                                height: "20%",
+                                top: 0,
                             }}
                         />
 

diff --git a/src/components/TodoView.tsx b/src/components/TodoView.tsx
@@ -0,0 +1,56 @@
+import { Task } from "@/types/schema";
+import Checkbox from "@mui/material/Checkbox";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import axios from "axios";
+import { useEffect, useState } from "react";
+import { CustomDate } from "./common/CustomDate";
+
+export default function TodoView() {
+    const [tasks, setTasks] = useState<Task[]>([]);
+
+    useEffect(() => {
+        const getTasks = async () => {
+            try {
+                const token = localStorage.getItem("jwt");
+                console.log(token);
+                const response = await axios.get(
+                    `${process.env.NEXT_PUBLIC_BACKEND_URL}/api/v1/task/my`,
+                    { headers: { Authorization: `Bearer ${token}` } }
+                );
+                setTasks(response.data.tasks);
+            } catch (error) {
+                console.log(error);
+            }
+        };
+        getTasks();
+    }, []);
+
+    return (
+        <List
+            sx={{ width: "100%", maxWidth: 600, bgcolor: "background.paper" }}
+        >
+            {tasks.map(({ id, comment, dead_line, finished_at }) => {
+                return (
+                    <ListItem key={id} disablePadding>
+                        <ListItemButton role={undefined} dense>
+                            <ListItemIcon>
+                                <Checkbox
+                                    edge="start"
+                                    defaultChecked={finished_at != undefined}
+                                    tabIndex={-1}
+                                    disableRipple
+                                />
+                            </ListItemIcon>
+                            <ListItemText id={id} primary={comment} />
+                        </ListItemButton>
+                        <CustomDate dateString={dead_line} />
+                    </ListItem>
+                );
+            })}
+        </List>
+    );
+}
diff --git a/src/pages/todo.tsx b/src/pages/todo.tsx
@@ -1,11 +1,20 @@
-import { TodoAdd } from "@/components/Todoadd";
+import Cat from "@/components/Cat";
 import { ScheduleCalendar } from "@/components/schedule/ScheduleCalender";
+import { TodoAdd } from "@/components/Todoadd";
+import TodoView from "@/components/TodoView";
 import { Box, Stack } from "@mui/material";
-// import DataPicker from "../components/DataPicker";
+import { OrbitControls } from "@react-three/drei";
+import { Canvas } from "@react-three/fiber";
 export default function Todo() {
     return (
         <Stack direction="row">
-            <Box component="div" sx={{ height: "100vh", width: "60%" }}></Box>
+            <Box component="div" sx={{ height: "100vh", width: "60%" }}>
+                <Canvas>
+                    <OrbitControls />
+                    <Cat />
+                    <directionalLight />
+                </Canvas>
+            </Box>
             <Box
                 component="div"
                 sx={{ height: "100vh", width: "40%" }}
@@ -16,6 +25,7 @@ export default function Todo() {
                 {/* <Image src={nyan} alt="nyan.gif" height={150} width={150} /> */}
                 <ScheduleCalendar />
                 <TodoAdd />
+                <TodoView />
             </Box>
         </Stack>
     );