<repo_name>vivekchauhan12000/frontend_react<file_sep>/src/components/DonorForm.js
import React,{useState} from 'react'
import {useHistory} from "react-router-dom"
import Axios from "axios"
 
const url="https://apiplasma.herokuapp.com/api/Donor"

function DonorForm() {
  let history = useHistory();
  
  const[data,setData]=useState({
    name:"",
    email:"",
    phone:"",
    city:"",
    address:"",
    bloodType:"",
    covidStatus:"",
    hadCovid:""
  });
  const handleOnSubmit=(e)=>{
    
    const newData={...data}
    newData[e.target.id]=e.target.value
    setData(newData);
    console.log(newData);
  }

  const onsubmit=(e)=>{
    e.preventDefault();
    Axios.post(url,{
     name:data.name,
     location:data.city,
     address:data.address,
     phone:data.phone,
     email:data.email,
     bloodType:data.bloodType,
     covidStatus:data.covidStatus,
     hadCovid:data.hadCovid
    }).then(res=>{
      console.log(res.data);
    });
    setData({ name:"",
    email:"",
    phone:"",
    city:"",
    address:"",
    bloodType:"",
    covidStatus:"",
    hadCovid:""})
    history.push('/')
  }
  return (
    <div className="container">
      <form>
        <h2>Donor Form</h2>
  <div className="mb-3">
   <h5>Email</h5>
    <input type="email" onChange={(e)=>handleOnSubmit(e)} value={data.email} className="form-control" id="email"/>
   
  </div>
  <div className="mb-3">
   <h5>Name</h5>
    <input type="text" onChange={(e)=>handleOnSubmit(e)} value={data.name} className="form-control" id="name"/>
  </div>
 
  <div className="mb-3">
   <h5>Number</h5>
    <input type="number" onChange={(e)=>handleOnSubmit(e)} value={data.phone} className="form-control" id="phone"/>
  </div>

  <div className="mb-3">
  <h5>City</h5>
    <input type="text" onChange={(e)=>handleOnSubmit(e)}  value={data.city} className="form-control" id="city"/>
  </div>

  <div className="mb-3">
  <h5>address</h5>
    <input type="text" onChange={(e)=>handleOnSubmit(e)}  value={data.address} className="form-control" id="address"/>
  </div>

  <div className="input-group mb-3">
  <label class="input-group-text">Blood Group</label>
  <select class="form-select" id="bloodType" required onChange={(e)=>handleOnSubmit(e)} value={data.bloodType}>
    <option selected>Blood Group</option>
    <option value="A+">A+</option>
    <option value="A-">A-</option>
    <option value="B+">B+</option>
    <option value="B-">B-</option>
    <option value="AB+">AB+</option>
    <option value="AB-">AB-</option>
    <option value="O+">O+</option>
    <option value="O-">O-</option>
   
  </select>
  </div>

  <div class="input-group mb-3">
  <label class="input-group-text">covidStatus</label>
  <select class="form-select" id="covidStatus" required onChange={(e)=>handleOnSubmit(e)} value={data.covidStatus}>
    <option selected>covidStatus</option>
    <option value="1">Yes</option>
    <option value="0">No</option>
   
  </select>
</div>

  

  <div class="input-group mb-3">
  <label class="input-group-text">Had covid</label>
  <select class="form-select" id="hadCovid" required onChange={(e)=>handleOnSubmit(e)} value={data.hadCovid}>
    <option selected>had covid in past</option>
    <option value="1">Yes</option>
    <option value="0">No</option>
   
  </select>
</div>

  <button type="submit" className="btn btn-primary" onClick={onsubmit}>Submit</button>
</form>


    </div>
  )
}

export default DonorForm
<file_sep>/src/Pages/Home.js
import React from 'react'

import DonorTab from "../components/DonorTab"
import Regist from "../components/RegiTab"
import Footer from "../components/Footer"

function Home() {
  return (
    <div className="container">
    <div className="container row justify-content-center">
     <div className="col"><DonorTab/></div> 
     <div className="col"><Regist/></div>
    
    </div>
     <Footer/>
    </div>
  )
}

export default Home
<file_sep>/src/components/RegiTab.js
import React from 'react'
import {useHistory} from "react-router-dom"

function RegiTab() {
  let history = useHistory();
 const redirect=()=>{
  
  history.push('/DonorDetails');
 }
  return (
    <div className="container">
       
      
      <div className="bg-light p-5 rounded">
        <h1>Register</h1>
        <p className="lead">Your Plasma donation can save someone life</p>
       
        
        <button className="btn btn-lg btn-danger" onClick={redirect}>Register as Donor»</button>
      </div>
    
    
        
    </div>
  )
}

