Merge pull request #61 from Etlas-SCU/ProfileBack

profileBack
Etlas-SCU · Jul 3, 2023 · 9ba3408 · 9ba3408
2 parents 3b5bf5b + 28b7242
commit 9ba3408
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 38 deletions.
diff --git a/src/components/ProfileComp/BestScore/BestScore.js b/src/components/ProfileComp/BestScore/BestScore.js
@@ -1,17 +1,41 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import Style from './BestScore.module.css';
 import { Box, Stack } from '@mui/system';
 import { NavLink } from 'react-router-dom';
 import { Zoom } from 'react-awesome-reveal';
+import { getBestScore } from '../../../repositories/ProfileRepo';
+import MPopUp from '../../PopUp_Message/error/MPopUp';
 
 
 
 export default function BestScore() {
+
+    const [bestScore , setBestScore] = useState(0) ;
+    const [popup , setPopup] = useState(null) ;
+
+    useEffect(() => {
+        async function BestScore(){
+            var result = await getBestScore() ;
+            if(!result.isError){
+                setBestScore(result.body.results) ;
+            }else{
+                setPopup(<MPopUp type="error">Something Wrong</MPopUp>);
+                setBestScore(0) ;
+            }
+        }
+        BestScore() ;
+    })
+
+
+
+
     return (
         <Stack>
             <Box className={Style.score_info}>
                 <Zoom triggerOnce='false' >
-                    <p className={Style.score}> 374 </p>
+                    <p className={Style.score}>
+                        {bestScore}
+                    </p>
                 </Zoom>
                 <p className={Style.score_prag}> is your total score </p>
                 <p className={Style.best_score}> Best Score </p>

diff --git a/src/components/ProfileComp/Informations/Informations.js b/src/components/ProfileComp/Informations/Informations.js
@@ -1,17 +1,20 @@
 import React from 'react';
 import Style from './Informations.module.css';
-import { Box , Stack } from '@mui/system';
+import { Box, Stack } from '@mui/system';
 import ProfileImg from '../../../images/Pngs/Profile2.png';
 import { Form, Formik } from 'formik';
 import { useState } from 'react';
-
 import CreateIcon from '@mui/icons-material/Create';
 import CheckIcon from '@mui/icons-material/Check';
 import { Zoom } from 'react-awesome-reveal';
+import { getUserInfo, editUserInfo } from '../../../repositories/ProfileRepo';
+import { useEffect } from 'react';
+import MPopUp from "../../PopUp_Message/error/MPopUp";
 
 
 export default function Informations() {
-
+    const [popup , setPopup] = useState(null)
+
     const [fullName, setFullName] = useState("Basem Moahmed");
     const [editName, setEditName] = useState(false);
 
@@ -35,11 +38,38 @@ export default function Informations() {
         setAddress(event.target.value);
     };
 
-    const onSave = (values, { resetEdit }) => {
+    const onSave = async (values, { resetEdit }) => {
         console.log(values);
-        resetEdit({ values: "" });
+
+        var editProfile = {
+            full_name: values.fullName,
+            email: values.email,
+            address: values.address,
+            phone_number: values.phone
+        }
+
+        var result = await editUserInfo(editProfile)
+        if (result.isError) {
+            setPopup(<MPopUp type="error">Something Wrong</MPopUp>);
+        } else {
+            resetEdit({ values: "" });
+            setPopup(<MPopUp type="done">Done</MPopUp>);
+        }
     };
-
+
+    useEffect(() => {
+        async function getData() {
+            var result = await getUserInfo()
+            console.log(result.body);
+            if (!result.isError) {
+                setFullName(result.body.full_name);
+                setEmail(result.body.email);
+                setPhone(result.body.phone_number);
+                setAddress(result.body.address);
+            }
+        }
+        getData();
+    }, [])
 
     return (
         <Stack>
@@ -58,10 +88,10 @@ export default function Informations() {
                             />
 
                             {editName ? (
-                                <CheckIcon  className={Style.save_icon1} onClick={() => setEditName(false)} style={{fontSize : 'medium'}}/>
+                                <CheckIcon className={Style.save_icon1} onClick={() => setEditName(false)} style={{ fontSize: 'medium' }} />
 
                             ) : (
-                                <CreateIcon className={Style.edit_icon1} onClick={() => setEditName(true)} style={{fontSize : 'medium'}} />
+                                <CreateIcon className={Style.edit_icon1} onClick={() => setEditName(true)} style={{ fontSize: 'medium' }} />
                             )}
 
                             <label className={Style.info_lab}>E-mail</label>
@@ -75,10 +105,10 @@ export default function Informations() {
                             />
 
                             {editEmail ? (
-                                <CheckIcon className={Style.save_icon2} onClick={() => setEditEmail(false)} style={{fontSize : 'medium'}} />
+                                <CheckIcon className={Style.save_icon2} onClick={() => setEditEmail(false)} style={{ fontSize: 'medium' }} />
 
                             ) : (
-                                <CreateIcon className={Style.edit_icon2} onClick={() => setEditEmail(true)} style={{fontSize : 'medium'}}/>
+                                <CreateIcon className={Style.edit_icon2} onClick={() => setEditEmail(true)} style={{ fontSize: 'medium' }} />
                             )}
 
                             <label className={Style.info_lab}>Password</label>
@@ -92,10 +122,10 @@ export default function Informations() {
                             />
 
                             {editPassword ? (
-                                <CheckIcon  className={Style.save_icon3} onClick={() => setEditPassword(false)} style={{fontSize : 'medium'}}/>
+                                <CheckIcon className={Style.save_icon3} onClick={() => setEditPassword(false)} style={{ fontSize: 'medium' }} />
 
                             ) : (
-                                <CreateIcon  className={Style.edit_icon3} onClick={() => setEditPassword(true)} style={{fontSize : 'medium'}} />
+                                <CreateIcon className={Style.edit_icon3} onClick={() => setEditPassword(true)} style={{ fontSize: 'medium' }} />
                             )}
 
                             <label className={Style.info_lab} >Phone Number</label>
@@ -108,10 +138,10 @@ export default function Informations() {
                                 readOnly={!editPhone}
                             />
                             {editPhone ? (
-                                <CheckIcon className={Style.save_icon4} onClick={() => setEditPhone(false)} style={{fontSize : 'medium'}}/>
+                                <CheckIcon className={Style.save_icon4} onClick={() => setEditPhone(false)} style={{ fontSize: 'medium' }} />
 
                             ) : (
-                                <CreateIcon  className={Style.edit_icon4} onClick={() => setEditPhone(true)} style={{fontSize : 'medium'}}/>
+                                <CreateIcon className={Style.edit_icon4} onClick={() => setEditPhone(true)} style={{ fontSize: 'medium' }} />
                             )}
 
                             <label className={Style.info_lab}>Address</label>
@@ -124,10 +154,10 @@ export default function Informations() {
                                 readOnly={!editAddress}
                             />
                             {editAddress ? (
-                                <CheckIcon  className={Style.save_icon5} onClick={() => setEditAddress(false)} style={{fontSize : 'medium'}} />
+                                <CheckIcon className={Style.save_icon5} onClick={() => setEditAddress(false)} style={{ fontSize: 'medium' }} />
 
                             ) : (
-                                <CreateIcon  className={Style.edit_icon5} onClick={() => setEditAddress(true)} style={{fontSize : 'medium'}}/>
+                                <CreateIcon className={Style.edit_icon5} onClick={() => setEditAddress(true)} style={{ fontSize: 'medium' }} />
                             )}
                         </Form>
                     </Formik>
@@ -137,9 +167,9 @@ export default function Informations() {
                 </Box>
             </Box>
             <Zoom triggerOnce='false'>
-            <Box className={Style.save}>
-                <button type='submit' className={Style.btn_save}>Save</button>
-            </Box>
+                <Box className={Style.save}>
+                    <button type='submit' className={Style.btn_save}>Save</button>
+                </Box>
             </Zoom>
         </Stack>
     )

diff --git a/src/helpers/apiService.js b/src/helpers/apiService.js
@@ -1,6 +1,6 @@
 import axios from 'axios';
 
-const url = "http://20.19.184.149:8000";
+const url = "https://api.etlas.tech";
 
 function getHeaders() {
   var access = localStorage.getItem("access");

diff --git a/src/pages/ContactUs/ContactUS.js b/src/pages/ContactUs/ContactUS.js
@@ -11,27 +11,35 @@ import PopUp from '../../components/PopUp_Message/PopUp';
 import { Field, Formik, Form, ErrorMessage } from 'formik'
 import * as Yup from 'yup'
 
-const initialValues = {
-    fullname: "",
-    email: "",
-    subject: "",
-    message: "",
-};
+// const initialValues = {
+//     fullname: "",
+//     email: "",
+//     subject: "",
+//     message: "",
+// };
 
-const validationSchema = Yup.object({
-    fullname: Yup.string().required('required'),
-    email: Yup.string().email('invalid email format').required('required'),
-    subject: Yup.string().required('required')
-})
 
-const onSubmit = (values, { resetForm }) => {
-    console.log(values);
-    resetForm({ values: "" });
-};
 
 export default function ContactUS() {
+
+    const [fullName, setFullName] = useState("");
+    const [email, setEmail] = useState("");
+    const [subject, setSubject] = useState("");
+    const [message, setMessage] = useState("");
+
     const [buttonPopup , setButtonPopup] = useState(false) ; 
 
+    const validationSchema = Yup.object({
+        fullname: Yup.string().required('required'),
+        email: Yup.string().email('invalid email format').required('required'),
+        subject: Yup.string().required('required')
+    })
+
+    const onSubmit = (values, { resetForm }) => {
+        console.log(values);
+        resetForm({ values: "" });
+    };
+
     return (
         <Stack className={Style.contactUs} direction='row'>
             <Box className={Style.sec1}>
@@ -40,7 +48,7 @@ export default function ContactUS() {
                     <h1 className={Style.contact_title}>Contact Us</h1>
                     <Box className={Style.contact} >
                         <Formik
-                            initialValues={initialValues}
+                            // initialValues={initialValues}
                             validationSchema={validationSchema}
                             onSubmit={onSubmit}
                         >
@@ -54,6 +62,7 @@ export default function ContactUS() {
                                                 placeholder='Full Name'
                                                 id='fullname'
                                                 name='fullname'
+                                                onChange={(fullName) => setFullName(fullName)}
                                             />
                                             <ErrorMessage name='fullname'>
                                                 {(e) => <div className={Style.error}>{e}</div>}
@@ -66,6 +75,7 @@ export default function ContactUS() {
                                                 placeholder='Your Email'
                                                 id='email'
                                                 name='email'
+                                                onChange={(email) => setEmail(email)}
                                             />
                                             <ErrorMessage name='email'>
                                                 {(e) => <div className={Style.error}>{e}</div>}
@@ -79,6 +89,7 @@ export default function ContactUS() {
                                         id='subject'
                                         name='subject'
                                         className={Style.subject}
+                                        onChange={(subject) => setSubject(subject)}
                                     />
                                     <ErrorMessage name='subject'>
                                         {(e) => <div className={Style.error}>{e}</div>}
@@ -90,6 +101,7 @@ export default function ContactUS() {
                                         id='message'
                                         name='message'
                                         className={Style.message}
+                                        onChange={(message) => setMessage(message)}
                                     />
                                 </Stack>
                             </Form>

diff --git a/src/repositories/ContactUsRepo.js b/src/repositories/ContactUsRepo.js
@@ -0,0 +1,7 @@
+// import {Post} from '../helpers/apiService'
+
+
+// export async function ContactUs (body){
+//     const result = await Post("contact-us/message/" , JSON.stringify(body))
+
+// }
diff --git a/src/repositories/ProfileRepo.js b/src/repositories/ProfileRepo.js
@@ -0,0 +1,20 @@
+import {GET , Patch} from '../helpers/apiService' ;
+
+export async function getUserInfo(){
+    const result = await GET("users/") ;
+    return result ;
+}
+
+export async function editUserInfo(body){
+  const result = await Patch("users/" , JSON.stringify(body));
+  return {
+    isError: result.isError,
+    body: result.body,
+  };
+}
+
+export async function getBestScore(){
+  const result = await GET("users/total-best-score/") ;
+  return result ;
+}
+