diff options
Diffstat (limited to 'admin')
6 files changed, 121 insertions, 28 deletions
diff --git a/admin/src/pages/EnrollmentRequests/EnrollmentRequests.jsx b/admin/src/pages/EnrollmentRequests/EnrollmentRequests.jsx index bd2b17b..eed7e64 100644 --- a/admin/src/pages/EnrollmentRequests/EnrollmentRequests.jsx +++ b/admin/src/pages/EnrollmentRequests/EnrollmentRequests.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useState} from 'react'; import Accordion from '../../components/Accordion/Accordion'; import Button from '../../components/Button/Button'; import Header from '../../components/Header/Header'; @@ -7,11 +7,12 @@ import { getUnverifiedUsers, updateUser, } from '../../services/apiservice'; -import {useQuery, useMutation} from 'react-query'; -import {useNavigate} from 'react-router-dom'; +import { useQuery, useMutation } from 'react-query'; +import { useNavigate } from 'react-router-dom'; import BackButton from '../../components/BackButton/BackButton'; -import {sendMessage} from '../../services/apiservice'; +import { sendMessage } from '../../services/apiservice'; import Spinner from '../../components/Spinner/Spinner'; +import TextField from '@mui/material/TextField'; import styles from './EnrollmentRequests.module.css'; import MessageModal from '../../components/Modal/MessageModal'; @@ -20,11 +21,11 @@ const EnrollmentRequests = () => { const navigate = useNavigate(); const [open, setOpen] = React.useState(false); const [message, setMessage] = React.useState(''); - const {data, refetch, isLoading} = useQuery('unverified', getUnverifiedUsers); + const { data, refetch, isLoading } = useQuery('unverified', getUnverifiedUsers); const deleteUse = useMutation((payload) => deleteUser(payload)); - const updateUse = useMutation((id) => updateUser(id, {verified: true}), { + const updateUse = useMutation((id) => updateUser(id, { verified: true }), { onSuccess: () => { refetch(); }, @@ -47,6 +48,21 @@ const EnrollmentRequests = () => { }); }; + const [inputText, setInputText] = useState(""); + + const inputHandler = (e) => { + const lowerCase = e.target.value.toLowerCase(); + setInputText(lowerCase); + }; + + const filteredData = data?.data?.filter((el) => { + if (inputText === '') { + return el; + } else { + return el.name.toLowerCase().includes(inputText); + } + }) + if (isLoading) { return <Spinner heading='Admin' />; } @@ -54,11 +70,17 @@ const EnrollmentRequests = () => { return ( <div className={styles.unverified_users}> <Header subheading='Admin' /> + <h1 className={styles.unverified_users__heading}>Search</h1> + <input + className={styles.input__search} + onChange={inputHandler} + placeholder="Enter name of user to search" + /> <BackButton onClick={() => navigate('/')} /> <h1 className={styles.unverified_users__heading}>Enrollment Requests</h1> <div className={styles.accordion}> - {data?.data.length !== 0 ? ( - data?.data.map((item) => ( + {data?.data?.length !== 0 ? ( + filteredData?.map((item) => ( <div className={styles.unverified_users__accordion} key={item._id}> <Accordion name={item.name} user={item} /> <Button diff --git a/admin/src/pages/EnrollmentRequests/EnrollmentRequests.module.css b/admin/src/pages/EnrollmentRequests/EnrollmentRequests.module.css index 8100a67..90bf8e7 100644 --- a/admin/src/pages/EnrollmentRequests/EnrollmentRequests.module.css +++ b/admin/src/pages/EnrollmentRequests/EnrollmentRequests.module.css @@ -26,3 +26,13 @@ margin: 20px; text-align: center; } + +.input__search { + width: 400px; + height: 60px; + margin: 10px 0px 30px; + padding: 18px 10px; + border: 3px solid; + border-radius: 10px; + font-size: 1.25rem; +} diff --git a/admin/src/pages/UpdateRequests/UpdateRequests.jsx b/admin/src/pages/UpdateRequests/UpdateRequests.jsx index 7888e7f..010a3ea 100644 --- a/admin/src/pages/UpdateRequests/UpdateRequests.jsx +++ b/admin/src/pages/UpdateRequests/UpdateRequests.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import Accordion from '../../components/Accordion/Accordion'; import Button from '../../components/Button/Button'; import Header from '../../components/Header/Header'; @@ -7,15 +7,15 @@ import { getUpdatingUsers, updateUser, } from '../../services/apiservice'; -import {useQuery, useMutation} from 'react-query'; -import {useNavigate} from 'react-router-dom'; +import { useQuery, useMutation } from 'react-query'; +import { useNavigate } from 'react-router-dom'; import styles from './UpdateRequests.module.css'; import BackButton from '../../components/BackButton/BackButton'; import Spinner from '../../components/Spinner/Spinner'; const UpdateRequests = () => { const navigate = useNavigate(); - const {data, isLoading, isError, refetch} = useQuery( + const { data, isLoading, isError, refetch } = useQuery( 'updating', getUpdatingUsers ); @@ -25,12 +25,27 @@ const UpdateRequests = () => { }, }); - const updateUse = useMutation((id) => updateUser(id, {verified: true}), { + const updateUse = useMutation((id) => updateUser(id, { verified: true }), { onSuccess: () => { refetch(); }, }); + const [inputText, setInputText] = useState(""); + + const inputHandler = (e) => { + const lowerCase = e.target.value.toLowerCase(); + setInputText(lowerCase); + }; + + const filteredData = data?.data?.filter((el) => { + if (inputText === '') { + return el; + } else { + return el.name.toLowerCase().includes(inputText); + } + }) + if (isLoading) { return <Spinner heading='Admin' />; } @@ -42,25 +57,29 @@ const UpdateRequests = () => { return ( <div className={styles.unverified_users}> <Header subheading='Admin' /> + <h1 className={styles.unverified_users__heading}>Search</h1> + <input + className={styles.input__search} + onChange={inputHandler} + placeholder="Enter name of user to search" + /> <BackButton onClick={() => navigate('/')} /> <h1 className={styles.unverified_users__heading}>Update Requests</h1> <div className={styles.accordion}> {data?.data.length !== 0 ? ( - data?.data.map((item) => ( + filteredData?.map((item) => ( <div className={styles.unverified_users__accordion} key={item._id}> <Accordion name={item.name} user={item} /> - <div> - <Button - title='Accept' - color='green' - onClick={() => updateUse.mutate(item._id)} - /> - <Button - title='Reject' - color='red' - onClick={() => deleteUse.mutate(item._id)} - /> - </div> + <Button + title='Accept' + color='green' + onClick={() => updateUse.mutate(item._id)} + /> + <Button + title='Reject' + color='red' + onClick={() => deleteUse.mutate(item._id)} + /> </div> )) ) : ( diff --git a/admin/src/pages/UpdateRequests/UpdateRequests.module.css b/admin/src/pages/UpdateRequests/UpdateRequests.module.css index 59a1b08..c041f10 100644 --- a/admin/src/pages/UpdateRequests/UpdateRequests.module.css +++ b/admin/src/pages/UpdateRequests/UpdateRequests.module.css @@ -26,3 +26,13 @@ margin: 20px; text-align: center; } + +.input__search { + width: 400px; + height: 60px; + margin: 10px 0px 30px; + padding: 18px 10px; + border: 3px solid; + border-radius: 10px; + font-size: 1.25rem; +} diff --git a/admin/src/pages/VerifiedUsers/VerifiedUsers.jsx b/admin/src/pages/VerifiedUsers/VerifiedUsers.jsx index 12d1317..c03791c 100644 --- a/admin/src/pages/VerifiedUsers/VerifiedUsers.jsx +++ b/admin/src/pages/VerifiedUsers/VerifiedUsers.jsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, {useState} from 'react'; import Accordion from '../../components/Accordion/Accordion'; import Header from '../../components/Header/Header'; import {getVerifiedUsers} from '../../services/apiservice'; @@ -9,13 +9,34 @@ import styles from './VerifiedUsers.module.css'; const VerifiedUsers = () => { const {data} = useQuery('verified', getVerifiedUsers); + const [inputText, setInputText] = useState(""); + + const inputHandler = (e) => { + const lowerCase = e.target.value.toLowerCase(); + setInputText(lowerCase); + }; + + const filteredData = data?.data?.filter((el) => { + if (inputText === '') { + return el; + } else { + return el.name.toLowerCase().includes(inputText); + } + }) + return ( <div className={styles.verified_users}> <Header subheading='Admin' /> + <h1 className={styles.unverified_users__heading}>Search</h1> + <input + className={styles.input__search} + onChange={inputHandler} + placeholder="Enter name of user to search" + /> <h1 className={styles.verified_users__heading}>Verified Users</h1> <div className='accordion'> {data?.data.length !== 0 ? ( - data?.data.map((item) => ( + filteredData?.map((item) => ( <div> <Accordion name={item.name} user={item} /> </div> diff --git a/admin/src/pages/VerifiedUsers/VerifiedUsers.module.css b/admin/src/pages/VerifiedUsers/VerifiedUsers.module.css index f558e85..242b539 100644 --- a/admin/src/pages/VerifiedUsers/VerifiedUsers.module.css +++ b/admin/src/pages/VerifiedUsers/VerifiedUsers.module.css @@ -2,6 +2,7 @@ display: flex; flex-direction: column; justify-content: center; + align-items: center; } .verified_users__heading { @@ -12,3 +13,13 @@ margin: 20px; text-align: center; } + +.input__search { + width: 400px; + height: 60px; + margin: 10px 0px 30px; + padding: 18px 10px; + border: 3px solid; + border-radius: 10px; + font-size: 1.25rem; +} |