export default RegiTab
<file_sep>/src/components/DonorList.js
import React,{useState,useEffect} from 'react'
import Card from "../components/ListCard";




export default function DonorList() {

  const [data, setData] = useState([]);
  const [bloodGroup,setbloodGroup]=useState([""]);
  const [city,setCity]=useState([""]);

  const handleOnSubmit=(e)=>{
   const newData=e.target.value
    setbloodGroup(newData);
   }

   const Searchcity=(e)=>{
    const newData=e.target.value
    setCity(newData);
   }
   


  useEffect( async () => {
    const response = await fetch("https://apiplasma.herokuapp.com/api/Donor");
    const data = await response.json();
    console.log(data);
   await setData(data);
    
    
  },[]);
  return (
    <div className="container">
    <h2>Donor Search</h2> 
       <div>
       <div className="input-group mb-3">
       <label className="input-group-text">Search
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
       </label>
  <select className="form-select" id="covidStatus" required onChange={(e)=>handleOnSubmit(e)} value={bloodGroup}>
    <option selected value="">Blood Group</option>
    <option value="A+">A+</option>
    <option value="A-">A-</option>
    <option value="B+">B+</option>
    <option value="B-">B-</option>
    <option value="AB+">AB+</option>
    <option value="AB-">AB-</option>
    <option value="O+">O+</option>
    <option value="O-">O-</option>

  </select>
        <input type="text" placeholder="City" onChange={(e)=>Searchcity(e)} value={city} className="form-control" aria-label="Text input with dropdown button" />
</div>

         </div> 
    { data.filter((val)=>{
        if(bloodGroup==""){
          return val
        }else if (val.bloodType.toLowerCase()==bloodGroup.toLowerCase()){
          return val
        }
      }).filter((val)=>{
        if(city==""){
          return val
        }else if (val.location.toLowerCase()==city.toLowerCase()){
          return val
        }
      }).map((Donor) => (
              <div key={Donor._id}> <Card name={Donor.name} loc={Donor.location} blood={Donor.bloodType} contact={Donor.phone}/></div>
            ))}
    </div>
  )
}
<file_sep>/src/components/Header.js
import React from 'react'
import {BrowserRouter as Router,Link} from "react-router-dom"


function Header() {
  return (
    <Router>
    <div style={{background:"#0093E9",
backgroundImage: "linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)"
}}>
      <nav className="navbar navbar-expand-md navbar-light mb-4">
  <div className="container-fluid">
    <a className="navbar-brand" style={{color:"white"}} href="/">Logo Name</a>
    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span className="navbar-toggler-icon" />
    </button>
    <div className="collapse navbar-collapse" id="navbarCollapse">
      <ul className="navbar-nav me-auto mb-2 mb-md-0">
       
        
        <li className="nav-item">
        <a style={{color:"white"}} className="nav-link active" aria-current="page" href="/Donorlist">
          <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-droplet" viewBox="0 0 16 16">
          <path fill-rule="evenodd" d="M7.21.8C7.69.295 8 0 8 0c.109.363.234.708.371 1.038.812 1.946 2.073 3.35 3.197 4.6C12.878 7.096 14 8.345 14 10a6 6 0 0 1-12 0C2 6.668 5.58 2.517 7.21.8zm.413 1.021A31.25 31.25 0 0 0 5.794 3.99c-.726.95-1.436 2.008-1.96 3.07C3.304 8.133 3 9.138 3 10a5 5 0 0 0 10 0c0-1.201-.796-2.157-2.181-3.7l-.03-.032C9.75 5.11 8.5 3.72 7.623 1.82z"/>
          <path fill-rule="evenodd" d="M4.553 7.776c.82-1.641 1.717-2.753 2.093-3.13l.708.708c-.29.29-1.128 1.311-1.907 2.87l-.894-.448z"/>
          </svg>Plasma Donor</a>
        </li>
       
        <li className="nav-item">
          <a style={{color:"white"}} className="nav-link active" aria-current="page" href="/DonorDetails">
          <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-person-plus-fill" viewBox="0 0 16 16">
          <path d="M1 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
          <path fill-rule="evenodd" d="M13.5 5a.5.5 0 0 1 .5.5V7h1.5a.5.5 0 0 1 0 1H14v1.5a.5.5 0 0 1-1 0V8h-1.5a.5.5 0 0 1 0-1H13V5.5a.5.5 0 0 1 .5-.5z"/>
          </svg>
              Donate Plasma</a>
        </li>

        <li className="nav-item">
          <a style={{color:"white"}} className="nav-link active" aria-current="page" href="/ContactUs">
          <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-person-lines-fill" viewBox="0 0 16 16">
         <path d="M6 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-5 6s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H1zM11 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4zm2 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2zm0 3a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1h-2z"/>
        </svg>
            Contact Us</a>
        </li>

      </ul>
      
    </div>
  </div>
</nav>

    </div>
    </Router>
  )
}

