Skip to content

Commit

Permalink
Merge branch 'develop' into feature/#7-sign_up_page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sea10wood
Sea10wood authored May 21, 2023
2 parents 1316ddc + 0f97a74 commit 756278d
Show file tree
Hide file tree
Showing 11 changed files with 880 additions and 191 deletions.
71 changes: 47 additions & 24 deletions src/components/Todo/AddTodo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,34 @@ import {
TextField,
Typography,
} from "@mui/material";
import axios from "axios";
import Image from "next/image";
import { useState } from "react";
import { CustomButton } from "../common/CustomButton";
import DatePick from "../common/DatePick";

export default function AddTodo() {
export default function AddTodo({ refetch }: { refetch: () => Promise<void> }) {
const [isOpen, setIsOpen] = useState(false);
const [scheduleName, setScheduleName] = useState("");
const [deadLine, setDeadLine] = useState<Date | null>(new Date());
const sendAddTask = async () => {
const jwt = localStorage.getItem("jwt");
try {
const response = await axios.post(
`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/v1/task/add`,
{
title: scheduleName,
dead_line: deadLine,
comment: "",
},
{ headers: { Authorization: `Bearer ${jwt}` } }
);
refetch();
setIsOpen(false);
} catch (error) {
console.log(error);
}
};
return (
<div>
<CustomButton
Expand All @@ -22,7 +43,7 @@ export default function AddTodo() {
}}
primarycolor="#C5956B"
secondarycolor="#C37349"
buttonname="Open"
buttonname="TODO"
/>
<Modal
open={isOpen}
Expand All @@ -47,25 +68,27 @@ export default function AddTodo() {
>
<Stack
sx={{
// width: 400,
// margin: "10px auto",
position: "relative",
}}
spacing={3}
p={2}
>
<Image
src="/images/catclose.png"
alt="cat close.png"
width={100}
height={100}
style={{
<Button
sx={{
textAlign: "right",
position: "absolute",
right: 0,
top: 0,
}}
/>
onClick={() => setIsOpen(false)}
>
<Image
src="/images/catclose.png"
alt="cat close.png"
width={100}
height={100}
/>
</Button>

<h4>Todoを追加</h4>

Expand All @@ -81,23 +104,23 @@ export default function AddTodo() {
textAlign: "center",
m: "auto",
}}
onChange={(event) =>
setScheduleName(event.target.value)
}
/>
<Box component="div">
<Typography variant="h6">開始日時を追加</Typography>
<DatePick />
</Box>
<Box component="div">
<Typography variant="h6">終了日時を追加</Typography>
<DatePick />
<DatePick
selectedDate={deadLine}
setDate={setDeadLine}
/>
</Box>
<Button
sx={{
textAlign: "right",
right: 0,
}}
>
Send
</Button>
<CustomButton
onclick={() => sendAddTask()}
primarycolor="#C5956B"
secondarycolor="#C37349"
buttonname="send"
/>
</Stack>
</Paper>
</Modal>
Expand Down
50 changes: 26 additions & 24 deletions src/components/Todo/TodoView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,36 +6,38 @@ 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");
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();
}, []);

export default function TodoView({ tasks }: { tasks: Task[] }) {
const finishTask = async (id: string) => {
const jwt = localStorage.getItem("jwt");
try {
const response = await axios.put(
`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/v1/task/finish/${id}`,
{ headers: { Authorization: `Bearer ${jwt}` } }
);
} catch (error) {
console.log(error);
}
};
return (
<List
sx={{ width: "100%", maxWidth: 600, bgcolor: "background.paper" }}
sx={{
width: "100%",
maxWidth: 600,
bgcolor: "background.paper",
maxHeight: "200px",
overflow: "auto",
}}
>
{tasks.map(({ id, comment, dead_line, finished_at }) => {
{tasks.map(({ id, title, comment, dead_line, finished_at }) => {
return (
<ListItem key={id} disablePadding>
<ListItemButton role={undefined} dense>
<ListItemButton
onClick={() => finishTask(id)}
role={undefined}
dense
>
<ListItemIcon>
<Checkbox
edge="start"
Expand All @@ -44,7 +46,7 @@ export default function TodoView() {
disableRipple
/>
</ListItemIcon>
<ListItemText id={id} primary={comment} />
<ListItemText id={id} primary={title} />
</ListItemButton>
<CustomDate dateString={dead_line} />
</ListItem>
Expand Down
15 changes: 9 additions & 6 deletions src/components/common/DatePick.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,20 @@
import { useState } from "react";
import { Dispatch, SetStateAction } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

const DatePick = () => {
const [selectedDate, setSelectedDate] = useState<Date>();

const DatePick = ({
setDate,
selectedDate,
}: {
setDate: Dispatch<SetStateAction<Date | null>>;
selectedDate: Date | null;
}) => {
return (
<DatePicker
placeholderText="yyyy/MM/dd HH:mm"
dateFormat="yyyy/MM/dd HH:mm"
locale="ja"
selected={selectedDate}
onChange={(date) => setSelectedDate(date!)}
onChange={(date) => setDate(date)}
showTimeSelect
className="date-picker"
timeIntervals={30}
Expand Down
138 changes: 138 additions & 0 deletions src/components/schedule/AddSchedule.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
import {
Box,
Button,
Modal,
Paper,
Stack,
TextField,
Typography,
} from "@mui/material";
import axios from "axios";
import Image from "next/image";
import { useState } from "react";
import { CustomButton } from "../common/CustomButton";
import DatePick from "../common/DatePick";

export const AddSchedule = ({ refetch }: { refetch: () => Promise<void> }) => {
const [isOpen, setIsOpen] = useState(false);
const [scheduleName, setScheduleName] = useState("");
const [startTime, setStartTime] = useState<Date | null>(new Date());
const [endTime, setEndTime] = useState<Date | null>(new Date());
const sendAddSchedule = async () => {
if (scheduleName === "") {
return;
}
const jwt = localStorage.getItem("jwt");
try {
const response = await axios.post(
`${process.env.NEXT_PUBLIC_BACKEND_URL}/api/v1/schedule/add`,
{
title: scheduleName,
start: startTime,
end: endTime,
comment: "",
},
{ headers: { Authorization: `Bearer ${jwt}` } }
);
refetch();
setIsOpen(false);
} catch (error) {
console.log(error);
}
};
return (
<>
<CustomButton
onclick={() => setIsOpen(!isOpen)}
primarycolor="#C5956B"
secondarycolor="#C37349"
buttonname="SCHEDULE"
/>
<Modal
open={isOpen}
onClose={() => setIsOpen(false)}
aria-labelledby="parent-modal-title"
aria-describedby="parent-modal-description"
sx={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
}}
>
<Paper
sx={{
height: "40%",
width: "50vw",
minWidth: "300px",
margin: "auto",
minHeight: "500px",
}}
>
<Stack
sx={{
position: "relative",
}}
spacing={3}
p={2}
>
<Button
sx={{
textAlign: "right",
position: "absolute",
right: 0,
top: 0,
}}
onClick={() => setIsOpen(false)}
>
<Image
src="/images/catclose.png"
alt="cat close.png"
width={100}
height={100}
/>
</Button>

<Typography variant="h6">Scheduleを追加</Typography>

<TextField
id="outlined-multiline-flexible"
label="Schedule"
multiline
name="title"
maxRows={1}
sx={{
width: "100%",
minWidth: "200px",
maxWidth: "300px",
textAlign: "center",
m: "auto",
}}
onChange={(e) => setScheduleName(e.target.value)}
/>
<Box component="div">
<Typography variant="h6">開始日時を追加</Typography>
<DatePick
setDate={setStartTime}
selectedDate={startTime}
/>
</Box>
<Box component="div">
<Typography variant="h6">終了日時を追加</Typography>
<DatePick
setDate={setEndTime}
selectedDate={endTime}
/>
</Box>
<CustomButton
onclick={() => sendAddSchedule()}
primarycolor="#C5956B"
secondarycolor="#C37349"
buttonname="send"
/>
</Stack>
</Paper>
</Modal>
</>
);
};
Loading

0 comments on commit 756278d

Please sign in to comment.