Merge pull request #8 from Hoang-Nguyen-Huy/feat/fetch-api

Feat/fetch api
Hoang-Nguyen-Huy · Oct 22, 2024 · 7e63cff · 7e63cff
2 parents d3a0015 + 575aef9
commit 7e63cff
Show file tree

Hide file tree

Showing 12 changed files with 72 additions and 47 deletions.
diff --git a/src/components/About.jsx b/src/components/About.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React, { useContext } from "react";
 import avt from "../assets/images/avt.jpg";
 import {

diff --git a/src/components/Button/ToggleThemeButton.jsx b/src/components/Button/ToggleThemeButton.jsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import { ThemeContext } from '../../themes/ThemeContext'
 import { styled } from '@mui/material/styles'
 import Switch from '@mui/material/Switch'

diff --git a/src/components/Contact.jsx b/src/components/Contact.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useContext } from "react";
+import { useState, useContext } from "react";
 import {
   Container,
   Typography,

diff --git a/src/components/Dashboard/OrchidManagement.jsx b/src/components/Dashboard/OrchidManagement.jsx
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import { useContext } from "react";
 import { Box, Typography, Container, IconButton, Divider } from "@mui/material";
 import { Grid } from "@mui/joy";
 import { ThemeContext } from "../../themes/ThemeContext";

diff --git a/src/components/MainContent/Content.jsx b/src/components/MainContent/Content.jsx
@@ -1,13 +1,25 @@
 import { Grid } from "@mui/joy";
-import React from "react";
-import { Orchids } from "../../ListOfOrchids";
 import OrchidCard from "./OrchidCard";
-import { useContext } from "react";
+import { useContext, useEffect, useState } from "react";
 import { ThemeContext } from "../../themes/ThemeContext";
 import { Box } from "@mui/material";
+import { getAllOrchids } from "../../apis/OrchidApi";
 
 export default function Content() {
   const { theme } = useContext(ThemeContext);
+  const [api, setApi] = useState([]);
+  useEffect(() => {
+    const fetchOrchids = async () => {
+      try {
+        const data = await getAllOrchids();
+        setApi(data);
+      } catch (error) {
+        console.error("Failed to fetch orchids:", error);
+      }
+    };
+
+    fetchOrchids();
+  }, []);
 
   return (
     <Box sx={{ width: "100%" }}>
@@ -22,7 +34,7 @@ export default function Content() {
           paddingTop: "36px",
         }}
       >
-        {Orchids.map((orchid) => {
+        {api.map((orchid) => {
           return (
             <Grid key={orchid.Id} item xs={12} sm={6} md={4}>
               <OrchidCard key={orchid.Id} orchid={orchid} />

diff --git a/src/components/MainContent/OrchidCard.jsx b/src/components/MainContent/OrchidCard.jsx
@@ -1,4 +1,4 @@
-import * as React from "react";
+/* eslint-disable react/prop-types */
 import AspectRatio from "@mui/joy/AspectRatio";
 import Card from "@mui/joy/Card";
 import CardContent from "@mui/joy/CardContent";
@@ -16,19 +16,6 @@ import { motion } from "framer-motion";
 import { useContext } from "react";
 import { ThemeContext } from "../../themes/ThemeContext";
 
-const style = {
-  position: "absolute",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  width: 400,
-  bgcolor: "black",
-  border: "2px solid #000",
-  boxShadow: 24,
-  p: 4,
-  color: "white",
-};
-
 const MotionCard = motion(Card);
 
 export default function OrchidCard({ orchid }) {
@@ -123,7 +110,7 @@ export default function OrchidCard({ orchid }) {
             orientation='horizontal'
             sx={{ justifyContent: "space-between" }}
           >
-            <Rating name='read-only' value={orchid.rating} readOnly />
+            <Rating name='read-only' value={Number(orchid.rating)} readOnly />
             <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.95 }}>
               <Button
                 variant='outlined'

diff --git a/src/components/News.jsx b/src/components/News.jsx
@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import { useContext } from "react";
 import {
   Box,
   Card,

diff --git a/src/components/OrchidDetail.jsx b/src/components/OrchidDetail.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import {
   Box,
@@ -13,7 +13,6 @@ import {
   IconButton,
 } from "@mui/material";
 import { Grid } from "@mui/joy";
-import { Orchids } from "../ListOfOrchids";
 import LocationOnIcon from "@mui/icons-material/LocationOn";
 import CategoryIcon from "@mui/icons-material/Category";
 import ColorLensIcon from "@mui/icons-material/ColorLens";
@@ -25,17 +24,31 @@ import { ThemeContext } from "../themes/ThemeContext";
 import { AspectRatio } from "@mui/joy";
 import { motion } from "framer-motion";
 import { RelatedOrchidsSlider } from "./RelatedOrchidSlider";
+import { getOrchidById } from "../apis/OrchidApi";
 
 const MotionBox = motion(Box);
 
 export default function OrchidDetail() {
   const { id } = useParams();
   const navigate = useNavigate();
-  const orchid = Orchids.find((o) => o.Id === id);
+  const [api, setApi] = useState({});
   const { theme } = useContext(ThemeContext);
   const [videoModalOpen, setVideoModalOpen] = useState(false);
 
-  if (!orchid) {
+  useEffect(() => {
+    const fetchOrchids = async () => {
+      try {
+        const data = await getOrchidById(id);
+        setApi(data);
+      } catch (error) {
+        console.error("Failed to fetch orchids:", error);
+      }
+    };
+
+    fetchOrchids();
+  }, [id]);
+
+  if (!api) {
     return (
       <Container
         maxWidth='lg'
@@ -100,8 +113,8 @@ export default function OrchidDetail() {
                 <Box sx={{ position: "relative" }}>
                   <AspectRatio ratio='4/3'>
                     <img
-                      src={orchid.image}
-                      alt={orchid.name}
+                      src={api.image}
+                      alt={api.name}
                       style={{
                         width: "100%",
                         height: "100%",
@@ -135,12 +148,12 @@ export default function OrchidDetail() {
                     gutterBottom
                     sx={{ fontWeight: "bold", color: theme.text.primary }}
                   >
-                    {orchid.name}
+                    {api.name}
                   </Typography>
                   <Box sx={{ display: "flex", alignItems: "center", mb: 2 }}>
                     <Rating
                       name='read-only'
-                      value={orchid.rating}
+                      value={Number(api.rating)}
                       readOnly
                       precision={0.5}
                       emptyIcon={
@@ -154,7 +167,7 @@ export default function OrchidDetail() {
                       variant='body1'
                       sx={{ ml: 1, color: theme.text.secondary }}
                     >
-                      ({orchid.rating}/5)
+                      ({api.rating}/5)
                     </Typography>
                   </Box>
                   <Divider sx={{ my: 2 }} />
@@ -165,7 +178,7 @@ export default function OrchidDetail() {
                     <LocationOnIcon sx={{ mr: 1, color: theme.icon.color }} />
                     Origin:{" "}
                     <Chip
-                      label={orchid.origin}
+                      label={api.origin}
                       sx={{
                         ml: 1,
                         backgroundColor: theme.chip.backgroundColor,
@@ -180,7 +193,7 @@ export default function OrchidDetail() {
                     <CategoryIcon sx={{ mr: 1, color: theme.icon.color }} />
                     Category:{" "}
                     <Chip
-                      label={orchid.category}
+                      label={api.category}
                       sx={{
                         ml: 1,
                         backgroundColor: theme.chip.backgroundColor,
@@ -195,7 +208,7 @@ export default function OrchidDetail() {
                     <ColorLensIcon sx={{ mr: 1, color: theme.icon.color }} />
                     Color:{" "}
                     <Chip
-                      label={orchid.color}
+                      label={api.color}
                       sx={{
                         ml: 1,
                         backgroundColor: theme.chip.backgroundColor,
@@ -209,9 +222,9 @@ export default function OrchidDetail() {
                     paragraph
                     sx={{ color: theme.text.secondary, lineHeight: 1.6 }}
                   >
-                    {orchid.detail}
+                    {api.detail}
                   </Typography>
-                  {orchid.isSpecial && (
+                  {api.isSpecial && (
                     <Chip
                       icon={<StarIcon />}
                       label='Special Orchid'
@@ -225,7 +238,7 @@ export default function OrchidDetail() {
           </Paper>
         </MotionBox>
 
-        <RelatedOrchidsSlider currentOrchid={orchid} theme={theme} />
+        <RelatedOrchidsSlider currentOrchid={api} theme={theme} />
       </Container>
 
       <Modal
@@ -260,8 +273,8 @@ export default function OrchidDetail() {
             <iframe
               width='100%'
               height='100%'
-              src={orchid.video}
-              title={orchid.name}
+              src={api.video}
+              title={api.name}
               allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
               allowFullScreen
             ></iframe>

diff --git a/src/components/RelatedOrchidSlider.jsx b/src/components/RelatedOrchidSlider.jsx
@@ -1,4 +1,5 @@
-import React from "react";
+/* eslint-disable react/no-unknown-property */
+/* eslint-disable react/prop-types */
 import Slider from "react-slick";
 import { getContinent } from "../Continent";
 import { Orchids } from "../ListOfOrchids";

diff --git a/src/components/SpecialOrchid.jsx b/src/components/SpecialOrchid.jsx
@@ -1,15 +1,26 @@
 import { Grid } from "@mui/joy";
-import React from "react";
-import { Orchids } from "../ListOfOrchids";
 import OrchidCard from "./MainContent/OrchidCard";
-import { useContext } from "react";
+import { useContext, useEffect, useState } from "react";
 import { ThemeContext } from "../themes/ThemeContext";
 import { Box } from "@mui/material";
+import { getSpecialOrchids } from "../apis/OrchidApi";
 
 export default function SpecialOrchid() {
   const { theme } = useContext(ThemeContext);
+  const [api, setApi] = useState([]);
+  useEffect(() => {
+    const fetchOrchids = async () => {
+      try {
+        const data = await getSpecialOrchids();
+        setApi(data);
+      } catch (error) {
+        console.error("Failed to fetch orchids:", error);
+      }
+    };
+
+    fetchOrchids();
+  }, []);
 
-  const specialOrchids = Orchids.filter((orchid) => orchid.isSpecial);
   return (
     <Box
       sx={{
@@ -27,7 +38,7 @@ export default function SpecialOrchid() {
           paddingTop: "36px",
         }}
       >
-        {specialOrchids.map((orchid) => {
+        {api.map((orchid) => {
           return (
             <Grid key={orchid.Id} item xs={12} sm={6} md={4}>
               <OrchidCard key={orchid.Id} orchid={orchid} />

diff --git a/src/hooks/useModal.jsx b/src/hooks/useModal.jsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-export default function useModal({ orchid }) {
+export default function useModal() {
   const [isVisible, setIsVisible] = useState(false);
   const [detail, setDetail] = useState(null);