format code

This commit is contained in:
anovazzi1 2023-08-15 16:16:40 -03:00
commit 56f8aca796
6 changed files with 201 additions and 212 deletions

View file

@ -6,7 +6,7 @@ export const CatchAllRoute = () => {
// Redirect to the root ("/") when the catch-all route is matched // Redirect to the root ("/") when the catch-all route is matched
useEffect(() => { useEffect(() => {
navigate('/'); navigate("/");
}, []); }, []);
return null; return null;

View file

@ -34,7 +34,7 @@ export default function Header() {
return ( return (
<div className="header-arrangement"> <div className="header-arrangement">
<div className="header-start-display"> <div className="header-start-display">
<Link to="/"> <Link to="/">
<span className="ml-4 text-2xl">⛓️</span> <span className="ml-4 text-2xl">⛓️</span>
</Link> </Link>
<Button <Button

View file

@ -47,14 +47,11 @@ function ApiInterceptor() {
navigate("/login"); navigate("/login");
} }
} }
}
if(!refreshToken && error?.config?.url?.includes(
"login"
) ){
return Promise.reject(error);
} }
else{
if (!refreshToken && error?.config?.url?.includes("login")) {
return Promise.reject(error);
} else {
logout(); logout();
navigate("/login"); navigate("/login");
} }
@ -63,7 +60,6 @@ function ApiInterceptor() {
return Promise.reject(error); return Promise.reject(error);
// } // }
} }
} }
); );

View file

