fix: about page updated

client/src/App.js

@@ -11,28 +11,31 @@ import Alert from "./Components/Alert/Alert";
 import EventsPage from "./Components/EventsPage/EventsPage";
 import TeamPage from "./Components/TeamPage/TeamPage";
 import ContactPage from "./Components/ContactPage/ContactPage";
+import AboutState from "./context/AboutContext/AboutState";
 
 
 const App = () => {
   return (
     <>
       <TeamMemberState>
         <EventsState>
-          {
-            <Alert />
-          }
-          <Router>
-            <Routes>
-              <Route exact path="/" element={<Homepage />} />
-              <Route exact path="/about" element={<Aboutpage />} />
-              <Route exact path="/admin" element={< Adminpage />} />
-              <Route exact path="/signup" element={< Adminsignup />} />
-              <Route exact path="/adminccsc" element={< Admindashboard />} />
-              <Route exact path="/events" element={<EventsPage />}></Route>
-              <Route exact path="/team" element={<TeamPage />}></Route>
-              <Route exact path="/contact" element={<ContactPage />}></Route>
-            </Routes>
-          </Router>
+          <AboutState>
+            {
+              <Alert />
+            }
+            <Router>
+              <Routes>
+                <Route exact path="/" element={<Homepage />} />
+                <Route exact path="/about" element={<Aboutpage />} />
+                <Route exact path="/admin" element={< Adminpage />} />
+                <Route exact path="/signup" element={< Adminsignup />} />
+                <Route exact path="/adminccsc" element={< Admindashboard />} />
+                <Route exact path="/events" element={<EventsPage />}></Route>
+                <Route exact path="/team" element={<TeamPage />}></Route>
+                <Route exact path="/contact" element={<ContactPage />}></Route>
+              </Routes>
+            </Router>
+          </AboutState>
         </EventsState>
       </TeamMemberState>
     </>

client/src/Components/Aboutpage/Aboutpage.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import Navbar from '../Navbar/Navbar'
 import './Aboutpage.css'
 import Abt from '../../Assets/abt.svg';
@@ -16,15 +16,34 @@ const Aboutpage = () => {
 }
 
 const AboutSection = () => {
+
+    const url = 'https://codechefsrm.herokuapp.com'
+
+    const [about, setAbout] = useState([{ para1: '', para2: '', para3: '' }]);
+
+    const aboutData = async () => {
+        const response = await fetch(`${url}/api/about-us`, {
+            method: 'GET',
+            headers: {
+                'Content-type': 'application/json',
+            }
+        })
+        const json = await response.json();
+        console.log(json);
+        setAbout(json);
+    }
+
+    useEffect(() => {
+        aboutData();
+    }, [])
+
     return (
         <div className="main__abt__div">
             <div className='flex__center abt__section flex__flow__down'>
                 <div className='flex__center abt__section flex__flow__down'>
                     <h1>Let us introduce ourselves</h1>
                     <div className='underline'></div>
-                    <p className='about__top__right'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis urna sed nibh luctus varius. Etiam ligula libero, vestibulum in risus ut, lacinia consectetur metus. Aliquam laoreet urna sapien, sit amet varius magna rhoncus in. Sed laoreet, nisi a commodo condimentum, risus turpis porttitor ex, tempus finibus velit ligula et nisi. Praesent dapibus ultrices quam sit amet accumsan. Vestibulum quis varius leo. Fusce laoreet mauris lacus, in volutpat leo luctus vitae. Aliquam erat volutpat.
-
-                        Morbi condimentum urna vitae nisi aliquam, sed pretium dui accumsan. Aenean ac dolor sit amet lorem efficitur finibus ut sed risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam erat volutpat. Nulla condimentum velit enim, eu eleifend risus dictum id. Sed a est quis turpis ultrices sagittis.</p>
+                    <p className='about__top__right'>{about[0].para1}</p>
                 </div>
                 <div className='about__div__middle flex__center'>
                     <div className='left__div__middle'>
@@ -34,8 +53,7 @@ const AboutSection = () => {
                         <h1>Why we do ?</h1>
                         <h1>What we do ?</h1>
                         <p>
-                            Morbi condimentum urna vitae nisi aliquam, sed pretium dui accumsan. Aenean ac dolor sit amet lorem efficitur finibus ut sed risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam erat volutpat. Nulla condimentum velit enim, eu eleifend risus dictum id. Sed a est quis turpis ultrices sagittis.
-                            Morbi condimentum urna vitae nisi aliquam, sed pretium dui accumsan. Aenean ac dolor sit amet lorem efficitur finibus ut sed risus. Vestibulum ante ipsum primis in faucibus.
+                            {about[0].para2}
                         </p>
                     </div>
                 </div>
@@ -44,9 +62,7 @@ const AboutSection = () => {
                     <h1>What we believe in:</h1>
                     <h1>Our Motto</h1>
                     <div className='underline'></div>
-                    <p className='about__top__right'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis urna sed nibh luctus varius. Etiam ligula libero, vestibulum in risus ut, lacinia consectetur metus. Aliquam laoreet urna sapien, sit amet varius magna rhoncus in. Sed laoreet, nisi a commodo condimentum, risus turpis porttitor ex, tempus finibus velit ligula et nisi. Praesent dapibus ultrices quam sit amet accumsan. Vestibulum quis varius leo. Fusce laoreet mauris lacus, in volutpat leo luctus vitae. Aliquam erat volutpat.
-
-                        Morbi condimentum urna vitae nisi aliquam, sed pretium dui accumsan. Aenean ac dolor sit amet lorem efficitur finibus ut sed risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam erat volutpat. Nulla condimentum velit enim, eu eleifend risus dictum id. Sed a est quis turpis ultrices sagittis.</p>
+                    <p className='about__top__right'>{about[0].para3}</p>
                 </div>
             </div>
         </div>

client/src/Components/Adminpage/Admindashboard/Admindashboard.css

@@ -101,3 +101,29 @@
 .Pagination__Toggle > button:hover {
   background: #cacaca;
 }
+/*About Us Section*/
+.edit__about__main {
+  display: flex;
+  width: 95%;
+  padding: 2.5%;
+  height: auto;
+}
+.textareas {
+  display: flex;
+  width: 95%;
+  padding: 2.5%;
+}
+.textareas textarea {
+  width: 95%;
+  padding: 2.5%;
+  height: 200px;
+  margin: 10px;
+  background: #f1f1f1;
+  border: none;
+  border-bottom: 2px solid #f1f1f1;
+  transition: all 0.3s ease;
+}
+.textareas textarea:focus {
+  border-bottom: 2px solid #000;
+  outline: none;
+}

client/src/Components/Adminpage/Admindashboard/Admindashboard.js

@@ -1,6 +1,5 @@
-import React, { useContext, useEffect } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { Link as NavLink } from 'react-scroll';
-import { useState } from 'react/cjs/react.development';
 import CCSCLogo from '../../../Assets/BlueWithBrackets.png'
 import EventsContext from '../../../context/EventsContext/EventsContext';
 import TeamMemberContext from '../../../context/TeamMemberContext/TeamMemberContext';
@@ -10,6 +9,7 @@ import TeamCard from './TeamCard/TeamCard';
 
 import { useNavigate } from 'react-router-dom';
 import AlertContext from '../../../context/AlertContext/AlertContext';
+import AboutContext from '../../../context/AboutContext/AboutContext';
 
 const Admindashboard = () => {
     const EventContext = useContext(EventsContext);
@@ -21,6 +21,9 @@ const Admindashboard = () => {
     const alertContext = useContext(AlertContext);
     const { handleAlert } = alertContext;
 
+    const aboutContext = useContext(AboutContext);
+    const { getAbout, editAboutText, about } = aboutContext;
+
     const [eventPageNumber, setEventPageNumber] = useState(1);
     const [teamPageNumber, setTeamPageNumber] = useState(1);
 
@@ -30,6 +33,7 @@ const Admindashboard = () => {
         if (localStorage.getItem('ccscadminaccesstokenadmin') !== "null") {
             getEvents(eventPageNumber);
             getTeam(teamPageNumber);
+            getAbout();
         } else {
             history('/admin')
         }
@@ -40,6 +44,7 @@ const Admindashboard = () => {
             <AdminNavbar handleAlert={handleAlert} />
             <EventsSection events={events} addEvent={addEvent} eventPageNumber={eventPageNumber} setEventPageNumber={setEventPageNumber} />
             <TeamSection team={team} addTeamMember={addTeamMember} teamPageNumber={teamPageNumber} setTeamPageNumber={setTeamPageNumber} />
+            <EditAbout editAboutText={editAboutText} getAbout={getAbout} about={about} />
         </>
     )
 }
@@ -66,6 +71,9 @@ const AdminNavbar = ({ handleAlert }) => {
                 <NavLink to="team" smooth={true} className="link">
                     TEAM
                 </NavLink>
+                <NavLink to="about" smooth={true} className="link">
+                    ABOUT
+                </NavLink>
             </div>
             <div className="flex__center">
                 <p><b>Welcome</b></p>
@@ -176,7 +184,7 @@ const TeamSection = ({ team, addTeamMember, teamPageNumber, setTeamPageNumber })
                 {
                     (team.length !== 0) ?
                         team.map((member) => {
-                            console.log('updating...');
+                            // console.log('updating...');
                             return <TeamCard member={member} key={member._id} />
                         }) : <p>No members here !! Please Add someone</p>
                 }
@@ -221,4 +229,41 @@ const AddTeamMemberModal = ({ addTeamMember, addMemberModal, setAddMemberModal }
     )
 }
 
+const EditAbout = ({ about, editAboutText, getAbout }) => {
+
+    const [para1, setPara1] = useState('');
+    const [para2, setPara2] = useState('');
+    const [para3, setPara3] = useState('');
+
+
+    const [data, setData] = useState(about);
+
+    const handleSubmit = () => {
+        editAboutText(para1, para2, para3);
+        console.log(data);
+        setData([{ para1, para2, para3 }]);
+    }
+
+    useEffect(() => {
+        setData(about);
+        console.log(data);
+        setPara1(data[0].para1);
+        setPara2(data[0].para2);
+        setPara3(data[0].para3);
+        // eslint-disable-next-line
+    }, [about])
+
+    return (
+        <div className='edit__about__main flex__center flex__flow__down' id='about'>
+            <h1>About Us Section</h1>
+            <div className='textareas flex__center flex__flow__down'>
+                <textarea value={para1} onChange={(e) => setPara1(e.target.value)}></textarea>
+                <textarea value={para2} onChange={(e) => setPara2(e.target.value)}></textarea>
+                <textarea value={para3} onChange={(e) => setPara3(e.target.value)}></textarea>
+            </div>
+            <button onClick={() => handleSubmit()} className='prim__button'>Submit</button>
+        </div>
+    )
+}
+
 export default Admindashboard

client/src/Components/Adminpage/Admindashboard/EventsCard/EventsCard.css

@@ -1,6 +1,7 @@
 .events__card__main {
   width: 100%;
   max-width: 330px;
+  min-width: 330px;
   height: 430px;
   padding: 10px;
   position: relative;

client/src/Components/Adminpage/Admindashboard/TeamCard/TeamCard.css

@@ -1,5 +1,6 @@
 .member__card {
   max-width: 330px;
+  min-width: 330px;
   height: 430px;
   padding: 10px;
   width: 100%;

client/src/context/AboutContext/AboutContext.js

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+const AboutContext = createContext();
+
+export default AboutContext;

client/src/context/AboutContext/AboutState.js

@@ -0,0 +1,101 @@
+import React, { useContext, useState } from 'react'
+import AlertContext from '../AlertContext/AlertContext';
+import AboutContext from './AboutContext';
+
+const AboutState = (props) => {
+
+    const alertContext = useContext(AlertContext);
+    const { handleAlert } = alertContext;
+
+    const url = 'https://codechefsrm.herokuapp.com'
+    const dataAbt = [{
+        para1: '',
+        para2: '',
+        para3: ''
+    }]
+    const [about, setAbout] = useState(dataAbt);
+
+    const meRequest = async () => {
+        const request = await fetch(`${url}/me`, {
+            method: 'GET',
+            headers: {
+                'Content-type': 'application/json',
+                'Authorization': 'Bearer ' + localStorage.getItem('ccscadminaccesstokenadmin')
+            }
+        })
+
+        const response = await request.status;
+        if (response === 403) {
+            const refresh = await fetch(`${url}/api/admin/refresh-token`, {
+                method: 'GET',
+                headers: {
+                    'Content-type': 'application/json',
+                    'Authorization': 'Bearer ' + localStorage.getItem('ccscadminaccesstokenrefresh')
+                }
+            })
+            const response_refresh = await refresh.status;
+            if (response_refresh === 200) {
+                console.log(response_refresh);
+                const tokens = await refresh.json();
+                localStorage.setItem('ccscadminaccesstokenadmin', tokens.access_token)
+                localStorage.setItem('ccscadminaccesstokenrefresh', tokens.refresh_token)
+            } else {
+                console.log(response_refresh);
+                localStorage.setItem('ccscadminaccesstokenadmin', "null")
+                localStorage.setItem('ccscadminaccesstokenrefresh', "null")
+            }
+        }
+        console.log(response);
+    }
+
+    const getAbout = async () => {
+
+        meRequest();
+
+        const request = await fetch(`${url}/api/about-us`, {
+            method: 'GET',
+            headers: {
+                'Content-type': 'application/json'
+            }
+        })
+        const response = await request.json();
+        console.log(response);
+        setAbout(response);
+        console.log('updated about');
+    }
+
+    const editAboutText = async (para1, para2, para3) => {
+        meRequest();
+
+        const request = await fetch(`${url}/api/admin/about-us`, {
+            method: 'POST',
+            headers: {
+                'Content-type': 'application/json',
+                'Authorization': 'Bearer ' + localStorage.getItem('ccscadminaccesstokenadmin')
+            },
+            body: JSON.stringify({
+                "about_us": {
+                    "para1": para1,
+                    "para2": para2,
+                    "para3": para3
+                }
+            })
+        })
+
+        const response = await request.json();
+        console.log(response);
+        if (response.success) {
+            setAbout([{ para1, para2, para3 }]);
+            handleAlert("About updated successfully", "success");
+        }
+    }
+
+
+    return (
+        <AboutContext.Provider value={{ about, getAbout, editAboutText }}>
+            {props.children}
+        </AboutContext.Provider>
+    )
+}
+
+export default AboutState