From 289c954543495067058a65d88baea00755acfd1a Mon Sep 17 00:00:00 2001 From: muhammadazishusein Date: Sat, 27 Nov 2021 23:31:22 +0700 Subject: [PATCH] minus update still bug --- src/components/schedule/ScheduleList.jsx | 283 +++++++++++++++++++++++ src/components/utility/Navbar.jsx | 12 + src/config/keys.js | 11 +- src/helpers/hooks/input-hook.js | 1 + src/routes/App.jsx | 2 + src/styles/schedule/ScheduleList.css | 94 ++++++++ src/styles/thread/ListThreads.css | 114 ++++----- 7 files changed, 454 insertions(+), 63 deletions(-) create mode 100644 src/components/schedule/ScheduleList.jsx create mode 100644 src/styles/schedule/ScheduleList.css diff --git a/src/components/schedule/ScheduleList.jsx b/src/components/schedule/ScheduleList.jsx new file mode 100644 index 0000000..addab62 --- /dev/null +++ b/src/components/schedule/ScheduleList.jsx @@ -0,0 +1,283 @@ +import '../../styles/schedule/ScheduleList.css'; +import axios from 'axios'; +import AuthService, { + authHeader, + loggedIn, +} from '../../helpers/services/auth.service'; +import React, { useState, useEffect } from 'react'; +import { useInput } from '../../helpers/hooks/input-hook'; +import { translate } from '../../helpers/time-util'; +import { API_URL } from '../../config/keys'; +import Button from '../utility/Button'; +import { Link } from 'react-router-dom'; + +export default function ScheduleList(props) { + const { content } = props; + const [schedules, setSchedules] = useState([]); + const [create, setCreate] = useState(false); + const [edit, setEdit] = useState(false); + const [id, setId] = useState(0); + const [message, setMessage] = useState(''); + + const { value: title, bind: bindTitle, reset: resetTitle, change: setTitle } = useInput(''); + const { value: desc, bind: bindDesc, reset: resetDesc, change: setDesc } = useInput(''); + const { value: time, bind: bindTime, reset: resetTime, change: setTime } = useInput(''); + console.log(authHeader().Authorization); + useEffect(() => { + const fetch = async () => { + try { + const scheds = await axios.get(`${API_URL}/schedules`, { + headers: authHeader(), + }); + setSchedules(scheds?.data?.data); + } catch (error) { + console.log(error); + } + }; + fetch(); + }, []); + + const deleteSchedule = async (id) => { + try { + await axios.delete(`${API_URL}/schedules/${id}`, { + headers: authHeader(), + }); + window.location.reload(); + } catch (error) { console.log(error); } + }; + + const handleSubmit = async (event) => { + event.preventDefault(); + try { + await axios.post( + `${API_URL}/schedules`, + { + schedule: { + title: title, + description: desc, + time: time, + user_id: AuthService.getCurrentUserId(), + }, + }, + { + headers: authHeader(), + } + ); + window.location.reload(); + } catch (error) { + setMessage("Failed to create"); + } + }; + + const handleSubmitEdit = async (event) => { + event.preventDefault(); + try { + await axios.put( + `${API_URL}/schedules/${id}`, + { + schedule: { + title: title, + description: desc, + time: time, + user_id: AuthService.getCurrentUserId(), + }, + }, + { + headers: authHeader(), + } + ); + window.location.reload(); + } catch (error) { + setMessage("Failed to edit"); + } + }; + + function handleCreate () { + setCreate(!create); + console.log(create); + } + + function editSchedule (schedule) { + setId(schedule.id); + setTitle(schedule.title); + setDesc(schedule.description); + setTime(Date.parse(schedule.time)); + console.log(time); + + setEdit(true); + } + + function cancelEdit () { + resetTitle(); + resetDesc(); + resetTime(); + + setEdit(false); + } + + let modal; + + if (create) { + modal = ( +
+
+
+ +
+
Create New Schedule
+ +
+
+ + + + + + + + + +
+ +
+
+
+
+
+ ) + } + + if (edit) { + modal = ( +
+
+
+ +
+
Edit Schedule #{id}
+ +
+
+ + + + + + + + + +
+ +
+
+
+
+
+ ) + } + + return ( +
+
+ +
+ +
+ {schedules.map((schedule) => { + return ( +
+

{schedule.title}

+ {translate(schedule.time)} +

{schedule.description}

+ +
+ + +
+
+ ); + })} +
+ + {modal} +
+ ); +} \ No newline at end of file diff --git a/src/components/utility/Navbar.jsx b/src/components/utility/Navbar.jsx index a6f8038..3a0c61a 100644 --- a/src/components/utility/Navbar.jsx +++ b/src/components/utility/Navbar.jsx @@ -89,6 +89,18 @@ const Navbar = (props) => { )} + {loggedIn && ( +
  • + + My Schedule + +
    • + )} {loggedIn ? (
  • { setValue(event.target.value); }, }, + change: (arg) => setValue(arg), }; }; diff --git a/src/routes/App.jsx b/src/routes/App.jsx index 6f72f0c..3593d13 100644 --- a/src/routes/App.jsx +++ b/src/routes/App.jsx @@ -13,6 +13,7 @@ import EditThread from '../components/thread/EditThread'; import Footer from '../components/utility/Footer'; import UpdateProfileForm from '../components/profile/UpdateProfileForm.jsx'; import EditComment from '../components/thread/EditComment'; +import ScheduleList from '../components/schedule/ScheduleList'; import { BrowserRouter as Router, Route, @@ -63,6 +64,7 @@ function App() { +