Interra website

influencerSearch.js

import React, { useState, setState, useReducer } from "react";
import "./influencerSearch.css";
import Chat from "../images/chat.svg";
import homeIcon from "../images/home.svg";
import person from "../images/person.svg";
import search from "../images/search.svg";
import Card from "./card";
import background1 from "../images/back.jpg";
import profile1 from "../images/45.png";
import Users from "./influencers.json";
import Navbar from "./navBar"
import Interra from "../images/logo.png";
import NavbarInfluencer from "./NavbarInfluencer";

function Influencer() {
  return (
    <div className="outer1">
     
      <img src={Interra} className="logo4"></img>
      <button className='logout2'>Logout</button>
      <Navbar/>
      <div className="main">
        {/* <div className="searchbar"> */}
        <img src={search} className="sear"></img>
        <input
          type="text"
          id="header-search"
          placeholder="Search Influencers"
          name="s"
          className="search"
        />
        {/* </div> */}
      </div>

      <div className="row4">

        {Users.map((user) => (
          <div className="cols1">
            <Card key={user.id} Name={user.name}
              Image={user.background}
              Age={user.age}
              Gender={user.gender}
              Location={user.location}
              Followers={user.follower}
              Tags={user.tags}
              Profile={user.pic} />
          </div>
        ))}
      </div>

      <div className="row5">

        {Users.map((user) => (
          <div className="cols1">
            <Card key={user.id} Name={user.name}
              Image={user.background}
              Age={user.age}
              Gender={user.gender}
              Location={user.location}
              Followers={user.follower}
              Tags={user.tags}
              Profile={user.pic} />
          </div>
        ))}
      </div>
    </div>

  );
}

export default Influencer;

login.js

import React, { useState, setState } from 'react';
import "./login.css";
import Interra from "../images/logo.png";
import Illustration from "../images/illustrationLog.png";
import { useNavigate } from 'react-router-dom';
import { signInWithGoogle, db } from '../firebase';
import { collection, addDoc, getDocs } from "firebase/firestore";
import { useEffect } from 'react';

import EmailIcon from '@mui/icons-material/Email';

import { recaptaSetup } from '../firebase'
import { toast } from 'react-toastify';

