integrated apis

package.json

@@ -38,9 +38,11 @@
     "@coreui/react-chartjs": "^2.0.0",
     "@coreui/utils": "^1.3.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.5",
+    "axios": "^0.25.0",
     "chart.js": "^3.6.0",
     "classnames": "^2.3.1",
     "core-js": "^3.19.1",
+    "country-state-city": "^3.0.1",
     "enzyme": "^3.11.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",

src/auth.js

@@ -0,0 +1,17 @@
+export const isAutheticated = () => {
+    if (typeof window == "undefined") {
+        return true;
+    }
+    if (localStorage.getItem("auth")) {
+
+        return JSON.parse(localStorage.getItem("auth"));
+    } else {
+        return false;
+    }
+};
+
+export const signout = () => {
+    localStorage.removeItem("auth");
+
+    return true;
+};

src/index.js

@@ -6,6 +6,18 @@ import App from './App'
 import * as serviceWorker from './serviceWorker'
 import { Provider } from 'react-redux'
 import store from './store'
+import axios from 'axios'
+
+const setupAxios = () => {
+  axios.defaults.baseURL = "https://api-courier-vendor.herokuapp.com/"
+  axios.defaults.headers = {
+    'Cache-Control': 'no-cache,no-store',
+    'Pragma': 'no-cache',
+    'Expires': '0',
+  };
+};
+
+setupAxios();
 
 ReactDOM.render(
   <Provider store={store}>

src/views/AirwaysBill/AirwaysBill.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
     CAvatar,
     CButton,
@@ -19,8 +19,28 @@ import {
     CTableRow,
 } from '@coreui/react'
 import { Link } from 'react-router-dom';
+import { isAutheticated } from 'src/auth';
+import axios from 'axios';
 
 const AirwaysBill = () => {
+    const { token } = isAutheticated();
+    console.log(token);
+
+    useEffect(() => {
+        const getData = async () => {
+            const res = await axios.get('/api/vendor/view', {
+                headers: {
+                    "Access-Control-Allow-Origin": "*",
+                    "Content-type": "Application/json",
+                    "Authorization": `Bearer ${token}`
+                }
+            });
+            console.log(res.data);
+        }
+        getData();
+
+    }, []);
+
     return <div>
 
         <CButton color="dark">+ Upload Spreadsheet</CButton>

src/views/Courier/AddCourier.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
     CButton,
     CCard,
@@ -14,8 +14,50 @@ import {
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
 import { cil3d } from '@coreui/icons'
+import { useState } from 'react';
+import axios from 'axios';
+import { isAutheticated } from 'src/auth';
 
 const AddCourier = () => {
+    const [id, setId] = useState(0);
+    const [date, setDate] = useState('')
+    const [courier, setCourier] = useState('')
+    const { token } = isAutheticated();
+
+    useEffect(() => {
+        const getDate = () => {
+            let today = new Date();
+            let dd = String(today.getDate()).padStart(2, '0');
+            let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
+            let yyyy = today.getFullYear();
+
+            today = mm + '/' + dd + '/' + yyyy;
+            return today
+        }
+
+
+        const generateCode = () => {
+            setId(Math.round(Math.random() * 1000000000))
+        }
+        generateCode()
+        setDate(getDate())
+    }, [])
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setCourier(value)
+    }
+    const handleClick = async () => {
+        let res = await axios.post('/api/courier/add', { name: courier, addedOn: date, UID: id }, {
+            headers: {
+                "Authorization": `Bearer ${token}`
+            }
+        })
+        if (res) {
+            console.log(res.data);
+        }
+    }
+
+
     return <div className="bg-light min-vh-100 d-flex flex-row align-items-start">
         <CContainer>
             <CRow className="justify-content-start">
@@ -25,12 +67,12 @@ const AddCourier = () => {
                         <p className="text-medium-emphasis">Fill the fields and submit to add a new vendor</p>
                         <CRow className=' flex-row align-items-center'>
                             <CCol md={2} ><h5>Unique ID:</h5></CCol>
-                            <CCol><h6>5324756898</h6></CCol>
+                            <CCol><h6>{id}</h6></CCol>
                             <p className="text-medium-emphasis">(auto-generated)</p>
                         </CRow>
                         <CRow className=' flex-row align-items-center'>
                             <CCol md={2} ><h5>Added On:</h5></CCol>
-                            <CCol><h6>5324756898</h6></CCol>
+                            <CCol><h6>{date}</h6></CCol>
                             <p className="text-medium-emphasis">(auto-generated)</p>
                         </CRow>
 
@@ -41,10 +83,11 @@ const AddCourier = () => {
                             <CFormInput
                                 type="text"
                                 placeholder="Courier Name"
-                                autoComplete="courier"
+                                name="courier"
+                                onChange={handleChange}
                             />
                         </CInputGroup>
-                        <CButton color="dark" className="px-4">
+                        <CButton color="dark" className="px-4" onClick={handleClick}>
                             Submit
                         </CButton>
 

src/views/Courier/Courier.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
     CAvatar,
     CButton,
@@ -19,8 +19,27 @@ import {
     CTableRow,
 } from '@coreui/react'
 import { Link } from 'react-router-dom';
+import { isAutheticated } from 'src/auth';
+import axios from 'axios';
 
 const Courier = () => {
+    const { token } = isAutheticated();
+    console.log(token);
+
+    useEffect(() => {
+        const getData = async () => {
+            const res = await axios.get('/api/vendor/view', {
+                headers: {
+                    "Access-Control-Allow-Origin": "*",
+                    "Content-type": "Application/json",
+                    "Authorization": `Bearer ${token}`
+                }
+            });
+            console.log(res);
+        }
+        getData();
+
+    }, []);
     return <div>
         <Link to='/addcourier'>
             <CButton color="dark">+Add New</CButton>

src/views/Vendor/AddVendor.js

@@ -8,14 +8,72 @@ import {
     CContainer,
     CForm,
     CFormInput,
+    CFormSelect,
     CInputGroup,
     CInputGroupText,
     CRow,
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
+import { Country, State, City } from 'country-state-city';
 import { cilGlobeAlt, cilLocationPin, cilLockLocked, cilUser } from '@coreui/icons'
 import { Link } from 'react-router-dom';
+import { useState } from 'react';
+import { useEffect } from 'react';
+import axios from 'axios';
+import { getAllStates, getStatesOfCountry, getCitiesOfCountry } from 'country-state-city/dist/lib/state';
+import { isAutheticated } from 'src/auth';
+
+
 const AddVendor = () => {
+    const [vendor, setVendor] = useState({
+        vendor_name: '',
+        city: '',
+        state: 'Andhra Pradesh',
+        country: 'India',
+        address_1: '',
+        address_2: '',
+    })
+    const { token } = isAutheticated();
+    const [states, setStates] = useState([]);
+    const [cities, setCities] = useState([]);
+    const [code, setCode] = useState(0);
+    const [countryCode, setCountryCode] = useState('IN')
+    const [stateCode, setStateCode] = useState('AP')
+    const countries = Country.getAllCountries();
+    const allStates = State.getAllStates();
+    // const Code = Math.round(Math.random() * 1000000000);
+    const handleChange = (e) => (event) => {
+        setVendor({ ...vendor, [e]: event.target.value });
+    };
+
+    useEffect(() => {
+        const generateCode = () => {
+            setCode(Math.round(Math.random() * 1000000000))
+        }
+        generateCode()
+    }, [])
+    useEffect(() => {
+        const ccode = countries.find(item => item.name === vendor.country)
+        const scode = allStates.find(item => item.name === vendor.state)
+        console.log(ccode.isoCode + ":" + scode.isoCode);
+        console.log(vendor.country, vendor.state);
+        setCountryCode(ccode.isoCode)
+        setStateCode(scode.isoCode)
+        setStates(prev => State.getStatesOfCountry(countryCode))
+        setCities(prev => City.getCitiesOfState(countryCode, stateCode))
+    }, [vendor.country, vendor.state, countryCode, stateCode]);
+
+    const handleClick = async () => {
+        let res = await axios.post('/api/vendor/add', vendor, {
+            headers: {
+                "Authorization": `Bearer ${token}`
+            }
+        })
+        if (res) {
+            console.log(res.data);
+        }
+    }
+
     return <div className="bg-light min-vh-100 d-flex flex-row align-items-start">
         <CContainer>
             <CRow className="justify-content-start">
@@ -25,14 +83,14 @@ const AddVendor = () => {
                         <p className="text-medium-emphasis">Fill the fields and submit to add a new vendor</p>
                         <CRow className=' flex-row align-items-center'>
                             <CCol md={2} ><h4>Code:</h4></CCol>
-                            <CCol><h6>5324756898</h6></CCol>
+                            <CCol><h6>{code}</h6></CCol>
                             <p className="text-medium-emphasis">(auto-generated)</p>
                         </CRow>
                         <CInputGroup className="mb-3">
                             <CInputGroupText>
                                 <CIcon icon={cilUser} />
                             </CInputGroupText>
-                            <CFormInput placeholder="Vendor Name" autoComplete="vendorname" />
+                            <CFormInput placeholder="Vendor Name" autoComplete="vendorname" onChange={handleChange("vendor_name")} />
                         </CInputGroup>
                         <CInputGroup className="mb-3">
                             <CInputGroupText>
@@ -41,35 +99,52 @@ const AddVendor = () => {
                             <CFormInput
                                 type="text"
                                 placeholder="Address Line 1"
-                            // autoComplete="address"
+                                onChange={handleChange("address_1")}
                             />
                             <CFormInput
                                 type="text"
                                 placeholder="Address Line 2(area)"
                                 autoComplete="address2"
+                                onChange={handleChange("address_2")}
                             />
                         </CInputGroup>
                         <CInputGroup className="mb-3">
                             <CInputGroupText>
                                 <CIcon icon={cilGlobeAlt} />
                             </CInputGroupText>
-                            <CFormInput
+                            <CFormSelect
-                                type="text"
+                                aria-label="Default select example"
-                                placeholder="Country"
+                                onChange={handleChange("country")}
-                                autoComplete="country"
+                            >
-                            />
+                                <option value='India'>Select Country</option>{
-                            <CFormInput
+                                    countries.map((item) =>
-                                type="text"
+                                        <option value={item.name}>{item.name}</option>
-                                placeholder="State"
+                                    )
-                                autoComplete="state"
+                                }
-                            />
+                            </CFormSelect>
-                            <CFormInput
+                            <CFormSelect
-                                type="text"
+                                aria-label="Default select example"
-                                placeholder="City"
+                                onChange={handleChange("state")}
-                                autoComplete="city"
+                            >
-                            />
+                                <option value='Chandigarh'>Select State</option>{
+                                    states.map((item) =>
+                                        <option value={item.name}>{item.name}</option>
+                                    )
+                                }
+                            </CFormSelect>
+                            <CFormSelect
+                                aria-label="Default select example"
+                                onChange={handleChange("city")}
+                                placeholder='Select City'
+                            >
+                                <option value='Mumbai'>Select City</option>{
+                                    cities.map((item) =>
+                                        <option value={item.name}>{item.name}</option>
+                                    )
+                                }
+                            </CFormSelect>
                         </CInputGroup>
-                        <CButton color="dark" className="px-4">
+                        <CButton color="dark" className="px-4" onClick={handleClick}>
                             Submit
                         </CButton>
 

src/views/Vendor/Vendor.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
     CAvatar,
     CButton,
@@ -19,8 +19,30 @@ import {
     CTableRow,
 } from '@coreui/react'
 import { Link } from 'react-router-dom';
+import axios from 'axios';
+import { isAutheticated } from '../../auth';
 
 const Vendor = () => {
+    const { token } = isAutheticated();
+    console.log(token);
+
+    useEffect(() => {
+        const getData = async () => {
+            const res = await axios.get('/api/vendor/view', {
+                headers: {
+                    "Access-Control-Allow-Origin": "*",
+                    "Content-type": "Application/json",
+                    "Authorization": `Bearer ${token}`
+                }
+            });
+            console.log(res);
+        }
+        getData();
+
+    }, []);
+
+
+
     return <div>
         <Link to='/addvendor'>
             <CButton color="dark">+Add New Vendor</CButton>

src/views/pages/login/Login.js

@@ -15,8 +15,38 @@ import {
 } from '@coreui/react'
 import CIcon from '@coreui/icons-react'
 import { cilLockLocked, cilUser } from '@coreui/icons'
+import { useState } from 'react'
+import axios from 'axios'
+import { useHistory } from 'react-router-dom'
 
 const Login = () => {
+  const [auth, setAuth] = useState({
+    email: "",
+    password: ""
+  });
+  const history = useHistory();
+
+  const handleChange = (e) => (event) => {
+    setAuth({ ...auth, [e]: event.target.value });
+  };
+
+  const Login = async () => {
+    const res = await axios.post("/admin-signin", auth);
+    if (res.data.status == "ok") {
+      localStorage.setItem("auth", JSON.stringify({
+        // user: res.data.user,
+        token: res.data.token,
+      }));
+      history.push('/dashboard')
+
+    }
+    else {
+      if (res.data.status === "blocked")
+        alert(res.data.message)
+      else
+        alert("Invalid Credentials");
+    }
+  }
   return (
     <div className="bg-light min-vh-100 d-flex flex-row align-items-center">
       <CContainer>
@@ -32,7 +62,7 @@ const Login = () => {
                       <CInputGroupText>
                         <CIcon icon={cilUser} />
                       </CInputGroupText>
-                      <CFormInput placeholder="Email" autoComplete="email" />
+                      <CFormInput placeholder="Email" onChange={handleChange("email")} autoComplete="email" />
                     </CInputGroup>
                     <CInputGroup className="mb-4">
                       <CInputGroupText>
@@ -40,16 +70,17 @@ const Login = () => {
                       </CInputGroupText>
                       <CFormInput
                         type="password"
+                        onChange={handleChange("password")}
                         placeholder="Password"
                         autoComplete="current-password"
                       />
                     </CInputGroup>
 
-                    <Link to="/dashboard">
+
-                      <CButton color="primary" className="px-4">
+                    <CButton color="primary" className="px-4" onClick={Login}>
                       Login
                     </CButton>
-                    </Link>
+
 
                     <Link to="/">
                       <CButton color="dark" className="px-4 ms-2">