feat: show contactus data on admin dashboard (#829)

* feat: show contactus data on admin dashboard * style: change colors of buttons on contactus and joinus * style: change colors of buttons on contactus and joinus
HITK-TECH-Community · Jan 16, 2024 · 72b4052 · 72b4052
1 parent 1e08453
commit 72b4052
Show file tree

Hide file tree

Showing 6 changed files with 191 additions and 29 deletions.
diff --git a/frontend/src/pages/Admin/Components/Contact/Card/Card.jsx b/frontend/src/pages/Admin/Components/Contact/Card/Card.jsx
@@ -0,0 +1,20 @@
+import style from "./card.module.scss";
+
+export function Card({ content: { email, message, name, subject } }) {
+  return (
+    <div className={style["card-item"]}>
+      <div className={style["card-info"]}>
+        <h1>{name}</h1>
+        <h3 className={style["card-detail"]}>Email : {email}</h3>
+        <h3 className={style["card-detail"]}>Subject : {subject}</h3>
+        <h2 className={style["card-detail"]}>{message}</h2>
+        <div className={style["button-group"]}>
+          <a href={`mailto:${email}`}>
+            <button className={style["button-edit"]}>Reply</button>
+          </a>
+          <button className={style["button-delete"]}>Delete</button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/Admin/Components/Contact/Card/card.module.scss b/frontend/src/pages/Admin/Components/Contact/Card/card.module.scss
@@ -0,0 +1,93 @@
+.card-item {
+  text-align: center;
+  font-size: 1.5rem;
+  border-radius: 1em;
+  height: auto;
+  width: 15em;
+  margin: 1em;
+  display: inline-block;
+  background-position: left center;
+  transition: all 0.5s ease-in;
+  background-color: #016795;
+  box-shadow: 0.5em 0.5em 0.5em rgb(54, 53, 53);
+}
+
+.card-title {
+  font-size: 1.8rem;
+  margin-bottom: 1.5rem;
+  line-height: 1.9rem;
+  font-weight: bold;
+  color: white;
+}
+
+.card-detail {
+  font-weight: bold;
+  text-align: center;
+  font-size: 1.2rem;
+  width: 100%;
+  margin-top: 2px;
+}
+
+.card-info {
+  color: white;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  padding: 14px;
+}
+
+.card-link {
+  color: white;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.card-link:hover {
+  color: #fb8500;
+}
+
+.button-group {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  margin-top: 40px;
+}
+
+.button-edit {
+  padding: 10px 30px;
+  border: none;
+  outline: none;
+  border-radius: 5px;
+  background-color: rgb(124, 124, 252);
+  margin: 5px;
+  color: #fff;
+  width: 100px;
+  font-size: medium;
+  font-weight: bold;
+  transition: background-color 200ms;
+}
+
+.button-edit:hover {
+  background-color: rgb(177, 177, 250);
+}
+
+.button-delete {
+  padding: 10px 30px;
+  border: none;
+  outline: none;
+  border-radius: 5px;
+  background-color: #fc0254;
+  margin: 5px;
+  color: #fff;
+  width: 100px;
+  font-size: medium;
+  font-weight: bold;
+  transition: background-color 200ms;
+}
+
+.button-delete:hover {
+  background-color: #fc3779;
+}
diff --git a/frontend/src/pages/Admin/Components/Contact/Card/index.js b/frontend/src/pages/Admin/Components/Contact/Card/index.js
@@ -0,0 +1 @@
+export * from "./Card";
diff --git a/frontend/src/pages/Admin/Components/Contact/Contact.jsx b/frontend/src/pages/Admin/Components/Contact/Contact.jsx
@@ -1,9 +1,44 @@
 import React from "react";
+import { END_POINT } from "../../../../config/api";
+import { useEffect, useState } from "react";
+import Grid from "@material-ui/core/Grid";
+import { Card } from "./Card/index.js";
+import style from "./contactus.module.scss";
+import Loader from "../../../../components/util/Loader";
 
 export function Contact() {
+  const [contactUsData, setContactUsData] = useState([]);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const fetchJoinUs = async () => {
+    const response = await fetch(`${END_POINT}/getContactUs`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${localStorage.getItem("token")}`,
+      },
+    });
+    const data = await response.json();
+    setContactUsData(data.ContactUs);
+    setIsLoaded(false);
+  };
+  useEffect(() => {
+    setIsLoaded(true);
+    fetchJoinUs();
+  }, []);
   return (
     <div>
       <h1 style={{ textAlign: "center" }}> Contact Us </h1>
+      <div className={style["data-loader"]}>{isLoaded ? <Loader /> : null}</div>
+      <div className={style["card-container"]}>
+        <Grid container spacing={2}>
+          <Grid item>
+            {contactUsData &&
+              contactUsData.map((data) => {
+                return <Card key={data._id} content={data} />;
+              })}
+          </Grid>
+        </Grid>
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/pages/Admin/Components/Contact/contactus.module.scss b/frontend/src/pages/Admin/Components/Contact/contactus.module.scss
@@ -0,0 +1,11 @@
+.card-container {
+  width: 100%;
+  margin-left: 10rem;
+}
+
+.data-loader {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/frontend/src/pages/Admin/Components/JoinUs/Card/card.module.scss b/frontend/src/pages/Admin/Components/JoinUs/Card/card.module.scss
@@ -1,25 +1,25 @@
 .card-item {
-    text-align: center;
-    font-size: 1.5rem;
-    border-radius: 1em;
-    height: auto;
-    width: 15em;
-    margin: 1em;
-    display: inline-block;
-    background-position: left center;
-    transition: all 0.5s ease-in;
-    background-color: #016795;
-    box-shadow: 0.5em 0.5em 0.5em rgb(54, 53, 53);
+  text-align: center;
+  font-size: 1.5rem;
+  border-radius: 1em;
+  height: auto;
+  width: 15em;
+  margin: 1em;
+  display: inline-block;
+  background-position: left center;
+  transition: all 0.5s ease-in;
+  background-color: #016795;
+  box-shadow: 0.5em 0.5em 0.5em rgb(54, 53, 53);
 }
-  
+
 .card-title {
   font-size: 1.8rem;
   margin-bottom: 1.5rem;
   line-height: 1.9rem;
   font-weight: bold;
   color: white;
 }
-  
+
 .card-detail {
   font-weight: bold;
   text-align: center;
@@ -29,30 +29,30 @@
 }
 
 .card-info {
-    color: white;
-    margin-top: 10px;
-    margin-bottom: 20px;
-    display: flex;
-    flex-direction: column;
-    padding: 14px;
+  color: white;
+  margin-top: 10px;
+  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  padding: 14px;
 }
 
-.card-link{
-    color: white;
-    text-decoration: underline;
-    cursor: pointer;
+.card-link {
+  color: white;
+  text-decoration: underline;
+  cursor: pointer;
 }
 
 .card-link:hover {
   color: #fb8500;
-
 }
 
 .button-group {
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: center;
+  gap: 10px;
   margin-top: 40px;
 }
 
@@ -61,31 +61,33 @@
   border: none;
   outline: none;
   border-radius: 5px;
-  background: linear-gradient(45deg, rgb(115, 196, 228), rgb(111, 111, 247));
+  background-color: rgb(124, 124, 252);
   margin: 5px;
   color: #fff;
   width: 100px;
   font-size: medium;
   font-weight: bold;
+  transition: background-color 200ms;
 }
 
-.button-url:hover {
-  background: linear-gradient(45deg, rgb(111, 111, 247), rgb(115, 196, 228));
+.button-edit:hover {
+  background-color: rgb(177, 177, 250);
 }
 
 .button-delete {
   padding: 10px 30px;
   border: none;
   outline: none;
   border-radius: 5px;
-  background: linear-gradient(45deg, rgb(255, 0, 0), rgb(243, 109, 109));
+  background-color: #fc0254;
   margin: 5px;
   color: #fff;
   width: 100px;
   font-size: medium;
   font-weight: bold;
+  transition: background-color 200ms;
 }
 
 .button-delete:hover {
-  background: linear-gradient(45deg, rgb(243, 109, 109), rgb(255, 0, 0));
+  background-color: #fc3779;
 }