@ -12,7 +12,6 @@ import {
} from "../../types/components"; } from "../../types/components";
import { nodeIconsLucide } from "../../utils/styleUtils"; import { nodeIconsLucide } from "../../utils/styleUtils";
import BaseModal from "../baseModal"; import BaseModal from "../baseModal";
import InputComponent from "../../components/inputComponent";
export default function UserManagementModal({ export default function UserManagementModal({
title, title,

View file

@ -15,6 +15,7 @@ import {
TableRow, TableRow,
} from "../../components/ui/table"; } from "../../components/ui/table";
import { alertContext } from "../../contexts/alertContext"; import { alertContext } from "../../contexts/alertContext";
import { AuthContext } from "../../contexts/authContext";
import { import {
addUser, addUser,
deleteUser, deleteUser,
@ -23,7 +24,6 @@ import {
} from "../../controllers/API"; } from "../../controllers/API";
import ConfirmationModal from "../../modals/ConfirmationModal"; import ConfirmationModal from "../../modals/ConfirmationModal";
import UserManagementModal from "../../modals/UserManagementModal"; import UserManagementModal from "../../modals/UserManagementModal";
import { AuthContext } from "../../contexts/authContext";
export default function AdminPage() { export default function AdminPage() {
const [inputValue, setInputValue] = useState(""); const [inputValue, setInputValue] = useState("");
@ -49,9 +49,9 @@ export default function AdminPage() {
setLoadingUsers(true); setLoadingUsers(true);
getUsersPage(index, size) getUsersPage(index, size)
.then((users) => { .then((users) => {
setTotalRowsCount(users['total_count']); setTotalRowsCount(users["total_count"]);
userList.current = users['users']; userList.current = users["users"];
setFilterUserList(users['users']); setFilterUserList(users["users"]);
setLoadingUsers(false); setLoadingUsers(false);
}) })
.catch((error) => { .catch((error) => {
@ -140,214 +140,208 @@ export default function AdminPage() {
} }
return ( return (
<> <>
{ {userData && (
userData && (
<div className="main-page-panel"> <div className="main-page-panel">
<div className="m-auto flex h-full flex-row justify-center"> <div className="m-auto flex h-full flex-row justify-center">
<div className="basis-5/6"> <div className="basis-5/6">
<div className="m-auto flex h-full flex-col space-y-8 p-8 "> <div className="m-auto flex h-full flex-col space-y-8 p-8 ">
<div className="flex items-center justify-between space-y-2"> <div className="flex items-center justify-between space-y-2">
<div> <div>
<h2 className="text-2xl font-bold tracking-tight"> <h2 className="text-2xl font-bold tracking-tight">
Welcome back! Welcome back!
</h2> </h2>
<p className="text-muted-foreground"> <p className="text-muted-foreground">
Here&apos;s a list of all users! Here&apos;s a list of all users!
</p> </p>
</div>
<div className="flex items-center space-x-2"></div>
</div> </div>
<div className="flex items-center space-x-2"></div>
</div>
{userList.current.length === 0 && !loadingUsers && ( {userList.current.length === 0 && !loadingUsers && (
<>
<div className="flex items-center justify-between">
<h2>There's no users registered :)</h2>
</div>
</>
)}
<> <>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h2>There's no users registered :)</h2> <div className="flex flex-1 items-center space-x-2">
</div> <Input
</> value={inputValue}
)} placeholder="Filter users..."
<> className="h-8 w-[150px] lg:w-[250px]"
<div className="flex items-center justify-between"> onChange={(e) => handleFilterUsers(e.target.value)}
<div className="flex flex-1 items-center space-x-2"> />
<Input {inputValue.length > 0 && (
value={inputValue} <Button
placeholder="Filter users..." onClick={() => {
className="h-8 w-[150px] lg:w-[250px]" setInputValue("");
onChange={(e) => handleFilterUsers(e.target.value)} setFilterUserList(userList.current);
/> }}
{inputValue.length > 0 && ( variant="ghost"
<Button className="h-8 px-2 lg:px-3"
onClick={() => { >
setInputValue(""); Reset
setFilterUserList(userList.current); <X className="ml-2 h-4 w-4" />
</Button>
)}
</div>
<div>
<UserManagementModal
title="New User"
titleHeader={"Add a new user"}
cancelText="Cancel"
confirmationText="Save"
icon={"UserPlus2"}
onConfirm={(index, user) => {
handleNewUser(user);
}} }}
variant="ghost"
className="h-8 px-2 lg:px-3"
> >
Reset <Button>New User</Button>
<X className="ml-2 h-4 w-4" /> </UserManagementModal>
</Button> </div>
)}
</div> </div>
<div> {loadingUsers && (
<UserManagementModal <div>
title="New User" <strong>Loading...</strong>
titleHeader={"Add a new user"} </div>
cancelText="Cancel" )}
confirmationText="Save" <div
icon={"UserPlus2"} className={
onConfirm={(index, user) => { "max-h-[26rem] overflow-scroll overflow-x-hidden rounded-md border-2 bg-muted custom-scroll" +
handleNewUser(user); (loadingUsers ? " border-0" : "")
}} }
> >
<Button>New User</Button> <Table className={"table-fixed bg-muted outline-1"}>
</UserManagementModal> <TableHeader
</div> className={
</div> loadingUsers
{loadingUsers && ( ? "hidden"
<div> : "table-fixed bg-muted outline-1"
<strong>Loading...</strong> }
</div> >
)} <TableRow>
<div <TableHead className="h-10">Id</TableHead>
className={ <TableHead className="h-10">Username</TableHead>
"max-h-[26rem] overflow-scroll overflow-x-hidden rounded-md border-2 bg-muted custom-scroll" + <TableHead className="h-10">Disabled</TableHead>
(loadingUsers ? " border-0" : "") <TableHead className="h-10">Superuser</TableHead>
} <TableHead className="h-10">Created At</TableHead>
> <TableHead className="h-10">Updated At</TableHead>
<Table className={"table-fixed bg-muted outline-1"}> <TableHead className="h-10 w-[100px] text-right"></TableHead>
<TableHeader </TableRow>
className={ </TableHeader>
loadingUsers {!loadingUsers && (
? "hidden" <TableBody>
: "table-fixed bg-muted outline-1" {filterUserList.map((user, index) => (
} <TableRow key={index}>
> <TableCell className="truncate py-2 font-medium">
<TableRow> <ShadTooltip content={user.id}>
<TableHead className="h-10">Id</TableHead> <span className="cursor-default">
<TableHead className="h-10">Username</TableHead> {user.id}
<TableHead className="h-10">Disabled</TableHead> </span>
<TableHead className="h-10">Superuser</TableHead> </ShadTooltip>
<TableHead className="h-10">Created At</TableHead> </TableCell>
<TableHead className="h-10">Updated At</TableHead> <TableCell className="truncate py-2">
<TableHead className="h-10 w-[100px] text-right"></TableHead> <ShadTooltip content={user.username}>
</TableRow> <span className="cursor-default">
</TableHeader> {user.username}
{!loadingUsers && ( </span>
<TableBody> </ShadTooltip>
{filterUserList.map((user, index) => ( </TableCell>
<TableRow key={index}> <TableCell className="relative left-5 truncate py-2">
<TableCell className="truncate py-2 font-medium"> <Checkbox
<ShadTooltip content={user.id}> id="is_disabled"
<span className="cursor-default"> checked={user.is_disabled}
{user.id} />
</span> </TableCell>
</ShadTooltip> <TableCell className="relative left-5 truncate py-2">
</TableCell> <Checkbox
<TableCell className="truncate py-2"> id="is_superuser"
<ShadTooltip content={user.username}> checked={user.is_superuser}
<span className="cursor-default"> />
{user.username} </TableCell>
</span> <TableCell className="truncate py-2 ">
</ShadTooltip> {
</TableCell> new Date(user.create_at)
<TableCell className="relative left-5 truncate py-2"> .toISOString()
<Checkbox .split("T")[0]
id="is_disabled" }
checked={user.is_disabled} </TableCell>
/> <TableCell className="truncate py-2">
</TableCell> {
<TableCell className="relative left-5 truncate py-2"> new Date(user.updated_at)
<Checkbox .toISOString()
id="is_superuser" .split("T")[0]
checked={user.is_superuser} }
/> </TableCell>
</TableCell> <TableCell className="flex w-[100px] py-2 text-right">
<TableCell className="truncate py-2 "> <div className="flex">
{ <UserManagementModal
new Date(user.create_at) title="Edit"
.toISOString() titleHeader={`${user.id}`}
.split("T")[0] cancelText="Cancel"
} confirmationText="Edit"
</TableCell> icon={"UserPlus2"}
<TableCell className="truncate py-2"> data={user}
{ index={index}
new Date(user.updated_at) onConfirm={(index, editUser) => {
.toISOString() handleEditUser(user.id, editUser);
.split("T")[0] }}
} >
</TableCell> <ShadTooltip content="Edit" side="top">
<TableCell className="flex w-[100px] py-2 text-right"> <IconComponent
<div className="flex"> name="Pencil"
<UserManagementModal className="h-4 w-4 cursor-pointer"
title="Edit" />
titleHeader={`${user.id}`} </ShadTooltip>
cancelText="Cancel" </UserManagementModal>
confirmationText="Edit"
icon={"UserPlus2"}
data={user}
index={index}
onConfirm={(index, editUser) => {
handleEditUser(user.id, editUser);
}}
>
<ShadTooltip content="Edit" side="top">
<IconComponent
name="Pencil"
className="h-4 w-4 cursor-pointer"
/>
</ShadTooltip>
</UserManagementModal>
<ConfirmationModal <ConfirmationModal
title="Delete" title="Delete"
titleHeader="Delete User" titleHeader="Delete User"
modalContentTitle="Attention!" modalContentTitle="Attention!"
modalContent="Are you sure you want to delete this user? This action cannot be undone." modalContent="Are you sure you want to delete this user? This action cannot be undone."
cancelText="Cancel" cancelText="Cancel"
confirmationText="Delete" confirmationText="Delete"
icon={"UserMinus2"} icon={"UserMinus2"}
data={user} data={user}
index={index} index={index}
onConfirm={(index, user) => { onConfirm={(index, user) => {
handleDeleteUser(user); handleDeleteUser(user);
}} }}
> >
<ShadTooltip content="Delete" side="top"> <ShadTooltip content="Delete" side="top">
<IconComponent <IconComponent
name="Trash2" name="Trash2"
className="ml-2 h-4 w-4 cursor-pointer" className="ml-2 h-4 w-4 cursor-pointer"
/> />
</ShadTooltip> </ShadTooltip>
</ConfirmationModal> </ConfirmationModal>
</div> </div>
</TableCell> </TableCell>
</TableRow> </TableRow>
))} ))}
</TableBody> </TableBody>
)} )}
</Table> </Table>
</div> </div>
<PaginatorComponent <PaginatorComponent
pageIndex={index} pageIndex={index}
pageSize={size} pageSize={size}
totalRowsCount={filterUserList.length} totalRowsCount={filterUserList.length}
paginate={(pageIndex, pageSize) => { paginate={(pageIndex, pageSize) => {
handleChangePagination(pageSize, pageIndex); handleChangePagination(pageSize, pageIndex);
}} }}
></PaginatorComponent> ></PaginatorComponent>
</> </>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> )}
)
}
</> </>
); );
} }

View file

@ -1,5 +1,8 @@
import { Route, Routes } from "react-router-dom"; import { Route, Routes } from "react-router-dom";
import { ProtectedAdminRoute } from "./components/authAdminGuard";
import { ProtectedRoute } from "./components/authGuard";
import { ProtectedLoginRoute } from "./components/authLoginGuard"; import { ProtectedLoginRoute } from "./components/authLoginGuard";
import { CatchAllRoute } from "./components/catchAllRoutes";
import AdminPage from "./pages/AdminPage"; import AdminPage from "./pages/AdminPage";
import LoginAdminPage from "./pages/AdminPage/LoginPage"; import LoginAdminPage from "./pages/AdminPage/LoginPage";
import CommunityPage from "./pages/CommunityPage"; import CommunityPage from "./pages/CommunityPage";
@ -8,9 +11,6 @@ import HomePage from "./pages/MainPage";
import DeleteAccountPage from "./pages/deleteAccountPage"; import DeleteAccountPage from "./pages/deleteAccountPage";
import LoginPage from "./pages/loginPage"; import LoginPage from "./pages/loginPage";
import SignUp from "./pages/signUpPage"; import SignUp from "./pages/signUpPage";
import { CatchAllRoute } from "./components/catchAllRoutes";
import { ProtectedRoute } from "./components/authGuard";
import { ProtectedAdminRoute } from "./components/authAdminGuard";
const Router = () => { const Router = () => {
return ( return (