Skip to content

Instantly share code, notes, and snippets.

@naiplawan

naiplawan/AdminDetailServicePage.jsx

Last active September 19, 2023 02:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save naiplawan/27902175cd73228373b633b28a1866ee to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save naiplawan/27902175cd73228373b633b28a1866ee to your computer and use it in GitHub Desktop.
Download ZIP
Home Service - DetailPage
Raw
AdminDetailServicePage.jsx
import axios from "axios";
import { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";
import dateFormat from "../../utils/dateFormat.js";
import arrow from "../../assets/AdminPhoto/arrow.png";
function AdminDetailServicePage() {
const [service, setService] = useState({});
const navigate = useNavigate();
const params = useParams();
const getService = async (serviceId) => {
try {
const response = await axios.get(
`http://localhost:4000/service/${serviceId}`
);
const serviceData = response.data.data;
if (serviceData) {
setService(serviceData);
} else {
// Handle the case where the data is not valid
console.error("Service data is not valid:", serviceData);
}
} catch (error) {
console.error("Error fetching service data:", error);
}
};
useEffect(() => {
getService(params.serviceId);
}, [params.serviceId]);
return (
<div className="bg-grey100 h-[100%] pb-[4%] pl-60 ">
<div key={service.service_id}>
<div className="header-detail justify-between flex items-center h-20 px-10 mt-0 pt-[20px] py-[10px] w-[100%] bg-white text-grey600 pb-[20px] border-b border-grey300">
<div className="flex">
<img
src={arrow}
className=" h-[40px] w-[40px] cursor-pointer hover:scale-110 transition"
onClick={() => navigate("/admin-service")}
/>
<div className="Header-name">
<p className="service-text text-xs">บริการ</p>
<h1
name={service.serviceDetail}
className="text-black font-semibold text-xl"
>
{service.service_name}
</h1>
</div>
</div>
<button
className="btn-primary h-[100%] w-[112px] p-[20px] text-white focus:outline-none "
onClick={() =>
navigate(`/admin-service-edit/${service.service_id}`)
}
>
แก้ไข
</button>
</div>
<div className="flex flex-col items-center">
<div className="detail-container w-[95%] rounded-lg border border-grey300 bg-white font-normal flex-col items-center px-10 mt-10 pt-[20px] py-[10px] ">
<p className="pb-[40px] pt-[20px] ">
<span className="text-grey700">ชื่อหมวดหมู่</span>
<span className="px-[182px] text-black ">
{service.service_name}
</span>
</p>
<hr className="py-[20px]" />
<p className="pb-[25px] ">
<span className="text-grey700">สร้างเมื่อ</span>
<span className="px-[200px] text-black ">
{dateFormat(service.service_created_date)}
</span>
</p>
<p className="pb-[40px] ">
<span className="text-grey700">แก้ไขล่าสุด</span>
<span className="px-[190px] text-black ">
{dateFormat(service.service_edited_date)}
</span>
</p>
</div>
</div>
</div>
</div>
);
}
export default AdminDetailServicePage;
Raw
service.js
import { Router } from "express";
import supabase from "../utils/supabase.js";
import multer from "multer";
// import {protect} from "../middlewares/protects.js";
// import { uploadFile } from "../utils/upload.js";
const serviceRouter = Router();
const upload = multer({ dest: "uploads/"})
const uploadRouter = Router()
// API route to service listing page
serviceRouter.get("/", async (req, res) => {
const keywords = req.query.keywords || "";
const categoryFilter = req.query.categoryFilter || "";
const maxPriceFilter = req.query.maxPriceFilter || Number.MAX_SAFE_INTEGER;
const minPriceFilter = req.query.minPriceFilter || 0;
const orderFilter = req.query.orderFilter || "";
try {
const data = await supabase.from("service").select("*, sub_service(*), category(*)");
return res.json({
data,
});
} catch (error) {
res.status(500).json({
error: error,
});
}
});
//API route to one service item page
serviceRouter.get("/:id", async (req, res) => {
const serviceId = req.params.id;
try {
const { data, error } = await supabase
.from("service")
.select("*")
.eq("service_id", serviceId);
if (error) {
console.error(error);
return res
.status(500)
.json({ error: "Error fetching data from Supabase" });
}
if (data.length === 0) {
return res.status(404).json({ error: "Service not found" });
}
return res.status(200).json({ data: data[0] }); // Return the first (and only) result
} catch (err) {
console.error(err);
return res.status(500).json({ error: "Server error" });
}
});
serviceRouter.post("/", upload.single("file"), async (req, res) => {
try {
const file = req.file;
console.log(req.file);
if (!file) {
return res.status(400).json({ message: "No file uploaded" });
}
console.log("File Object", req.file);
console.log("File Object", req.file);
const uploadResult = await supabase.storage
.from("home_service")
.upload(`service_photo/${file.originalname}`, file, {
cacheControl: "3600",
upsert: false,
});
console.log({ uploadResult: uploadResult });
return res.status(200).send("Service photo uploaded successfully");
} catch (error) {
console.error("Error on service photo uploading", error);
return res.status(500).json({ message: "can't upload file to supabase" });
}
});
//API ROUTE to delete exisitng service item
serviceRouter.delete("/:id", async (req, res) => {
try {
const serviceId = req.params.id;
const { data, error } = await supabase
.from("service")
.delete()
.eq("service_id", serviceId);
if (error) {
return res.status(500).json({ error: "ไม่สามารถลบได้" });
}
if (data && data.length === 0) {
return res
.status(404)
.json({ error: `ไม่พบรายการที่ตรงกับ ${serviceId}` });
}
return res.status(200).json({ success: true });
} catch (error) {
res.status(500).json({ success: false, error: "ไม่สามารถลบได้" });
}
});
export default serviceRouter;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment