Fixed fetching data schedules page
This commit is contained in:
5702
client/pnpm-lock.yaml
generated
5702
client/pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -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
|
||||
.get(config.serverAddress + '/post').then((res) => {
|
||||
instance
|
||||
.get(config.serverAddress + '/post').then((res) => {
|
||||
setCommunityList(res.data);
|
||||
});
|
||||
};
|
||||
};
|
||||
|
||||
const searchPosts = () => {
|
||||
axios
|
||||
.get(config.serverAddress + `/post?search=${search}`).then((res) => {
|
||||
setCommunityList(res.data);
|
||||
});
|
||||
instance
|
||||
.get(config.serverAddress + `/post?search=${search}`).then((res) => {
|
||||
setCommunityList(res.data);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
getPosts();
|
||||
}, []);
|
||||
}, []);
|
||||
|
||||
const onSearchKeyDown = (e: { key: string; }) => {
|
||||
if (e.key === "Enter") {
|
||||
searchPosts();
|
||||
}
|
||||
if (e.key === "Enter") {
|
||||
searchPosts();
|
||||
}
|
||||
};
|
||||
|
||||
const onClickSearch = () => {
|
||||
@@ -62,11 +62,11 @@ export default function CommunityPage() {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
axios
|
||||
.get(config.serverAddress + '/post').then((res) => {
|
||||
console.log(res.data);
|
||||
setCommunityList(res.data);
|
||||
});
|
||||
instance
|
||||
.get(config.serverAddress + '/post').then((res) => {
|
||||
console.log(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
|
||||
.delete(config.serverAddress + `/post/${selectedPost.id}`);
|
||||
await instance
|
||||
.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
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
className="size-6">
|
||||
|
||||
<path
|
||||
stroke-linecap="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" />
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
className="size-6">
|
||||
|
||||
<path
|
||||
stroke-linecap="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" />
|
||||
</svg>
|
||||
</Button>
|
||||
</DropdownTrigger>
|
||||
@@ -218,35 +218,35 @@ export default function CommunityPage() {
|
||||
onKeyDown={onSearchKeyDown}
|
||||
/>
|
||||
<Button isIconOnly className="bg-red-color">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
className="size-6 bg-red-color text-white"
|
||||
onClick={onClickSearch}>
|
||||
|
||||
<path
|
||||
stroke-linecap="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" />
|
||||
|
||||
<path
|
||||
stroke-linecap="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" />
|
||||
</svg>
|
||||
</Button>
|
||||
<Button isIconOnly className="bg-red-color">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
className="size-6 text-white"
|
||||
onClick={onClickClear}>
|
||||
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M6 18 18 6M6 6l12 12" />
|
||||
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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(() => {
|
||||
|
||||
108
server/routes/schedule.js
Normal file
108
server/routes/schedule.js
Normal file
@@ -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;
|
||||
Reference in New Issue
Block a user