export default Header
<file_sep>/src/components/DonorTab.js
import React from 'react'
import {useHistory} from "react-router-dom"

function DonorTab() {

  let history = useHistory();
 const redirect=()=>{
  
  history.push('/Donorlist');
 }
  return (
    <div className="container">
      
  <div className="bg-light p-5 rounded">
    <h1>Plasma Donor</h1>
    <p className="lead">Seach for donor near you location and contact it by given detail.Please register your Patient by filling the form given in link</p>
    <button className="btn btn-lg btn-primary" onClick={redirect}>Search For Donor »</button>
  </div>


    </div>
  )
}

export default DonorTab
<file_sep>/src/App.js
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

import Header from "./components/Header"
import Home from "./Pages/Home"
import Footer from "./components/Footer"
import DonorForm from "./components/DonorForm"
import DonorList from "./components/DonorList"
import ContactUs from "./Pages/Contact"
import PatientForm from "./components/PatientForm"

import './App.css';

function App() {
  return (
    <Router>
    
    <div className="App">
     <Header/>
    
     <Switch>
          <Route exact path="/" component={Home}/>
            
          <Route exact path="/DonorDetails" component={DonorForm} />
         
         
          <Route exact path="/Donorlist" component={PatientForm}/>
          
          <Route exact path="/ContactUs" component={ContactUs}/>
         
         <Route exact path="/Donors" component={DonorList}/>
        </Switch>

   
    </div>
    </Router>
  );
}

export default App;
<file_sep>/src/components/PatientForm.js
import React,{useState} from 'react'
import {useHistory} from "react-router-dom"
import Axios from "axios"
import Popup from 'reactjs-popup';
 
const url="https://apiplasma.herokuapp.com/api/Patient"

