Feat: Adding users Info with some styling fixes

src/App.jsx

@@ -69,26 +69,28 @@ const scrollButtonStyle = {
 };
 function App() {
   return (
-    <Router>
-      <Navbar />
-      <Switch>
-        <Route path="/" exact component={Home} />
-        <Route path="/missing_people" exact component={MissingPeople} />
-        <Route
-          path="/missing_people_details/:id"
-          render={({ match }) => <MissingPerson {...match} match={match} />}
+    <div className="bg-findMe">
+      <Router>
+        <Navbar />
+        <Switch>
+          <Route path="/" exact component={Home} />
+          <Route path="/missing_people" exact component={MissingPeople} />
+          <Route
+            path="/missing_people_details/:id"
+            render={({ match }) => <MissingPerson {...match} match={match} />}
+          />
+          <Route path="/add_post" exact component={PostMissingPerson} />
+          <Route path="/about_us" component={AboutUsPage} />
+          <Route path="/contact_us" exact component={ContactUs} />
+        </Switch>
+        <ScrollUpButton
+          style={scrollButtonStyle}
+          ContainerClassName="ScrollUpButton__Container"
+          TransitionClassName="ScrollUpButton__Toggled"
         />
-        <Route path="/add_post" exact component={PostMissingPerson} />
-        <Route path="/about_us" component={AboutUsPage} />
-        <Route path="/contact_us" exact component={ContactUs} />
-      </Switch>
-      <ScrollUpButton
-        style={scrollButtonStyle}
-        ContainerClassName="ScrollUpButton__Container"
-        TransitionClassName="ScrollUpButton__Toggled"
-      />
-      <Footer />
-    </Router>
+        <Footer />
+      </Router>
+    </div>
   );
 }
 

src/components/AddMissingPersonForm/MissingPersonForm.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import './MissingPersonForm.scss';
 import { arrow, save, cancel } from './ImportImg';
-import {userid, userEmail, userName} from '../navbar/NavBar'
+import {userPost} from '../navbar/NavBar'
 
 import ArrowBack from '../../images/arrow-back.svg';
 import UploadImg from './upload';
