From 4e99bfe1878620769d48532b182692e51c7266ef Mon Sep 17 00:00:00 2001 From: rohan09-raj Date: Sun, 14 Aug 2022 00:19:58 +0530 Subject: admin panel and api integration --- admin/src/App.css | 38 ---------------- admin/src/App.js | 20 ++------- admin/src/App.test.js | 8 ---- admin/src/components/Accordion/Accordion.jsx | 35 +++++++++++++++ .../src/components/Accordion/Accordion.module.css | 29 +++++++++++++ admin/src/components/Button/Button.jsx | 20 +++++++++ admin/src/components/Button/Button.module.css | 19 ++++++++ admin/src/components/Card/Card.jsx | 13 ++++++ admin/src/components/Card/Card.module.css | 26 +++++++++++ admin/src/components/Header/Header.jsx | 13 ++++++ admin/src/components/Header/Header.module.css | 20 +++++++++ admin/src/index.css | 9 +++- admin/src/index.js | 16 ++++--- admin/src/logo.svg | 1 - admin/src/pages/Home/Home.jsx | 30 +++++++++++++ admin/src/pages/Home/Home.module.css | 4 ++ .../src/pages/UnverifiedUsers/UnverifiedUsers.jsx | 50 ++++++++++++++++++++++ .../UnverifiedUsers/UnverifiedUsers.module.css | 21 +++++++++ admin/src/pages/VerifiedUsers/VerifiedUsers.jsx | 31 ++++++++++++++ .../pages/VerifiedUsers/VerifiedUsers.module.css | 14 ++++++ admin/src/reportWebVitals.js | 13 ------ admin/src/routes/index.js | 22 ++++++++++ admin/src/services/apiservice.js | 25 +++++++++++ admin/src/setupTests.js | 5 --- admin/src/styles/GlobalVariables.css | 8 ++++ 25 files changed, 400 insertions(+), 90 deletions(-) delete mode 100644 admin/src/App.css delete mode 100644 admin/src/App.test.js create mode 100644 admin/src/components/Accordion/Accordion.jsx create mode 100644 admin/src/components/Accordion/Accordion.module.css create mode 100644 admin/src/components/Button/Button.jsx create mode 100644 admin/src/components/Button/Button.module.css create mode 100644 admin/src/components/Card/Card.jsx create mode 100644 admin/src/components/Card/Card.module.css create mode 100644 admin/src/components/Header/Header.jsx create mode 100644 admin/src/components/Header/Header.module.css delete mode 100644 admin/src/logo.svg create mode 100644 admin/src/pages/Home/Home.jsx create mode 100644 admin/src/pages/Home/Home.module.css create mode 100644 admin/src/pages/UnverifiedUsers/UnverifiedUsers.jsx create mode 100644 admin/src/pages/UnverifiedUsers/UnverifiedUsers.module.css create mode 100644 admin/src/pages/VerifiedUsers/VerifiedUsers.jsx create mode 100644 admin/src/pages/VerifiedUsers/VerifiedUsers.module.css delete mode 100644 admin/src/reportWebVitals.js create mode 100644 admin/src/routes/index.js create mode 100644 admin/src/services/apiservice.js delete mode 100644 admin/src/setupTests.js create mode 100644 admin/src/styles/GlobalVariables.css (limited to 'admin/src') diff --git a/admin/src/App.css b/admin/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/admin/src/App.css +++ /dev/null @@ -1,38 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/admin/src/App.js b/admin/src/App.js index 3784575..6d24fc0 100644 --- a/admin/src/App.js +++ b/admin/src/App.js @@ -1,23 +1,9 @@ -import logo from './logo.svg'; -import './App.css'; +import Index from './routes'; function App() { return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+
+
); } diff --git a/admin/src/App.test.js b/admin/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/admin/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/admin/src/components/Accordion/Accordion.jsx b/admin/src/components/Accordion/Accordion.jsx new file mode 100644 index 0000000..fefd39b --- /dev/null +++ b/admin/src/components/Accordion/Accordion.jsx @@ -0,0 +1,35 @@ +import React, {useState} from 'react'; + +import styles from './Accordion.module.css'; + +const Accordion = ({name, user}) => { + const [isActive, setIsActive] = useState(false); + + return ( +
+
setIsActive(!isActive)} + > +

{name}

+
❯
+
+ {isActive && ( +
+
Indian Resident : {user.indianResident}
+
Name : {user.name}
+
Gender : {user.gender}
+
Date of Birth : {user.dob}
+
Mobile Number : {user.mobile}
+
Email : {user.email}
+
Address : {user.address}
+
Photograph : {user.photo}
+
Documents : {user.documents.doc1}
+
Biometrics : {user.biometrics.bio1}
+
+ )} +
+ ); +}; + +export default Accordion; diff --git a/admin/src/components/Accordion/Accordion.module.css b/admin/src/components/Accordion/Accordion.module.css new file mode 100644 index 0000000..86a1c7b --- /dev/null +++ b/admin/src/components/Accordion/Accordion.module.css @@ -0,0 +1,29 @@ +.accordion { + width: 600px; + margin: 2rem auto; +} + +.accordion__title { + display: flex; + flex-direction: row; + justify-content: space-between; + cursor: pointer; + background-color: #2c3e50; + color: #ecf0f1; + border-radius: 10px; + box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5); +} + +.accordion__title:hover { + background-color: #17212b; +} + +.accordion__title, +.accordion__content { + padding: 1rem; +} + +.accordion__content { + background-color: #ecf0f1; + border-radius: 10px; +} diff --git a/admin/src/components/Button/Button.jsx b/admin/src/components/Button/Button.jsx new file mode 100644 index 0000000..ed8bc20 --- /dev/null +++ b/admin/src/components/Button/Button.jsx @@ -0,0 +1,20 @@ +import React from 'react'; + +import styles from './Button.module.css'; + +const Button = ({title, onClick, color}) => { + return ( + <> + + + ); +}; + +export default Button; diff --git a/admin/src/components/Button/Button.module.css b/admin/src/components/Button/Button.module.css new file mode 100644 index 0000000..3de7c54 --- /dev/null +++ b/admin/src/components/Button/Button.module.css @@ -0,0 +1,19 @@ +.button__green { + font-size: 1rem; + margin: 8px; + padding: 20px 30px; + border: none; + border-radius: 10px; + background-color: rgb(35, 151, 35); + color: #fff; +} + +.button__red { + font-size: 1rem; + margin: 8px; + padding: 20px 30px; + border: none; + border-radius: 10px; + background-color: #ff3333; + color: #fff; +} diff --git a/admin/src/components/Card/Card.jsx b/admin/src/components/Card/Card.jsx new file mode 100644 index 0000000..9460955 --- /dev/null +++ b/admin/src/components/Card/Card.jsx @@ -0,0 +1,13 @@ +import React from 'react' +import styles from './Card.module.css' + +const Card = ({ title, image, onClick }) => { + return ( +
+ +

{title}

+
+ ) +} + +export default Card diff --git a/admin/src/components/Card/Card.module.css b/admin/src/components/Card/Card.module.css new file mode 100644 index 0000000..e351fd5 --- /dev/null +++ b/admin/src/components/Card/Card.module.css @@ -0,0 +1,26 @@ +@import '../../styles/GlobalVariables.css'; + +.card { + height: 300px; + width: 300px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border: 3px solid var(--color-black); + border-radius: 10px; + margin: 30px; + transition: 0.2s all; + cursor: pointer; + color: var(--color-black); + text-decoration-line: none; +} + +.card:active { + transform: scale(0.98); + box-shadow: 3px 2px 22px 1px var(--color-shadow); +} + +.card__title { + margin: 15px 0px; +} diff --git a/admin/src/components/Header/Header.jsx b/admin/src/components/Header/Header.jsx new file mode 100644 index 0000000..d90aafe --- /dev/null +++ b/admin/src/components/Header/Header.jsx @@ -0,0 +1,13 @@ +import React from 'react' +import styles from './Header.module.css' + +const Header = ({ subheading }) => { + return ( +
+

AADHAAR

+

{subheading}

+
+ ) +} + +export default Header diff --git a/admin/src/components/Header/Header.module.css b/admin/src/components/Header/Header.module.css new file mode 100644 index 0000000..8e6084f --- /dev/null +++ b/admin/src/components/Header/Header.module.css @@ -0,0 +1,20 @@ +@import '../../styles/GlobalVariables.css'; + +.header { + font-family: 'Fredoka One', cursive; + display: flex; + flex-direction: column; + align-items: center; + margin: 20px; + padding: 20px; +} + +.header__heading { + font-size: var(--font-large); + font-weight: 400; +} + +.header__subheading { + font-size: var(--font-medium); + font-weight: 400; +} diff --git a/admin/src/index.css b/admin/src/index.css index ec2585e..89ba707 100644 --- a/admin/src/index.css +++ b/admin/src/index.css @@ -1,10 +1,17 @@ -body { +* { margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + height: 100%; + width: 100%; } code { diff --git a/admin/src/index.js b/admin/src/index.js index d563c0f..f3e19c1 100644 --- a/admin/src/index.js +++ b/admin/src/index.js @@ -2,16 +2,18 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; -import reportWebVitals from './reportWebVitals'; +import {BrowserRouter} from 'react-router-dom'; +import {QueryClient, QueryClientProvider} from 'react-query'; + +const queryClient = new QueryClient(); const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - + + + + + ); - -// If you want to start measuring performance in your app, pass a function -// to log results (for example: reportWebVitals(console.log)) -// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals -reportWebVitals(); diff --git a/admin/src/logo.svg b/admin/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/admin/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/admin/src/pages/Home/Home.jsx b/admin/src/pages/Home/Home.jsx new file mode 100644 index 0000000..b8d556e --- /dev/null +++ b/admin/src/pages/Home/Home.jsx @@ -0,0 +1,30 @@ +import React from 'react'; +import {Link} from 'react-router-dom'; + +import Card from '../../components/Card/Card'; +import Header from '../../components/Header/Header'; +import styles from './Home.module.css'; + +const Home = ({page, setPage}) => { + return ( + <> +
+
+ + + + + + +
+ + ); +}; + +export default Home; diff --git a/admin/src/pages/Home/Home.module.css b/admin/src/pages/Home/Home.module.css new file mode 100644 index 0000000..de1cead --- /dev/null +++ b/admin/src/pages/Home/Home.module.css @@ -0,0 +1,4 @@ +.card__container { + display: flex; + justify-content: center; +} diff --git a/admin/src/pages/UnverifiedUsers/UnverifiedUsers.jsx b/admin/src/pages/UnverifiedUsers/UnverifiedUsers.jsx new file mode 100644 index 0000000..67de506 --- /dev/null +++ b/admin/src/pages/UnverifiedUsers/UnverifiedUsers.jsx @@ -0,0 +1,50 @@ +import React, {useEffect} from 'react'; +import Accordion from '../../components/Accordion/Accordion'; +import Button from '../../components/Button/Button'; +import Header from '../../components/Header/Header'; +import { + deleteUser, + getUnverifiedUsers, + updateUser, +} from '../../services/apiservice'; +import {useQuery, useMutation} from 'react-query'; + +import styles from './UnverifiedUsers.module.css'; + +const UnverifiedUsers = () => { + const {data} = useQuery('unverified', getUnverifiedUsers); + const deleteUse = useMutation((id) => deleteUser(id)); + const updateUse = useMutation((id) => updateUser(id, {verified: true})); + + useEffect(() => {}, [data]); + + return ( +
+
+

Unverified Users

+
+ {data?.data.length !== 0 ? ( + data?.data.map((item) => ( +
+ +
+ )) + ) : ( +
No Data Found
+ )} +
+
+ ); +}; + +export default UnverifiedUsers; diff --git a/admin/src/pages/UnverifiedUsers/UnverifiedUsers.module.css b/admin/src/pages/UnverifiedUsers/UnverifiedUsers.module.css new file mode 100644 index 0000000..652fe52 --- /dev/null +++ b/admin/src/pages/UnverifiedUsers/UnverifiedUsers.module.css @@ -0,0 +1,21 @@ +.unverified_users { + display: flex; + flex-direction: column; + justify-content: center; +} + +.unverified_users__heading { + text-align: center; +} + +.unverified_users__accordion { + display: flex; + justify-content: center; + align-items: center; + width: 80%; +} + +.unverified_users__nodata { + margin: 20px; + text-align: center; +} diff --git a/admin/src/pages/VerifiedUsers/VerifiedUsers.jsx b/admin/src/pages/VerifiedUsers/VerifiedUsers.jsx new file mode 100644 index 0000000..12d1317 --- /dev/null +++ b/admin/src/pages/VerifiedUsers/VerifiedUsers.jsx @@ -0,0 +1,31 @@ +import React from 'react'; +import Accordion from '../../components/Accordion/Accordion'; +import Header from '../../components/Header/Header'; +import {getVerifiedUsers} from '../../services/apiservice'; +import {useQuery} from 'react-query'; + +import styles from './VerifiedUsers.module.css'; + +const VerifiedUsers = () => { + const {data} = useQuery('verified', getVerifiedUsers); + + return ( +
+
+

Verified Users

+
+ {data?.data.length !== 0 ? ( + data?.data.map((item) => ( +
+ +
+ )) + ) : ( +
No Data Found
+ )} +
+
+ ); +}; + +export default VerifiedUsers; diff --git a/admin/src/pages/VerifiedUsers/VerifiedUsers.module.css b/admin/src/pages/VerifiedUsers/VerifiedUsers.module.css new file mode 100644 index 0000000..f558e85 --- /dev/null +++ b/admin/src/pages/VerifiedUsers/VerifiedUsers.module.css @@ -0,0 +1,14 @@ +.verified_users { + display: flex; + flex-direction: column; + justify-content: center; +} + +.verified_users__heading { + text-align: center; +} + +.verified_users__nodata { + margin: 20px; + text-align: center; +} diff --git a/admin/src/reportWebVitals.js b/admin/src/reportWebVitals.js deleted file mode 100644 index 5253d3a..0000000 --- a/admin/src/reportWebVitals.js +++ /dev/null @@ -1,13 +0,0 @@ -const reportWebVitals = onPerfEntry => { - if (onPerfEntry && onPerfEntry instanceof Function) { - import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { - getCLS(onPerfEntry); - getFID(onPerfEntry); - getFCP(onPerfEntry); - getLCP(onPerfEntry); - getTTFB(onPerfEntry); - }); - } -}; - -export default reportWebVitals; diff --git a/admin/src/routes/index.js b/admin/src/routes/index.js new file mode 100644 index 0000000..a42c529 --- /dev/null +++ b/admin/src/routes/index.js @@ -0,0 +1,22 @@ +import React from 'react'; +import {Route, Routes} from 'react-router-dom'; + +import Home from '../pages/Home/Home'; +import UnverifiedUsers from '../pages/UnverifiedUsers/UnverifiedUsers'; +import VerifiedUsers from '../pages/VerifiedUsers/VerifiedUsers'; + +const Index = () => { + return ( + + } /> + + } /> + + + } /> + + + ); +}; + +export default Index; diff --git a/admin/src/services/apiservice.js b/admin/src/services/apiservice.js new file mode 100644 index 0000000..0fbb614 --- /dev/null +++ b/admin/src/services/apiservice.js @@ -0,0 +1,25 @@ +import axios from 'axios'; + +const apiClient = axios.create({ + baseURL: 'http://localhost:5000', +}); + +export const getVerifiedUsers = async () => { + const response = await apiClient.get('/verifiedusers'); + return response; +}; + +export const getUnverifiedUsers = async () => { + const response = await apiClient.get('/unverifiedusers'); + return response; +}; + +export const updateUser = async (id, payload) => { + const response = await apiClient.patch(`/user/${id}`, payload); + return response; +}; + +export const deleteUser = async (id) => { + const response = await apiClient.delete(`/user/${id}`); + return response; +}; diff --git a/admin/src/setupTests.js b/admin/src/setupTests.js deleted file mode 100644 index 8f2609b..0000000 --- a/admin/src/setupTests.js +++ /dev/null @@ -1,5 +0,0 @@ -// jest-dom adds custom jest matchers for asserting on DOM nodes. -// allows you to do things like: -// expect(element).toHaveTextContent(/react/i) -// learn more: https://github.com/testing-library/jest-dom -import '@testing-library/jest-dom'; diff --git a/admin/src/styles/GlobalVariables.css b/admin/src/styles/GlobalVariables.css new file mode 100644 index 0000000..a1e3384 --- /dev/null +++ b/admin/src/styles/GlobalVariables.css @@ -0,0 +1,8 @@ +:root { + --color-black: #000; + --color-shadow: rgba(0, 0, 0, 0.24); + + --font-large: 4rem; + --font-medium: 2rem; + --font-medium-s: 1.25rem; +} -- cgit