integrated apis

This commit is contained in:
sanaya 2022-02-04 17:40:23 +05:30
parent e63e4e3d0a
commit 07b44075fa
9 changed files with 274 additions and 33 deletions

View File

@ -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",

17
src/auth.js Normal file
View File

@ -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;
};

View File

@ -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}>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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
type="text"
placeholder="Country"
autoComplete="country"
/>
<CFormInput
type="text"
placeholder="State"
autoComplete="state"
/>
<CFormInput
type="text"
placeholder="City"
autoComplete="city"
/>
<CFormSelect
aria-label="Default select example"
onChange={handleChange("country")}
>
<option value='India'>Select Country</option>{
countries.map((item) =>
<option value={item.name}>{item.name}</option>
)
}
</CFormSelect>
<CFormSelect
aria-label="Default select example"
onChange={handleChange("state")}
>
<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>

View File

@ -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>

View File

@ -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">
Login
</CButton>
</Link>
<CButton color="primary" className="px-4" onClick={Login}>
Login
</CButton>
<Link to="/">
<CButton color="dark" className="px-4 ms-2">