Merge pull request #69 from Cassianky/create-testimonials

[Admin] Create testimonials

admin-frontend/src/App.js

@@ -29,6 +29,8 @@ import ActivityThemesPage from "./components/activitytheme/ActivityThemesPage";
 import ActivityReviews from "./components/review/ActivityReviews";
 import ManageReviewsForActivity from "./components/review/ManageReviewsForActivity";
 import AdminChatpage from "./components/Chat/AdminChatPage";
+import ManageTestimonials from "./components/testimonial/ManageTestimonials.jsx";
+import TestimonialDetails from "./components/testimonial/TestimonialDetails.jsx";
 import VendorDetails from "./components/vendor/VendorDetails";
 
 function App() {
@@ -101,15 +103,15 @@ function App() {
               </ProtectedRoute>
             }
           />
-          <Route
+          {/* <Route
             exact
             path="/viewVendor/:vendorId"
             element={
               <ProtectedRoute>
                 <VendorDetails />
               </ProtectedRoute>
             }
-          />
+          /> */}
           <Route
             exact
             path="/addVendor"
@@ -245,6 +247,25 @@ function App() {
               </ProtectedRoute>
             }
           />
+
+          <Route
+            exact
+            path="/testimonials"
+            element={
+              <ProtectedRoute>
+                <ManageTestimonials />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            exact
+            path="/testimonials/:testimonialId"
+            element={
+              <ProtectedRoute>
+                <TestimonialDetails />
+              </ProtectedRoute>
+            }
+          />
           <Route
             exact
             path="/verifyEmail/:token"

admin-frontend/src/components/navbar/SideNavBar.jsx

@@ -29,6 +29,7 @@ const bookingManagementList = [
 const surveyManagementList = [
   { "View Submitted Surveys": "/surveys" },
   { "Manage Reviews": "/reviews" },
+  { "Manage Testimonials": "/testimonials" },
 ];
 
 const StyledLink = styled(Link)`

admin-frontend/src/components/survey/SubmittedSurvey.jsx

@@ -1,55 +1,56 @@
-import React from "react";
+import React, { useState } from "react";
 
-import styled from "@emotion/styled";
 import { useTheme } from "@emotion/react";
-import {
-  Badge,
-  CircularProgress,
-  Tabs,
-  Tab,
-  Typography,
-  Divider,
-  Box,
-} from "@mui/material";
-import { useEffect, useState } from "react";
+import { Box, CircularProgress, Divider, Typography } from "@mui/material";
+import { useEffect } from "react";
+import { useNavigate, useParams } from "react-router-dom";
 import {
   useAdminSurveyResponseStore,
-  useBookingStore,
   useSnackbarStore,
+  useTestimonialStore,
 } from "../../zustand/GlobalStore";
-import InfoIcon from "@mui/icons-material/Info";
 import MainBodyContainer from "../common/MainBodyContainer";
 import SurveyDetails from "./SurveyDetails";
-import { useParams } from "react-router-dom";
+import { convertISOtoDate } from "../../utils/TimeFormatter";
 
-const convertISOtoDate = (value) => {
-  const date = new Date(value);
-  const options = {
-    weekday: "long",
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-  };
-  const formattedDate = date.toLocaleDateString("en-SG", options);
-  return formattedDate;
-};
 function SubmittedSurvey() {
   const theme = useTheme();
   const { surveyId } = useParams();
   const { survey, getSurveyDetails, isLoading } = useAdminSurveyResponseStore();
+  const { hasTestimonialForSurvey, createTestimonialForSurvey } =
+    useTestimonialStore();
   const { openSnackbar } = useSnackbarStore();
+  const [hasTestimonial, setHasTestimonial] = useState();
+  const [testimonial, setTestimonial] = useState(null);
+  const navigate = useNavigate();
 
   useEffect(() => {
     const get = async () => {
       try {
         await getSurveyDetails(surveyId);
+        const testimonialData = await hasTestimonialForSurvey(surveyId);
+        setHasTestimonial(testimonialData.hasTestimonial);
+        if (testimonialData.hasTestimonial) {
+          setTestimonial(testimonialData.testimonial);
+        }
       } catch (err) {
         openSnackbar("Error retrieving survey.", "error");
       }
     };
     get();
   }, []);
 
+  const handleCreateTestimonial = async () => {
+    try {
+      const newT = await createTestimonialForSurvey(surveyId);
+      navigate(`/testimonials/${newT._id}`);
+      openSnackbar("Created new testimonial.", "success");
+    } catch (err) {
+      console.log(err)
+      openSnackbar("Error creating testimonial.", "error");
+    }
+  };
+
   if (isLoading) {
     return <CircularProgress />;
   }
@@ -100,7 +101,14 @@ function SubmittedSurvey() {
         <Divider />
       </Box>
 
-      {survey && <SurveyDetails surveyData={survey} />}
+      {survey && (
+        <SurveyDetails
+          surveyData={survey}
+          hasTestimonial={hasTestimonial}
+          testimonial={testimonial}
+          handleCreateTestimonial={() => handleCreateTestimonial()}
+        />
+      )}
     </MainBodyContainer>
   );
 }

admin-frontend/src/components/survey/SurveyDetails.jsx

@@ -1,21 +1,16 @@
-import React from "react";
 import styled from "@emotion/styled";
+import { LinkOff, MoodOutlined } from "@mui/icons-material";
+import AddIcon from "@mui/icons-material/Add";
 import {
-  Box,
   Button,
-  Checkbox,
-  CircularProgress,
-  Divider,
-  FormControlLabel,
   Grid,
   Paper,
   Rating,
   Stack,
   TextField,
   Typography,
 } from "@mui/material";
-import InfoIcon from "@mui/icons-material/Info";
-import AddIcon from "@mui/icons-material/Add";
+import React from "react";
 
 const StyledPaper = styled(Paper)`
   padding: 20px;
@@ -25,8 +20,12 @@ const StyledPaper = styled(Paper)`
   box-shadow: 3px 3px 0px 0px rgb(159, 145, 204, 40%);
 `;
 
-function SurveyDetails({ surveyData }) {
-  console.log(surveyData);
+function SurveyDetails({
+  surveyData,
+  hasTestimonial,
+  testimonial,
+  handleCreateTestimonial,
+}) {
   return (
     <>
       <Grid container spacing={2}>
@@ -154,9 +153,25 @@ function SurveyDetails({ surveyData }) {
             <Typography color="#9F91CC" variant="h5">
               Testimonial
             </Typography>
-            <Button variant="contained" color="primary" startIcon={<AddIcon />}>
-              Use Testimonial
-            </Button>
+            {hasTestimonial ? (
+              <Button
+                variant="outlined"
+                color="primary"
+                href={`/testimonials/${testimonial._id}`}
+                startIcon={<MoodOutlined />}
+              >
+                View Testimonial
+              </Button>
+            ) : (
+              <Button
+                variant="contained"
+                color="primary"
+                startIcon={<AddIcon />}
+                onClick={() => handleCreateTestimonial()}
+              >
+                Use Testimonial
+              </Button>
+            )}
           </Stack>
         </Grid>
 

admin-frontend/src/components/testimonial/ManageTestimonials.jsx

@@ -0,0 +1,74 @@
+import { useTheme } from "@emotion/react";
+import { CircularProgress, Tab, Tabs, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
+import {
+  useSnackbarStore,
+  useTestimonialStore,
+} from "../../zustand/GlobalStore";
+import MainBodyContainer from "../common/MainBodyContainer";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import TestimonialsTable from "./TestimonialsTable";
+
+function ManageTestimonials() {
+  const theme = useTheme();
+
+  const { openSnackbar } = useSnackbarStore();
+  const {
+    testimonials,
+    getAllTestimonials,
+    isLoading,
+    toggleTestimonialVisibility,
+  } = useTestimonialStore();
+
+  const handleToggle = async (testimonialId) => {
+    try {
+      await toggleTestimonialVisibility(testimonialId);
+    } catch (error) {
+      console.error(error);
+      openSnackbar("An error occurred", "error");
+    }
+  };
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        await getAllTestimonials();
+      } catch (err) {
+        console.error(err);
+        openSnackbar("Error when retrieving testimonials.", "error");
+      }
+    };
+    fetchData();
+  }, [getAllTestimonials]);
+
+  if (isLoading) {
+    return <CircularProgress />;
+  }
+  return (
+    <MainBodyContainer
+      hasBackButton={false}
+      breadcrumbNames={[]}
+      breadcrumbLinks={[]}
+      currentBreadcrumbName={"Manage Testimonials"}
+    >
+      <Typography
+        fontSize={25}
+        fontWeight={700}
+        noWrap
+        component="div"
+        color={theme.palette.primary.main}
+      >
+        Manage Testimonials
+      </Typography>
+      {testimonials && (
+        <TestimonialsTable
+          testimonials={testimonials}
+          handleToggle={handleToggle}
+        />
+      )}
+    </MainBodyContainer>
+  );
+}
+
+export default ManageTestimonials;