function PatientForm() {

  let history = useHistory();
   //login logic

  const[login,setlogin]=useState("");
  const [islogin,setis]=useState("false");

  const handleOnLogin=(e)=>{
     const newLogin=e.target.value
    setlogin(newLogin);
    console.log(newLogin);
  }
  
  const  onlogin=(e)=>{
    e.preventDefault();

    try {
      Axios.post("https://apiplasma.herokuapp.com/api/Registered/login",{
     phone:login,
     }).then(res=>{
        setis(res.data);
        if(res.data=="true"){
          history.push("/Donors")
        }else{
          history.push("/")
        }
      console.log(res.data);
    })

      
      
    } catch (error) {
      console.log(error);
    }
  }
    
  //OTP sending
  
  const [OTP,setOTP]=useState("");

  const handleOnOTP=(e)=>{
     const newOTPcheck=e.target.value
    setOTP(newOTPcheck);
    console.log(newOTPcheck);
  }


  const  onOTP=(e)=>{
    e.preventDefault();

    try {
      Axios.post("https://api.globalshapersjaipur.com/otp/validate",{
        "phone":String(data.phone),
        "otp":String(OTP)
     },{headers}).then(res=>{
        console.log(res.status);
        if (res.status==200) {
          
          try {
            Axios.post("https://apiplasma.herokuapp.com/api/Registered",{
           phone:data.phone,
           }).then(res=>{
              console.log(res.data);
          })
      
            
            
          }catch (error) {
            console.log(error);
          }
        }

         else {
          console.log("Please try again")
          
        }
    })

      
      
    } catch (error) {
      console.log(error);
    }
  }


  //form data
  const[data,setData]=useState({
    name:"",
    age:"",
    sex:"",
    city:"",
    Hospital:"",
    phone:"",
    email:"",
   bloodType:""
  });
  const handleOnSubmit=(e)=>{
    
    const newData={...data}
    newData[e.target.id]=e.target.value
    setData(newData);
    console.log(newData);
  }

  const onsubmit=(e)=>{
    e.preventDefault();
    Axios.post(url,{
     name:data.name,
     
     Hospital:data.Hospital,
     phone:data.phone,
    
     bloodType:data.bloodType,
     
    }).then(res=>{
      console.log(res.data);
    });

    
   // history.push('/Donors')
  }
 const otpurl="https://api.globalshapersjaipur.com/otp/generate"
 const headers = {
  'Content-Type': 'application/json',
  'Accept':'*/*'
};
 
  
 const otpSend=()=>{ Axios.post(
  otpurl,
  {
    "phone":String(data.phone)
     
  },
  {headers}
  ).then(response => {
      console.log("Success ========>", response);
  })
  .catch(error => {
      console.log("Error ========>", error);
  }
)
}
    
  return (
    <div>
       <div className="container">
       
       <form className="bg-light p-5 rounded">
       <h2>Sign in with number</h2>
  <div className="col-auto">
    <label className="visually-hidden">Phone Number</label>
    <input type="Number" className="form-control" id="Phone" onChange={(e)=>handleOnLogin(e)} value={login} placeholder="Registered Phone number"/>
  </div>
  <div className="col-auto">
    <button type="submit" onClick={onlogin} className="btn btn-primary mb-3">
    
      Sign in
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-in-right" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M6 3.5a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-2a.5.5 0 0 0-1 0v2A1.5 1.5 0 0 0 6.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-8A1.5 1.5 0 0 0 5 3.5v2a.5.5 0 0 0 1 0v-2z"/>
    <path fill-rule="evenodd" d="M11.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H1.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
    </svg>
      </button>
  </div>
</form>



      <form>
        <h2>Register</h2>
   
  <div className="mb-3">
   <h5>Name</h5>
    <input type="text" required onChange={(e)=>handleOnSubmit(e)} required value={data.name} className="form-control" id="name" required/>
  </div>

  
 
  <div className="mb-3">
   <h5>Number</h5>
    <input type="number"  onChange={(e)=>handleOnSubmit(e)} required value={data.phone} className="form-control" id="phone" required/>
  </div>


  <div className="mb-3">
  <h5>Hospital</h5>
    <input type="text"  onChange={(e)=>handleOnSubmit(e)} required  value={data.Hospital} className="form-control" id="Hospital" required/>
  </div>

  <div className="mb-3">
  <h5>BloodType</h5>
    <input type="text" onChange={(e)=>handleOnSubmit(e)} required value={data.bloodType} className="form-control" id="bloodType" required/>
  </div>

  
  <button type="submit" className="btn btn-primary" onClick={onsubmit}>Register
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award" viewBox="0 0 16 16">
  <path d="M9.669.864 8 0 6.331.864l-1.858.282-.842 1.68-1.337 1.32L2.6 6l-.306 1.854 1.337 1.32.842 1.68 1.858.282L8 12l1.669-.864 1.858-.282.842-1.68 1.337-1.32L13.4 6l.306-1.854-1.337-1.32-.842-1.68L9.669.864zm1.196 1.193.684 1.365 1.086 1.072L12.387 6l.248 1.506-1.086 1.072-.684 1.365-1.51.229L8 10.874l-1.355-.702-1.51-.229-.684-1.365-1.086-1.072L3.614 6l-.25-1.506 1.087-1.072.684-1.365 1.51-.229L8 1.126l1.356.702 1.509.229z"/>
  <path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1 4 11.794z"/>
</svg>
  </button>
  

  
  
</form>

<div style={{margin:"10px"}}>
<Popup trigger={<button type="submit" className="btn btn-primary">Number Verification  
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-sim-fill" viewBox="0 0 16 16">
  <path d="M5 4.5a.5.5 0 0 1 .5-.5h2v2H5V4.5zM8.5 6V4h2a.5.5 0 0 1 .5.5V6H8.5zM5 7h6v2H5V7zm3.5 3H11v1.5a.5.5 0 0 1-.5.5h-2v-2zm-1 0v2h-2a.5.5 0 0 1-.5-.5V10h2.5z"/>
  <path d="M3.5 0A1.5 1.5 0 0 0 2 1.5v13A1.5 1.5 0 0 0 3.5 16h9a1.5 1.5 0 0 0 1.5-1.5V3.414a1.5 1.5 0 0 0-.44-1.06L11.647.439A1.5 1.5 0 0 0 10.586 0H3.5zm2 3h5A1.5 1.5 0 0 1 12 4.5v7a1.5 1.5 0 0 1-1.5 1.5h-5A1.5 1.5 0 0 1 4 11.5v-7A1.5 1.5 0 0 1 5.5 3z"/>
</svg>
  </button>} position="right center">
   
    <div>
      <form>
      <h5>OTP</h5>
    <input type="number" className="form-control" id="OTP" onChange={(e)=>handleOnOTP(e)} value={OTP}/>
    <button type="submit" className="btn btn-primary" onClick={onOTP}>Submit</button>
    </form>
  </div>
  </Popup>

  <button className="btn btn-primary"  onClick={otpSend}>Send OTP
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-phone" viewBox="0 0 16 16">
  <path d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/>
  <path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
  </svg>
  </button>
  </div>
    </div>
   

    </div>
  )
}

export default PatientForm
