-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added search and admin dashboard, implemented SWR for data fetching
- Loading branch information
1 parent
a33a805
commit 27005f3
Showing
15 changed files
with
453 additions
and
94 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| import SearchBar from "./SearchBar" | ||
| import { useEffect, useState } from 'react'; | ||
| import { useRouter } from 'next/router'; | ||
| import { getCookie, hasCookie } from 'cookies-next'; | ||
| import UserCard from "./UserCard"; | ||
| import Bluebird from "bluebird"; | ||
| import redis from 'redis' | ||
| import useSWR from "swr"; | ||
| import next from "next"; | ||
|
|
||
| // DONT FORGET TO RETURN in fetcher | ||
| const fetcher = async () => { | ||
| return fetch('https://dondra-backend.herokuapp.com/getAllUsers', { | ||
| method: 'GET', | ||
| headers: { | ||
| 'Accept': 'application/json', | ||
| 'Content-Type': 'application/json', | ||
| 'Authorization': `Bearer ${getCookie('token')}`, | ||
| 'Access-Control-Allow-Origin': 'https://dondra.vercel.app/' | ||
| }, | ||
| }).then(res => | ||
| res.json() | ||
| ) | ||
| } | ||
| const url = 'https://dondra-backend.herokuapp.com/getAllUsers' | ||
|
|
||
| export default function AdminDashboard(){ | ||
| const router = useRouter() | ||
| const [search, setSearch] = useState('') | ||
| useEffect(() => { | ||
| if (!hasCookie('token')) { | ||
| router.push("/login") | ||
| } | ||
| }) | ||
| // Get users data from API using SWR | ||
| const {data: unverifiedUsers, _error} = useSWR(url, fetcher) | ||
|
|
||
| return( | ||
| <div className="my-4 justify-center md:mx-10 md:w-2/3 md:self-center rounded-lg flex flex-col"> | ||
| <SearchBar onChangeHandler={setSearch}/> | ||
| {unverifiedUsers ? unverifiedUsers.map(user => { | ||
| if (user.nama.includes(search) || user.username.includes(search) || user.id.toString().includes(search)) { | ||
| return <UserCard nama={user.nama} id={user.id} photo={user.fotoKTP} username={user.username} saldo={user.saldo} isVerified={user.isVerified} key={user.id}/> | ||
| } | ||
| }) : <></>} | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import { useRef } from "react"; | ||
|
|
||
| function SearchBar({onChangeHandler}) { | ||
|
|
||
| const clickPoint = useRef(); | ||
| const handleFocus = () => { | ||
| clickPoint.current.style.display = "none"; | ||
| }; | ||
|
|
||
| const handleBlur = () => { | ||
| clickPoint.current.style.display = "block"; | ||
| }; | ||
|
|
||
| const changeHandler = (e) => { | ||
| onChangeHandler(e.target.value); | ||
| } | ||
|
|
||
| return ( | ||
| <div className="items-center px-2 md:px-0 flex h-fit w-full justify-center" > | ||
| <div className="relative w-full flex"> | ||
| <div className="absolute top-3 left-3 items-center" ref={clickPoint}> | ||
| <svg className="w-5 h-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http:https://www.w3.org/2000/svg"><path fillRule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clipRule="evenodd"></path></svg> | ||
| </div> | ||
| <input | ||
| type="text" | ||
| className="block p-2 pl-10 w-70 text-gray-900 bg-gray-50 w-full rounded-lg border border-gray-300 focus:pl-3" | ||
| placeholder="Search name, id, username" | ||
| onFocus={handleFocus} | ||
| onBlur={handleBlur} | ||
| onChange={changeHandler} | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default SearchBar |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| export default function UserCard({photo, nama, id, username, saldo, isVerified}) { | ||
| return ( | ||
| <div className="bg-secondary my-4 mx-3 py-2 md:w-full md:mx-10 md:self-center rounded-lg flex flex-col md:flex-row"> | ||
| <div className="align-center"> | ||
| {photo ? <img alt="fotoKTP" src={photo} width="250px" height="30px" className="mr-2 rounded-lg m-3"/> : <>fotoKTP</>} | ||
| </div> | ||
| <div className={`ml-4 flex flex-1 flex-row content-between w-auto`}> | ||
| <div className="flex flex-col content-between m-3 grow"> | ||
| <h1 className="text-2xl font-semibold mb-2">{nama}</h1> | ||
| <p className={`text-md md:text-xl text-black flex`}><div className="w-1/4">ID</div><div>: {id}</div></p> | ||
| <p className={`text-md md:text-xl text-black flex`}><div className="w-1/4">Username</div><div>: {username}</div></p> | ||
| <p className={`text-md md:text-xl text-black flex`}><div className="w-1/4">Saldo</div><div>: {saldo}</div></p> | ||
| <p className={`text-md md:text-xl text-black flex`}><div className="w-1/4">Status</div><div>: {isVerified ? "Sudah Terverifikasi" : "Belum Terverifikasi"}</div></p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.