devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implemented a simple page to view the currently registered users

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-04-14 12:34:56 +01:00
parent 399e222791
commit f88db929f4
16 changed files with 433 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/pages/api/users/list.ts Normal file
View File

@@ -0,0 +1,26 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type {NextApiRequest, NextApiResponse} from "next";
import {app} from "@/firebase";
import {getFirestore, collection, getDocs} from "firebase/firestore";
import {withIronSessionApiRoute} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
const db = getFirestore(app);
export default withIronSessionApiRoute(handler, sessionOptions);
async function handler(req: NextApiRequest, res: NextApiResponse) {
if (!req.session.user) {
res.status(401).json({ok: false});
return;
}
const snapshot = await getDocs(collection(db, "users"));
res.status(200).json(
snapshot.docs.map((doc) => ({
id: doc.id,
...doc.data(),
})),
);
}

2
src/pages/exam/index.tsx
View File

@@ -133,7 +133,7 @@ export default function Page({user}: {user: User}) {
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="w-full h-screen flex flex-col items-center bg-neutral-100 text-black">
<main className="w-full h-screen flex flex-col items-center bg-white text-black">
<ToastContainer />
<Navbar profilePicture={user.profilePicture} />
{renderScreen()}

4
src/pages/login.tsx
View File

@@ -6,6 +6,7 @@ import Head from "next/head";
import useUser from "@/hooks/useUser";
import {InputText} from "primereact/inputtext";
import {Button} from "primereact/button";
import {Password} from "primereact/password";
export default function Login() {
const [email, setEmail] = useState("");
@@ -65,10 +66,11 @@ export default function Login() {
<span className="p-inputgroup-addon">
<i className="pi pi-star"></i>
</span>
<InputText
<Password
placeholder="Password..."
type="password"
required
feedback={false}
disabled={isLoading}
onChange={(e) => setPassword(e.target.value)}
autoComplete="current-password"

49
src/pages/profile.tsx Normal file
View File

@@ -0,0 +1,49 @@
import {withIronSessionSsr} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import {User} from "@/interfaces/user";
import Head from "next/head";
import Navbar from "@/components/Navbar";
import {Avatar} from "primereact/avatar";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
if (!user) {
res.setHeader("location", "/login");
res.statusCode = 302;
res.end();
return {
props: {
user: null,
},
};
}
return {
props: {user: req.session.user},
};
}, sessionOptions);
export default function Profile({user}: {user: User}) {
return (
<>
<Head>
<title>IELTS GPT | Profile</title>
<meta
name="description"
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="w-full h-screen flex flex-col items-center bg-neutral-100">
<Navbar profilePicture={user.profilePicture} />
<div className="w-full h-full flex flex-col items-center justify-center p-4 relative">
<section className="bg-white drop-shadow-xl p-4 rounded-xl w-96 flex flex-col items-center">
<Avatar image={user.profilePicture} size="xlarge" shape="circle" />
</section>
</div>
</main>
</>
);
}

103
src/pages/users.tsx Normal file
View File

@@ -0,0 +1,103 @@
import {withIronSessionSsr} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import {Type, User} from "@/interfaces/user";
import Head from "next/head";
import Navbar from "@/components/Navbar";
import {Avatar} from "primereact/avatar";
import {useEffect, useState} from "react";
import {FilterMatchMode, FilterOperator} from "primereact/api";
import useUsers from "@/hooks/useUsers";
import {DataTable} from "primereact/datatable";
import {Column} from "primereact/column";
import _ from "lodash";
import {levelCalculator} from "@/resources/level";
import {Dropdown} from "primereact/dropdown";
export const getServerSideProps = withIronSessionSsr(({req, res}) => {
const user = req.session.user;
if (!user) {
res.setHeader("location", "/login");
res.statusCode = 302;
res.end();
return {
props: {
user: null,
},
};
}
return {
props: {user: req.session.user},
};
}, sessionOptions);
export default function Users({user}: {user: User}) {
const {users, isLoading} = useUsers();
const [filters] = useState({
name: {value: null, matchMode: FilterMatchMode.CONTAINS},
type: {value: null, matchMode: FilterMatchMode.EQUALS},
});
const userTypes: Type[] = ["admin", "developer", "owner", "student", "teacher"];
const typeRowFilterTemplate = (options: any) => {
return (
<Dropdown
value={options.value}
options={userTypes.map((x) => _.capitalize(x))}
onChange={(e) => options.filterApplyCallback(e.value)}
placeholder="Select One"
className="p-column-filter"
showClear
style={{minWidth: "12rem"}}
/>
);
};
return (
<>
<Head>
<title>IELTS GPT | Profile</title>
<meta
name="description"
content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="w-full h-screen flex flex-col items-center bg-neutral-100">
<Navbar profilePicture={user.profilePicture} />
<div className="w-full h-full flex flex-col items-center justify-center p-4 relative">
<DataTable
dataKey="id"
filters={filters}
filterDisplay="row"
className="w-full h-full"
loading={isLoading}
value={users}
removableSort
stripedRows
paginator
rows={5}
rowsPerPageOptions={[5, 10, 25, 50]}
tableStyle={{minWidth: "50rem"}}>
<Column field="id" sortable header="ID" />
<Column field="name" sortable header="Name" filter filterPlaceholder="Search by name" />
<Column field="experience" sortable header="Experience" />
<Column field="experience" sortable header="Level" body={(data: User) => levelCalculator(data.experience).currentLevel} />
<Column
field="type"
showFilterMenu={false}
filter
filterElement={typeRowFilterTemplate}
sortable
header="Type"
body={(data: User) => _.capitalize(data.type)}
/>
</DataTable>
</div>
</main>
</>
);
}