diff --git a/src/App.jsx b/src/App.jsx index b54c0a5..4bafdc5 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -69,26 +69,28 @@ const scrollButtonStyle = { }; function App() { return ( - - - - - - } +
+ + + + + + } + /> + + + + + - - - - - -
- +
+ +
); } diff --git a/src/components/AddMissingPersonForm/MissingPersonForm.jsx b/src/components/AddMissingPersonForm/MissingPersonForm.jsx index 1261c39..1f77802 100644 --- a/src/components/AddMissingPersonForm/MissingPersonForm.jsx +++ b/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,36 +123,14 @@ 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]+$/); @@ -162,6 +138,7 @@ const MissingPersonForm = () => { 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(); diff --git a/src/components/MissedPersonOtherData/MissedPersonOtherData.jsx b/src/components/MissedPersonOtherData/MissedPersonOtherData.jsx index 0874595..c929c64 100644 --- a/src/components/MissedPersonOtherData/MissedPersonOtherData.jsx +++ b/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 (
@@ -78,7 +84,7 @@ const MissedPersonOtherData = ({other}) => {
- +
diff --git a/src/components/Quotes/test.css b/src/components/Quotes/test.css index 475e056..349970f 100644 --- a/src/components/Quotes/test.css +++ b/src/components/Quotes/test.css @@ -1,105 +1,121 @@ -button.bTybGL { - border-radius: 0px; - background-size: cover; - box-shadow: 0 0 2px 0 transparent; - outline: transparent; - color: white; - background-color: transparent; +button.bTybGL, +button.jAkCdf { + border-radius: 0px; + background-size: cover; + box-shadow: 0 0 2px 0 transparent; + outline: transparent; + color: white; + background-color: transparent; } -button.kyJvRZ:disabled { - background-color: transparent; - color: rgb(78, 78, 78); - outline: transparent; - box-shadow: 0 0 2px 0 transparent; - border-color: transparent; - z-index: 1; +button.kyJvRZ:disabled, +button.jAkCdf:disabled { + background-color: transparent; + color: rgb(78, 78, 78); + outline: transparent; + box-shadow: 0 0 2px 0 transparent; + border-color: transparent; + z-index: 1; } -button.bTybGL.rec-arrow-right { - background-image: url(../../../src/images/Rectangle2.svg); - z-index: 1; +button.bTybGL.rec-arrow-right, +button.jAkCdf.rec-arrow-right { + background-image: url(../../../src/images/Rectangle2.svg); + z-index: 1; } -button.bTybGL.rec-arrow-left { - background-image: url(../../../src/images/Rectangle1.svg); - z-index: 1; +button.bTybGL.rec-arrow-left, +button.jAkCdf.rec-arrow-left { + background-image: url(../../../src/images/Rectangle1.svg); + z-index: 1; } button.bTybGL:hover:enabled, -button.bTybGL:focus:enabled { - border-radius: 0px; - background-color: transparent; - box-shadow: 0 0 2px 0 transparent; - border-color: white; - outline: transparent; - border: none; +button.bTybGL:focus:enabled, +button.jAkCdf:hover:enabled, +button.jAkCdf:focus:enabled { + border-radius: 0px; + background-color: transparent; + box-shadow: 0 0 2px 0 transparent; + border-color: white; + outline: transparent; + border: none; } -button.DIuaA { - background-color: #1035ef; - box-shadow: 0 0 1px 2px #138def; - margin-top: 5%; +button.DIuaA, +button.kzPUbE { + background-color: #1035ef; + box-shadow: 0 0 1px 2px #138def; + margin-top: 5%; } button.brcpxa { - background-color: #1035ef; - box-shadow: 0 0 1px 2px #138def; - margin-top: 5%; + background-color: #1035ef; + box-shadow: 0 0 1px 2px #138def; + margin-top: 5%; } button.brcpxa:hover, button.brcpxa:focus { - background-color: #138def; - box-shadow: 0 0 1px 2px #1035ef; + background-color: #138def; + box-shadow: 0 0 1px 2px #1035ef; } -button.bTybGL { - border-radius: 0px; - background-size: cover; - box-shadow: 0 0 2px 0 transparent; - outline: transparent; - color: white; - background-color: transparent; +button.bTybGL, +button.jAkCdf { + border-radius: 0px; + background-size: cover; + box-shadow: 0 0 2px 0 transparent; + outline: transparent; + color: white; + background-color: transparent; } -button.kyJvRZ:disabled { - background-color: transparent; - color: rgb(78, 78, 78); - outline: transparent; - box-shadow: 0 0 2px 0 transparent; - border-color: transparent; - z-index: 1; +button.kyJvRZ:disabled, +button.jAkCdf:disabled { + background-color: transparent; + color: rgb(78, 78, 78); + outline: transparent; + box-shadow: 0 0 2px 0 transparent; + border-color: transparent; + z-index: 1; } -button.bTybGL.rec-arrow-right { - background-image: url(../../../src/images/Rectangle2.svg); - z-index: 1; +button.bTybGL.rec-arrow-right, +button.jAkCdf.rec-arrow-right { + background-image: url(../../../src/images/Rectangle2.svg); + z-index: 1; } -button.bTybGL.rec-arrow-left { - background-image: url(../../../src/images/Rectangle1.svg); - z-index: 1; +button.bTybGL.rec-arrow-left, +button.jAkCdf.rec-arrow-left { + background-image: url(../../../src/images/Rectangle1.svg); + z-index: 1; } button.bTybGL:hover:enabled, -button.bTybGL:focus:enabled { - border-radius: 0px; - background-color: transparent; - box-shadow: 0 0 2px 0 transparent; - border-color: white; - outline: transparent; - border: none; +button.bTybGL:focus:enabled, +button.jAkCdf:hover:enabled, +button.jAkCdf:focus:enabled { + border-radius: 0px; + background-color: transparent; + box-shadow: 0 0 2px 0 transparent; + border-color: white; + outline: transparent; + border: none; } -button.DIuaA { - background-color: #1035ef; - box-shadow: 0 0 1px 2px #138def; - margin-top: 5%; +button.DIuaA, +button.kzPUbE { + background-color: #1035ef; + box-shadow: 0 0 1px 2px #138def; + margin-top: 5%; } button.DIuaA:hover, -button.DIuaA:focus { - background-color: #138def; - box-shadow: 0 0 1px 2px #1035ef; -} +button.DIuaA:focus, +button.kzPUbE:hover, +button.kzPUbE:focus { + background-color: #138def; + box-shadow: 0 0 1px 2px #1035ef; +} \ No newline at end of file diff --git a/src/components/navbar/NavBar.jsx b/src/components/navbar/NavBar.jsx index f933501..162353b 100644 --- a/src/components/navbar/NavBar.jsx +++ b/src/components/navbar/NavBar.jsx @@ -13,26 +13,29 @@ import PostIcon from '../../images/icons/icon-post.svg'; import GoogleIcon from '../../images/icons/google-icon2.svg'; import MenuIcon from '../../images/icons/icon-menu.svg'; import Language from '../../images/icons/icon-language.svg'; -import User from '../../images/icons/icon-user.svg'; +//import User from '../../images/icons/icon-user.svg'; import SignOut from '../../images/icons/icon-signout.svg'; -import {useTranslation} from "react-i18next"; -let userid='' -let userEmail='' - -let userName='' +import { useTranslation } from "react-i18next"; +const userPost = { + id:'', + name:'', + email:'', +} const Navbar = (props) => { // user confign for Sign in wth Google const [currentUser, setCurrentUser] = React.useState(null); - + let unsubscribeFromAuth = null; React.useEffect(() => { unsubscribeFromAuth = auth.onAuthStateChanged((user) => { setCurrentUser(user); console.log('user', user); - userid=user.uid; - userName= user.displayName; - userEmail=user.email; + if (user!==null){ + userPost.id =user.uid; + userPost.name = user.displayName; + userPost.email = user.email; + } }); return () => { this.unsubscribeFromAuth(); @@ -58,180 +61,186 @@ const Navbar = (props) => { return ( + + ) : ( +
  • + +
    • + )} + +
    +
    + ); }; -export {userid,userEmail,userName}; -export default Navbar; +export {userPost}; +export default Navbar; \ No newline at end of file diff --git a/src/containers/HomePage/MissingPeople.jsx b/src/containers/HomePage/MissingPeople.jsx index 8185a06..169dbde 100644 --- a/src/containers/HomePage/MissingPeople.jsx +++ b/src/containers/HomePage/MissingPeople.jsx @@ -26,11 +26,16 @@ const HomePage = ({ missingPeople }) => { {docs && docs.map((item, index) => index < 4 ? ( + - ) : ( - '' - ) - )} + + + ) : + '') + + }

    diff --git a/src/containers/MissedPersonPage/MissedPersonDetails.jsx b/src/containers/MissedPersonPage/MissedPersonDetails.jsx index 2463664..c11a3d7 100644 --- a/src/containers/MissedPersonPage/MissedPersonDetails.jsx +++ b/src/containers/MissedPersonPage/MissedPersonDetails.jsx @@ -3,7 +3,7 @@ import React, {useState, useEffect} from 'react'; import MissedPersonNameAndStatus from '../../components/MissedPersonNameAndStatus/MissedPersonNameAndStatus'; import MissedPeronImage from '../../components/MissedPersonImage/MissedPeronImage'; import MissedPersonOtherData from '../../components/MissedPersonOtherData/MissedPersonOtherData'; -import Data from '../../Data'; +//import Data from '../../Data'; import useFirestore from './useFirestore' const initialFValues = { fristName: '', @@ -24,11 +24,17 @@ const initialFValues = { specialSituotion: '', isLookingFor: false, }; +const usersInit ={ + userid:'', + userName:'', + userEmail:'', +} const MissedPersonDetails = ({match}) => { const { docs,state } = useFirestore(match.params.id); //const [missedDetails, setDetails]= useState('') const [missed, setDetail]= useState(initialFValues); - //const [user, setUser]= useState(usersInit); + + const [user, setUser]= useState(usersInit); @@ -45,7 +51,20 @@ const MissedPersonDetails = ({match}) => { } }, [docs.values]); - console.log(missed) + useEffect(() => { + console.log('id', match.params.id); + //console.log('docs', docs.values); + console.log('state', state); + + //setDetail(getDataById( x, docs)) + + if (state===''){ + //console.log(docs); + setUser(docs.user) + } + + }, [docs.user]); + //console.log('user',user) return ( @@ -61,7 +80,7 @@ const MissedPersonDetails = ({match}) => {

    - +
    diff --git a/src/containers/MissingPeople/MissingPeoplePage.jsx b/src/containers/MissingPeople/MissingPeoplePage.jsx index ed96e5c..6b5759c 100644 --- a/src/containers/MissingPeople/MissingPeoplePage.jsx +++ b/src/containers/MissingPeople/MissingPeoplePage.jsx @@ -113,7 +113,7 @@ const MissingPeoplePage = ({searchInfo, searched}) => { ) ) ) - : + : ( docs && docs .slice(0, visible) .map((item, index) => ( @@ -123,11 +123,12 @@ const MissingPeoplePage = ({searchInfo, searched}) => { )) - )} + + ))} {console.log(visible, data.length)}
    - {visible > docs.length ? ( + {visible > docs.length || visible > dynamicSearch(searchInfo).length ? ( '' ) : (