Fixed fetching data schedules page

client/src/pages/CommunityPage.tsx

@@ -3,8 +3,8 @@ import DefaultLayout from "../layouts/default";
 import { SetStateAction, useEffect, useState } from 'react';
 import { Button, Avatar, Link, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Input } from "@nextui-org/react";
 import { Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure } from "@nextui-org/react";
-import axios from "axios";
 import config from "../config";
+import instance from "../security/http";
 
 interface Post {
   title: string;
@@ -28,29 +28,29 @@ export default function CommunityPage() {
   const onSearchChange = (e: { target: { value: SetStateAction<string>; }; }) => {
     setSearch(e.target.value);
   };
-  
+
   const getPosts = () => {
-    axios
+    instance
-    .get(config.serverAddress + '/post').then((res) => {
+      .get(config.serverAddress + '/post').then((res) => {
         setCommunityList(res.data);
       });
-    };
+  };
 
   const searchPosts = () => {
-    axios
+    instance
-    .get(config.serverAddress + `/post?search=${search}`).then((res) => {
+      .get(config.serverAddress + `/post?search=${search}`).then((res) => {
-      setCommunityList(res.data);
+        setCommunityList(res.data);
-    });
+      });
   };
 
   useEffect(() => {
     getPosts();
-    }, []);
+  }, []);
 
   const onSearchKeyDown = (e: { key: string; }) => {
-      if (e.key === "Enter") {
+    if (e.key === "Enter") {
-        searchPosts();
+      searchPosts();
-      }
+    }
   };
 
   const onClickSearch = () => {
@@ -62,11 +62,11 @@ export default function CommunityPage() {
   };
 
   useEffect(() => {
-    axios
+    instance
-    .get(config.serverAddress + '/post').then((res) => {
+      .get(config.serverAddress + '/post').then((res) => {
-      console.log(res.data);
+        console.log(res.data);
-      setCommunityList(res.data);
+        setCommunityList(res.data);
-    });
+      });
   }, []);
 
   const handleDeleteClick = (post: Post) => {
@@ -76,8 +76,8 @@ export default function CommunityPage() {
   const handleDeleteConfirm = async () => {
     if (selectedPost) {
       try {
-        await axios
+        await instance
-        .delete(config.serverAddress + `/post/${selectedPost.id}`);
+          .delete(config.serverAddress + `/post/${selectedPost.id}`);
         setCommunityList((prevList) => prevList.filter(post => post.id !== selectedPost.id));
         onOpenChange();
       } catch (error) {
@@ -116,18 +116,18 @@ export default function CommunityPage() {
                             <div>
                               <DropdownTrigger className="justify-center items-center">
                                 <Button isIconOnly className="w-full h-3/5 justify-center items-center" variant="light">
-                                  <svg 
+                                  <svg
-                                  xmlns="http://www.w3.org/2000/svg" 
+                                    xmlns="http://www.w3.org/2000/svg"
-                                  fill="none" 
+                                    fill="none"
-                                  viewBox="0 0 24 24" 
+                                    viewBox="0 0 24 24"
-                                  stroke-width="1.5" 
+                                    stroke-width="1.5"
-                                  stroke="currentColor" 
+                                    stroke="currentColor"
-                                  className="size-6">
+                                    className="size-6">
-                                    
+
-                                  <path 
+                                    <path
-                                  stroke-linecap="round" 
+                                      stroke-linecap="round"
-                                  stroke-linejoin="round" 
+                                      stroke-linejoin="round"
-                                  d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
+                                      d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
                                   </svg>
                                 </Button>
                               </DropdownTrigger>
@@ -218,35 +218,35 @@ export default function CommunityPage() {
               onKeyDown={onSearchKeyDown}
             />
             <Button isIconOnly className="bg-red-color">
-              <svg 
+              <svg
-                xmlns="http://www.w3.org/2000/svg" 
+                xmlns="http://www.w3.org/2000/svg"
-                fill="none" 
+                fill="none"
-                viewBox="0 0 24 24" 
+                viewBox="0 0 24 24"
-                stroke-width="1.5" 
+                stroke-width="1.5"
-                stroke="currentColor" 
+                stroke="currentColor"
                 className="size-6 bg-red-color text-white"
                 onClick={onClickSearch}>
-              
+
-                <path 
+                <path
-                stroke-linecap="round" 
+                  stroke-linecap="round"
-                stroke-linejoin="round" 
+                  stroke-linejoin="round"
-                d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+                  d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
               </svg>
             </Button>
             <Button isIconOnly className="bg-red-color">
-              <svg 
+              <svg
-                xmlns="http://www.w3.org/2000/svg" 
+                xmlns="http://www.w3.org/2000/svg"
-                fill="none" 
+                fill="none"
-                viewBox="0 0 24 24" 
+                viewBox="0 0 24 24"
-                stroke-width="1.5" 
+                stroke-width="1.5"
-                stroke="currentColor" 
+                stroke="currentColor"
                 className="size-6 text-white"
                 onClick={onClickClear}>
-                
+
-              <path 
+                <path
-                stroke-linecap="round" 
+                  stroke-linecap="round"
-                stroke-linejoin="round" 
+                  stroke-linejoin="round"
-                d="M6 18 18 6M6 6l12 12" />
+                  d="M6 18 18 6M6 6l12 12" />
               </svg>
             </Button>
           </div>

client/src/pages/SchedulePage.tsx

@@ -44,7 +44,7 @@ export default function SchedulePage() {
       <section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
         <h1>Karang Guni Schedule</h1>
         <div className="flex flex-col gap-8">
-          <Table>
+          <Table aria-label="Schedule Table">
             <TableHeader>
               <TableColumn>Date</TableColumn>
               <TableColumn>Time</TableColumn>
@@ -77,7 +77,7 @@ export default function SchedulePage() {
             <div>
               <div className="flex flex-row gap-20 ">
                 <div>
-                  <Card>
+                  <Card aria-label="Paper Price Card 1">
                     <CardBody>
                       <p className="text-lg">Paper</p>
                       <p className="text-xl">$0.05 to 0.20/KG</p>
@@ -90,7 +90,7 @@ export default function SchedulePage() {
                   </Card>
                 </div>
                 <div>
-                  <Card>
+                  <Card aria-label="Paper Price Card 2">
                     <CardBody>
                       <p className="text-lg">Paper</p>
                       <p className="text-xl">$0.05 to 0.20/KG</p>
@@ -103,7 +103,7 @@ export default function SchedulePage() {
                   </Card>
                 </div>
                 <div>
-                  <Card>
+                  <Card aria-label="Paper Price Card 3">
                     <CardBody>
                       <p className="text-lg">Paper</p>
                       <p className="text-xl">$0.05 to 0.20/KG</p>

server/index.js

@@ -28,6 +28,9 @@ app.use("/users", usersRoute);
 const postRoute = require('./routes/post');
 app.use("/post", postRoute);
 
+const schedulesRoute = require("./routes/schedule");
+app.use("/schedule", schedulesRoute)
+
 db.sequelize
   .sync({ alter: true })
   .then(() => {

server/routes/schedule.js

@@ -0,0 +1,108 @@
+const express = require('express');
+const router = express.Router();
+const { Schedule } = require('../models');
+const { Op } = require("sequelize");
+const yup = require("yup");
+
+router.post("/", async (req, res) => {
+    let data = req.body;
+    // Validate request body
+    let validationSchema = yup.object().shape({
+        dateTime: yup.date().required(),
+        location: yup.string().trim().min(15).max(50).required(),
+        postalCode: yup.string().matches(/^\d{6}$/, 'Postal code must be exactly 6 digits').required(),
+        status: yup.string().trim().required()
+    });
+    try {
+        data = await validationSchema.validate(data, { abortEarly: false });
+        // Process valid data
+        let result = await Schedule.create(data);
+        res.json(result);
+    } catch (err) {
+        res.status(400).json({ errors: err.errors });
+    }
+});
+
+router.get("/", async (req, res) => {
+    let condition = {};
+    let search = req.query.search;
+    if (search) {
+        condition[Op.or] = [
+            { dateTime: { [Op.like]: `%${search}%` } },
+            { location: { [Op.like]: `%${search}%` } },
+            { postalCode: { [Op.like]: `%${search}%` } },
+            { status: { [Op.like]: `%${search}%` } }
+        ];
+    }
+    let list = await Schedule.findAll({
+        where: condition,
+        order: [['createdAt', 'ASC']]
+    });
+    res.json(list);
+});
+
+router.get("/:id", async (req, res) => {
+    let id = req.params.id;
+    let schedule = await Schedule.findByPk(id);
+    if (!schedule) {
+        res.sendStatus(404);
+        return;
+    }
+    res.json(schedule);
+});
+
+router.put("/:id", async (req, res) => { //update
+    let id = req.params.id;
+    let schedule = await Schedule.findByPk(id);
+    if (!schedule) {
+        res.sendStatus(404);
+        return;
+    }
+    let data = req.body;
+    let validationSchema = yup.object().shape({
+        dateTime: yup.date().required(),
+        location: yup.string().trim().min(15).max(50).required(),
+        postalCode: yup.string().matches(/^\d{6}$/, 'Postal code must be exactly 6 digits').required(),
+        status: yup.string().trim().required()
+    });
+    try {
+        data = await validationSchema.validate(data,
+            { abortEarly: false });
+        let num = await Schedule.update(data, {
+            where: { id: id }
+        });
+        if (num == 1) {
+            res.json({
+                message: "Schedule was updated successfully."
+            });
+        }
+        else {
+            res.status(400).json({
+                message: `Cannot update schedule with id ${id}.`
+            });
+        }
+    }
+    catch (err) {
+        res.status(400).json({ errors: err.errors });
+    }
+});
+
+router.delete("/:id", async (req, res) => {
+    let id = req.params.id;
+    let num = await Schedule.destroy({
+        where: { id: id }
+    })
+    if (num == 1) {
+        res.json({
+            message: "Schedule was deleted successfully."
+        });
+    }
+    else {
+        res.status(400).json({
+            message: `Cannot delete schedule with id ${id}.`
+        });
+    }
+});
+
+
+module.exports = router;