function Login() {

  const navi = useNavigate();
  const [email, setEmail] = useState("");
  const [phone, setPhone] = useState("");
  const [user, setUser] = useState([]);
  const [data, setData] = useState([]);

  // Collected the user Data from the database
  useEffect(() => {
    const getData = async () => {
      const data = await getDocs(collection(db, "USER_REG"));
      setUser(data.docs.map((doc) => ({ ...doc.data(), id: doc.id })));

    }
    getData();
  }, [])

  function ClickLogo() {
    let path = `/`;
    navi(path);
  }
  const handleClick = () => {

    signInWithGoogle();
    setData({
      Name: localStorage.getItem('Name'), PhotoURL: localStorage.getItem("PhotoURL"),
      Email: localStorage.getItem("Email")
    });

    navi("/influencer-search");
  }

  const handleContinue = async (e) => {
    e.preventDefault();


    //regex for phone number
    const regex = /^[6-9]\d{9}$/;

    if (phone === "" || phone === undefined || phone === null || regex.test(phone) === false) {
      toast.warn('Please Enter Valid Phone Number', {
        position: "top-right",
        autoClose: 2200,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined,
        theme: "light",
      });
      navi("/login");
    }

    else if (user) {
      let flag = false;
      user.map((item) => {
        if (item.email == email) {
          localStorage.setItem("Phone", "+91" + phone);
          localStorage.setItem("Email", email);
          flag = true;
          toast.success('🦄Logged In Successfully', {
            position: "top-right",
            autoClose: 5000,
            hideProgressBar: false,
            closeOnClick: true,
            pauseOnHover: true,
            draggable: true,
            progress: undefined,
            theme: "light",
          });
          navi('/otp');
        }
      }
      )

      if (!flag) {
        toast.warn('Unsuccessfull Please Register First', {
          position: "top-right",
          autoClose: 2200,
          hideProgressBar: false,
          closeOnClick: true,
          pauseOnHover: true,
          draggable: true,
          progress: undefined,
          theme: "light",
        });
        navi("/signup");
      }
    }
    else {
      localStorage.setItem("Phone", "+91" + phone);
      localStorage.setItem("Email", email);
      navi("/otp");
    }

  let myObj = { email: email, phone: phone };

  return (
    <div className="outer">
      <img src={Interra} className="logo" alt='interra-img' onClick={ClickLogo}></img>
      <div className="box">
        <div class="row">
          <div class="column">
            <div className="login1">
              Please enter your phone number to recieve a
              verification code to login and use Interra
            </div>

            <div className="phone">
              <input type="text" placeholder="Phone Number" className="fields" value={phone} onChange={(e) => setPhone(e.target.value)} />
            </div>

            <div className="input-icons1">
              <i className="fa fa-envelope icon">
              </i>
              <input className="fields"
                type="text"
                placeholder="Email" value={email} onChange={(e) => setEmail(e.target.value)} ></input>
            </div>

            <div className="remember">
              <input type="radio" className="check"></input>  Remember me
            </div>
            <div className="loginButton">
              <button className="google" onClick={handleClick}>Sign in with Google</button>
            </div>
            <div className="loginButton" onClick={handleContinue}>
              <button type="submit" className="cont1" >
                Continue
              </button>

            </div>
          </div>

          <div class="column c">
            <img src={Illustration} className="ill1" alt='img-2'></img>
          </div>

        </div>
      </div>
    </div>
  );
}

export default Login

otp.js

import React, { useState } from "react";
import "./otp.css";
import Interra from "../images/logo.png";
import Illustration from "../images/illustrationLog.png";
import { useNavigate } from 'react-router-dom';
import { recaptaSetup } from '../firebase'

function Otp() {

  const navi = useNavigate();

  const [confirmObj, setConfirmObj] = useState({});

  const getOTP = async (e) => {


    e.preventDefault();
    let phone = localStorage.getItem("Phone", phone);
    if (phone === "" || phone === undefined) {
      alert("Please Enter Phone Number");
      navi("/login");
    }
    else {
      try {
        recaptaSetup(phone)
          .then((res) => {
            console.log(res);
            setConfirmObj(res);
            window.res = res;
          })
        // console.log(response);
        // setConfirmObj(response);
      } catch (error) {
        alert(error.message);
        console.log(error.message);
      }
    }
  }
  function ClickLogo(){
    let path = `/`; 
    navi(path);
}

  const handleSubmit = async () => {

    let OTP = one + two + three + four;
    console.log("heree-->", OTP)


    if (localStorage.getItem("phone") === "" || localStorage.getItem("phone") === undefined) {
      alert("Please Enter Phone Number");
      navi("/login");
      return;
    }
    try {
      await confirmObj.confirm(OTP)
      navi("/view-influencer");
    } catch (error) {
      alert(error.message);
      console.log(error.message);
      navi("/otp");
    }

  }

  const [userOTP, setuserOTP] = useState("");
  const [one, setOne] = useState("");
  const [two, setTwo] = useState("");
  const [three, setThree] = useState("");
  const [four, setFour] = useState("");
  const [five, setFive] = useState("");
  const [six, setSix] = useState("");

  return (
    <div className="outer">
      <img src={Interra} className="logo1" onClick={ClickLogo}></img>
      <div className="box1">
        <div class="columns">
          <div class="column">
            <div className="login">
              Please enter the 6 digit code sent to you
            </div>
            <div className="row12">
              <div className="col6">
                <input type="text" className="otp-field" value={one} maxLength='1' onChange={(e) => setOne(e.target.value)} />
              </div>
              <div className="col6">
                <input type="text" className="otp-field" value={two} maxLength='1' onChange={(e) => setTwo(e.target.value)} />
              </div>
              <div className="col6">
                <input type="text" className="otp-field" value={three} maxLength='1' onChange={(e) => setThree(e.target.value)} />
              </div>
              <div className="col6">
                <input type="text" className="otp-field" value={four} maxLength='1' onChange={(e) => setFour(e.target.value)} />
              </div>
              <div className="col6">
                <input type="text" className="otp-field" value={five} maxLength='1' onChange={(e) => setFive(e.target.value)} />
              </div>
              <div className="col6">
                <input type="text" className="otp-field" value={six} maxLength='1' onChange={(e) => setSix(e.target.value)} />
              </div>
            </div>

            <div className="remember1">
              <input type="radio" className="check"></input>  Resend the Verification Code
            </div>

            <div className="loginButton1">
              <button onClick={getOTP} type="submit" className="cont">
                Get OTP
              </button>
              <button onClick={handleSubmit} type="submit" className="cont">
                Verify OTP
              </button>
              <div id='recaptcha-container'>

              </div>
            </div>

          </div>

          <div class="column">
            <img src={Illustration} className="illl1"></img>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Otp;

viewInfluencer.js

import React, { useState } from "react";
import { useLocation, useNavigate, useParams } from "react-router-dom";
import Chat from "../images/chat.svg";
import homeIcon from "../images/home.svg";
import person from "../images/person.svg";
import search from "../images/search.svg";
import Interra from "../images/logo.png";
import Image1 from "../images/jacob.png";
import influencers from '../sampleJSON/trending.json'
import Insta from "../images/instagram.svg";
import Youtube1 from "../images/youtube.svg";
import Twitter from "../images/twitter.svg";
import Navbar from "./navBar";
import {Pagination,Navigation} from 'swiper';
import SwiperCore, { Keyboard, Mousewheel } from "swiper";
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
import 'swiper/swiper.scss'; // core Swiper
import 'swiper/modules/navigation/navigation.scss'; // Navigation module
import 'swiper/modules/pagination/pagination.scss'; // Pagination module
import CircleNotificationsIcon from "@mui/icons-material/CircleNotifications";
import InfluencerCard from "./influencerCard";
import "./viewInfluencer.css";
import NavbarInfluencer from "./NavbarInfluencer";
// import { useState } from "react";
import { useEffect } from "react";

function ViewInfluencer() {
  /*
       Setting the User Details Here
   */
  let influarray = influencers.influencers;
  const navi = useNavigate();
  const [name, setName] = useState("");
  const [photo, setPhoto] = useState("");

  useEffect(() => {
    setName(localStorage.getItem("Name"));
    setPhoto(localStorage.getItem("PhotoURL"));

    //settimeout for 2 seconds
    setTimeout(() => {
      console.log("tst");
    }, 2000);
  }, []);

  function ClickLogo(){
    let path = `/`; 
    navi(path);
}
  const { Name, Profile, Tags } = useParams();
  console.log(Name, Profile, Tags);
  // const location = useLocation()
  // const { Name,Profile,Tags } = location.state

  // console.log(Tags)
  // var mytags = Tags.split(' ');
  const [influencerList, setInfluencerList] = useState([]);

  const handleInputChange = (e) => {
    const { id, value } = e.target;
    if (id === "i-btn") {
      setInfluencerList(influencerList.append(value));
      console.log(influencerList);
    }
  };
  const logout = () => {
    localStorage.clear();
    navi("/");
  };
  return (
    <div className="outer2">
      {/* <NavbarInfluencer/> */}
      <Navbar/>
      {/* <div className="inner1">
        <a href="/" className="H-txt">
          {" "}
          <img src="/images/home.png" className="b1-icon1" alt="home"></img>
        </a>
        <a href="/infsearch" className="H-txt">
          <img
            src="/images/search-coloured.png"
            className="b1-icon2"
            alt="search"
          ></img>
        </a>
        <a href="/chat" className="H-txt">
          {" "}
          <img
            src="/images/message.png"
            className="b1-icon3"
            alt="message"
          ></img>
        </a>
        <a href="/influencer-details" className="H-txt">
          {" "}
          <img
            src="/images/profile-coloured.png"
            className="b1-icon4"
            alt="person"
          ></img>
        </a>
      </div> */}
      

      <img src={Interra} className="logo3" onClick={ClickLogo}></img>
      <button onClick={logout} className="logout3">
        Logout
      </button>
     
      <div className="grid">
        <div className="row">
          <img src="/images/45.png" className="profile_img1 first-third"></img>
          <div className="second-third">
            <div className="name ">Emily Watson</div>
            <div className="details_inf">
              @emilywatson
              <br />
              Female | 69 | New York
            </div>
            <div className="btn-m">
              <button className="btn-msg">Message</button>
            </div>

            <hr />
          </div>
          <div className="third-third">
            <div className="reach">
              <p>
                <b> 5K </b>Reach
              </p>
            </div>
            <div className="reach">
              <p>
                <b className="big-font">14</b> worked with <br /> brands
              </p>
            </div>

            {/* <div className="vi-socialsimg">
            <img src={Insta} className="vi-img3"></img>
            <img src={Youtube1} className="vi-img4"></img>
          </div> */}
          <div className="links">
            <div className="socials">
              <div className="div-around-insta">
                <img src={Youtube1} className="si-img3"></img>
              </div>
              <div className="div-around-insta">
                <img src={Insta} className="si-img3"></img>
                <p className="number">250k</p>
              </div>
              <div className="div-around-insta">
                <img src={Twitter} className="si-img3"></img>
                <p className="number">150k</p>
              </div>
            </div>
            </div>
          </div>
        </div>

        <div className="row">
         
          <div className="column2">
            <div className="i-opt">
              <button
                className="s-btn1"
                id="i-btn"
                onClick={(e) => handleInputChange(e)}
                value="Life Style"
              >
                Life Style
              </button>
              <button
                className="s-btn1"
                id="i-btn"
                onClick={(e) => handleInputChange(e)}
                value="Food"
              >
                Food
              </button>
              <button
                className="s-btn1"
                id="i-btn"
                onClick={(e) => handleInputChange(e)}
                value="Sports"
              >
                Sports
              </button>
              <button
                className="s-btn1"
                id="i-btn"
                onClick={(e) => handleInputChange(e)}
                value="Sports"
              >
                Health
              </button>
              {/* <button className='s-btn1' id='i-btn' onClick={(e) => handleInputChange(e)} value='Health'>Health</button>
                            <button className='s-btn1' id='i-btn' onClick={(e) => handleInputChange(e)} value='Food'>Food</button>
                            <button className='s-btn1' id='i-btn' onClick={(e) => handleInputChange(e)} value='Finance'>Finance</button>
                            <button className='s-btn1' id='i-btn' onClick={(e) => handleInputChange(e)} value='Finance'>Finance</button> */}
            </div>
          </div>
        </div>
        <p className="vi-p1">Recent posts</p>
        <div className="vi-rp">
                  <Swiper
                    modules={[Mousewheel,Keyboard,Pagination,Navigation]}
                    spaceBetween={10}
                    slidesPerView={6}
                    pagination={{ clickable: true }}
                    Mousewheel={{eventTarget:'.vi-rp'}}
                    Keyboard
                    direction='horizontal'
                    Navigation={true}
                    className='vi-rp2'
                    breakpoints={{
                        300: {
                          slidesPerView: 2,
                          spaceBetween: 20,
                        },
                        650: {
                          slidesPerView: 3,
                          spaceBetween: 40,
                        },
                        1024: {
                          slidesPerView: 3,
                          spaceBetween: 20,
                        },
                    }}>
                    {
                        influarray.map((element) => {
                            return <div className="vi-card" key={element.id}>
                                <SwiperSlide>
                                <InfluencerCard username={element.userName} Name={element.Name} profileImg={element.imgUrl} Img={element.imgUrl}/>
                                </SwiperSlide>
                            </div>
                        })
                    }
                  </Swiper>
        </div>
      </div>
    </div>
  );
}

export default ViewInfluencer;