@@ -33,11 +33,9 @@ const MissingPersonForm = () => {
 
   const [{ alt, src }, setPreview] = React.useState(initialState);
   const [image, setImage] = useState({});
-  const user={
-    id: userid,
-    name: userName,
-    email: userEmail,
-  }
+  const [user,setUser]=useState(userPost);
+
+
   const fileHandler = event => {
     const { files  } = event.target;
     if (files){
@@ -66,7 +64,7 @@ const MissingPersonForm = () => {
       const url =
         'https://firebasestorage.googleapis.com/v0/b/findme-949ec.appspot.com/o/blank-profile-picture-973460_640.png?alt=media&token=5d1192d1-7ec9-419a-a510-ff5a046d6f36';
       const createdAt = timestamp();
-        collectionRef.add({ url, createdAt , values, user
+        collectionRef.add({ url, createdAt , values,user
        }).then(() => {
           setValues(initialFValues);
           resetFile();
@@ -86,7 +84,7 @@ const MissingPersonForm = () => {
   }, async () => {
       const url = await storageRef.getDownloadURL();
       const createdAt = timestamp();
-      await collectionRef.add({ url, createdAt , values, user
+      await collectionRef.add({ url, createdAt , values,user
   }).then(() => {
       setValues(initialFValues);
       resetFile();
@@ -125,43 +123,22 @@ const MissingPersonForm = () => {
       if (!fieldValues.fristName) {
         temp.fristName = 'This field is required.';
       }
-      if (fieldValues.fristName.length > 0) {
-        temp.fristName = fieldValues.fristName.match(/^[a-zA-Z]+$/)
-          ? ''
-          : 'Please enter only letters.';
-      }
+
     }
 
-    if ('secondName' in fieldValues) {
-      if (fieldValues.secondName.length > 0) {
-        temp.secondName = fieldValues.secondName.match(/^[a-zA-Z]+$/)
-          ? ''
-          : 'Please enter only letters.';
-      }
-    }
-    if ('thirdName' in fieldValues) {
-      if (fieldValues.thirdName.length > 0) {
-        temp.thirdName = fieldValues.thirdName.match(/^[a-zA-Z]+$/)
-          ? ''
-          : 'Please enter only letters.';
-      }
-    }
     if ('surname' in fieldValues) {
       if (!fieldValues.surname) {
         temp.surname = 'This field is required.';
       }
-      if (fieldValues.surname.length > 0) {
-        temp.surname = fieldValues.surname.match(/^[a-zA-Z]+$/)
-          ? ''
-          : 'Please enter only letters.';
-      }
+
     }
     if ('phoneNumber' in fieldValues) {
       var pattern = new RegExp(/^[0-9\b]+$/);
       if (!fieldValues.phoneNumber) {
         temp.phoneNumber = 'This field is required.';
       }
       if (fieldValues.phoneNumber.length > 0) {
+        var pattern = new RegExp(/^[0-9\b]+$/);
         if (pattern.test(fieldValues.phoneNumber)) {
           temp.phoneNumber =
             fieldValues.phoneNumber.length > 8
@@ -172,19 +149,6 @@ const MissingPersonForm = () => {
         }
       }
     }
-    if ('phoneNumber2' in fieldValues) {
-      var pattern = new RegExp(/^[0-9\b]+$/);
-      if (fieldValues.phoneNumber2.length > 0) {
-        if (pattern.test(fieldValues.phoneNumber)) {
-          temp.phoneNumber2 =
-            fieldValues.phoneNumber2.length > 8
-              ? ''
-              : 'Please enter valid phone number.';
-        } else {
-          temp.phoneNumber2 = 'Please enter only number.';
-        }
-      }
-    }
 
     if ('locationOfLoss' in fieldValues)
       temp.locationOfLoss = fieldValues.locationOfLoss
@@ -202,11 +166,7 @@ const MissingPersonForm = () => {
         : 'This field is required.';
 
     if ('job' in fieldValues) {
-      if (fieldValues.job.length > 0) {
-        temp.job = fieldValues.job.match(/^[a-zA-Z]+$/)
-          ? ''
-          : 'Please enter only letters.';
-      }
+
     }
 
     setErrors({
@@ -227,7 +187,7 @@ const MissingPersonForm = () => {
   const handleSubmit = (e) => {
     //console.log(image.name);
     e.preventDefault();
-if(userid!==''){
+if(user.userid!==''){
     if (validate()) {
       //console.log(values);
       handleUpload();

src/components/MissedPersonOtherData/MissedPersonOtherData.jsx

@@ -1,10 +1,7 @@
 import React, {useEffect, useState} from 'react';
 
 import RowOfData from '../RowOfData/RowOfData';
-import {userid, userEmail, userName} from '../navbar/NavBar'
-
-import Data from '../../Data';
-import useFirestore from '../../containers/MissedPersonPage/useFirestore'
+
  const initialFValues = {
     fristName: '',
     secondName: '',
@@ -29,12 +26,12 @@ import useFirestore from '../../containers/MissedPersonPage/useFirestore'
     email:'',
     id:'',
   }
-const MissedPersonOtherData = ({other}) => {
+const MissedPersonOtherData = ({other, userInfo}) => {
   //const { docs,state } = useFirestore(id);
   //const [missedDetails, setDetails]= useState('')
 
   const [missed, setDetail]= useState(initialFValues);
-  //const [user, setUser]= useState(usersInit);
+  const [user, setUser]= useState(usersInit);
 
   useEffect(() => {
 
@@ -44,7 +41,16 @@ const MissedPersonOtherData = ({other}) => {
   //}
 
   }, [other]);
-
+  useEffect(() => {
+
+    //setDetail(other)   
+    setUser(userInfo)   
+
+  //}
+
+  }, [userInfo]);
+
+ //console.log('userinCard', user)
   return (
     <div className="lg:w-2/4 ml-4 lg:ml-0">
       <div className="mb-4">
@@ -78,7 +84,7 @@ const MissedPersonOtherData = ({other}) => {
       </div>
       <div className="flex flex-col text-sm sm:flex-row lg:text-md mb-8 sm:mb-20">
         <div className="flex flex-col justify-center w-full md:w-2/4">
-          <RowOfData label="Name:" data={''} />
+          <RowOfData label="Name:" data={user.name} />
           <RowOfData label="Phone number:" data={missed.phoneNumber} />
         </div>
         <div className="flex flex-col justify-center w-full md:w-2/4">