Skip to content

Commit

Permalink
adding users
Browse files Browse the repository at this point in the history
  • Loading branch information
IslemMedjahdi committed Feb 3, 2023
1 parent aca99fd commit c6b4ba3
Show file tree
Hide file tree
Showing 18 changed files with 456 additions and 15 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
"react-dom": "18.2.0",
"react-icons": "^4.7.1",
"react-image-picker-editor": "^1.2.0",
"react-json-view": "^1.21.3",
"react-leaflet": "^4.2.0",
"react-loader-spinner": "^5.3.4",
"react-quill": "^2.0.0",
Expand Down
32 changes: 32 additions & 0 deletions src/components/admin/AdminIndex.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import Link from "next/link";
import { ADMIN_OUTILS } from "../../constants/adminOutils";

const AdminIndex: React.FC = () => {
return (
<div className="flex justify-center">
<div className="container px-4">
<div className="flex justify-center py-10">
<h1 className="relative z-10 text-center font-serif text-3xl font-semibold text-gray-900 after:absolute after:top-full after:left-0 after:h-2 after:w-full after:origin-left after:skew-y-1 after:animate-reveal after:bg-blue-primary">
Outils d'administration
</h1>
</div>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4 ">
{ADMIN_OUTILS.map((outil) => (
<Link
href={outil.path}
key={outil.path}
className="flex cursor-pointer items-center justify-center gap-x-4 border bg-white py-6 px-8 shadow transition duration-200 hover:bg-blue-light active:scale-95"
>
<outil.Icon className="text-xl text-blue-primary" />
<p className="text-base font-semibold text-gray-700">
{outil.name}
</p>
</Link>
))}
</div>
</div>
</div>
);
};

export default AdminIndex;
53 changes: 53 additions & 0 deletions src/components/admin/ScrapAnnoucenemntIndex.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import dynamic from "next/dynamic";
import { useEffect, useState } from "react";
import AnnouncementService from "../../services/annoucement.service";
import { Announcement } from "../../typings/announcement";
import Loading from "../shared/Loading";
const ReactJson = dynamic(() => import("react-json-view"), { ssr: false });

const announcementService = AnnouncementService.getInstance();

const ScrapAnnoucenemntIndex = () => {
const [annoucement, setAnnouncement] = useState<Announcement.Announcement[]>(
[]
);
const [loading, setLoading] = useState<boolean>(false);

const getAnnouncements = async () => {
setLoading(true);
try {
const response = await announcementService.scrapAnnouncement();
setAnnouncement(response.data);
setLoading(false);
} catch (e) {
console.log(e);
}
};

useEffect(() => {
getAnnouncements();
}, []);

return (
<div className="flex justify-center">
<div className="container px-4">
<div className="flex justify-center py-10">
<h1 className="relative z-10 text-center font-serif text-3xl font-semibold text-gray-900 after:absolute after:top-full after:left-0 after:h-2 after:w-full after:origin-left after:skew-y-1 after:animate-reveal after:bg-blue-primary">
Scrap d'annonces
</h1>
</div>
<div className=" bg-white p-2 shadow">
{loading ? (
<div className="flex h-96 items-center justify-center">
<Loading />
</div>
) : (
<ReactJson src={annoucement} />
)}
</div>
</div>
</div>
);
};

export default ScrapAnnoucenemntIndex;
105 changes: 105 additions & 0 deletions src/components/admin/UsersIndex.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
import React, { useEffect, useState } from "react";
import DataTable, { TableColumn } from "react-data-table-component";
import UserService from "../../services/user.service";
import { Auth } from "../../typings/user";
import Loading from "../shared/Loading";

const userService = UserService.getInstance();

const columns: TableColumn<Auth.User>[] = [
{
name: "N",
cell: (_, index) => (
<span className="text-sm font-medium">{index + 1}</span>
),
selector: (_, index) => index || 0,
sortable: true,
width: "1rem",
},
{
name: "Nom",
cell: (row) => <span className="text-sm font-medium">{row.nom}</span>,
selector: (row) => row.nom,
sortable: true,
},
{
name: "Prénom",
cell: (row) => <span className="text-sm font-medium">{row.prenom}</span>,
selector: (row) => row.prenom,
sortable: true,
},
{
name: "Email",
cell: (row) => <span className="text-sm font-medium">{row.email}</span>,
selector: (row) => row.email,
sortable: true,
},
{
name: "Téléphone",
cell: (row) => <span className="text-sm font-medium">{row.tel}</span>,
selector: (row) => row.tel || "",
sortable: true,
},
{
name: "Role",
cell: (row) => <span className="text-sm font-medium">{row.role}</span>,
selector: (row) => row.role,
sortable: true,
},
];

const UsersIndex: React.FC = () => {
const [users, setUsers] = useState<Auth.User[]>([]);
const [loading, setLoading] = useState<boolean>(true);

const getUsers = async () => {
setLoading(true);
try {
const response = await userService.getAllUsers();
setUsers(response.data);
} catch (e) {
console.log(e);
} finally {
setLoading(false);
}
};

useEffect(() => {
getUsers();
}, []);

return (
<div className="flex justify-center">
<div className="container px-4">
<div className="flex justify-center py-10">
<h1 className="relative z-10 text-center font-serif text-3xl font-semibold text-gray-900 after:absolute after:top-full after:left-0 after:h-2 after:w-full after:origin-left after:skew-y-1 after:animate-reveal after:bg-blue-primary">
Liste des utilisateurs
</h1>
</div>
<div className="flex w-full flex-col divide-y bg-white shadow">
<DataTable
columns={columns}
data={users}
customStyles={{
headCells: {
style: {
fontWeight: 700,
fontFamily: "'Merriweather', sarif",
},
},
}}
pagination
progressPending={loading}
progressComponent={
<div className="flex h-52 w-full items-center justify-center dark:bg-slate-800">
<Loading />
</div>
}
/>
</div>
</div>
</div>
);
};

export default UsersIndex;
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ const columns: TableColumn<Announcement.AnnouncementPart>[] = [
name: "Date de publication",
cell: (row) => (
<p className="text-sm font-medium">
{new Date(row.date_publication).toUTCString()}
{new Date(row.date_publication).toDateString()}
</p>
),
selector: (row) => new Date(row.date_publication).toUTCString(),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ const AnnouncementPreviewIndex: React.FC = () => {
<div className="flex justify-center">
<div className="container py-10 px-4">
<div>
<h1 className="relative z-10 font-serif text-3xl font-semibold text-gray-900">
<h1 className="relative z-10 w-fit text-center font-serif text-3xl font-semibold text-gray-900 after:absolute after:top-full after:left-0 after:h-2 after:w-full after:origin-left after:skew-y-1 after:animate-reveal after:bg-blue-primary">
{annoucement.titre}
</h1>
<div className="mt-10 grid grid-cols-1 gap-4 lg:grid-cols-6">
Expand Down
9 changes: 5 additions & 4 deletions src/components/layout/header/ProfileMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,11 +57,11 @@ const ProfileMenu = () => {
</p>
</Link>
</Menu.Item>
{MENU_NAV.map(({ name, allowedRoles, path, Icon }, index) =>
{NAV.map(({ Icon, allowedRoles, name, path }, index) =>
currentUser && allowedRoles.includes(currentUser.role) ? (
<Menu.Item key={index}>
<Link
className="flex flex-wrap items-center gap-x-2 px-2 py-2 text-sm font-medium hover:bg-gray-50"
className="flex flex-wrap items-center gap-x-2 px-2 py-2 text-sm font-medium hover:bg-gray-50 md:hidden "
href={path}
>
<div className="flex h-10 w-10 items-center justify-center">
Expand All @@ -72,11 +72,11 @@ const ProfileMenu = () => {
</Menu.Item>
) : null
)}
{NAV.map(({ Icon, allowedRoles, name, path }, index) =>
{MENU_NAV.map(({ name, allowedRoles, path, Icon }, index) =>
currentUser && allowedRoles.includes(currentUser.role) ? (
<Menu.Item key={index}>
<Link
className="flex flex-wrap items-center gap-x-2 px-2 py-2 text-sm font-medium hover:bg-gray-50 md:hidden "
className="flex flex-wrap items-center gap-x-2 px-2 py-2 text-sm font-medium hover:bg-gray-50"
href={path}
>
<div className="flex h-10 w-10 items-center justify-center">
Expand All @@ -87,6 +87,7 @@ const ProfileMenu = () => {
</Menu.Item>
) : null
)}

<Menu.Item>
<div
onClick={signOut}
Expand Down
3 changes: 3 additions & 0 deletions src/constants/adminOutils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { ROUTES } from "./routes";

export const ADMIN_OUTILS = [ROUTES.SCRAP_ANNOUNCEMENTS, ROUTES.LIST_USERS];
6 changes: 6 additions & 0 deletions src/constants/icons.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
BsChevronLeft,
BsChevronRight,
BsCursorText,
BsDiagram3,
BsEnvelope,
BsEye,
BsFolder,
Expand All @@ -14,10 +15,12 @@ import {
BsHouseDoor,
BsImages,
BsMap,
BsPeopleFill,
BsPersonX,
BsPinMap,
BsSearch,
BsTrash,
BsWindow,
} from "react-icons/bs";
import { FiMenu } from "react-icons/fi";
import { IoMdPricetag, IoMdSend } from "react-icons/io";
Expand Down Expand Up @@ -45,4 +48,7 @@ export const ICONS = {
Text: BsCursorText,
Photo: BsImages,
SEND: IoMdSend,
Admin: BsWindow,
Scrap: BsDiagram3,
Users: BsPeopleFill,
};
2 changes: 1 addition & 1 deletion src/constants/menuNav.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
import { ROUTES } from "./routes";

export const MENU_NAV = [ROUTES.SETTINGS];
export const MENU_NAV = [ROUTES.ADMIN, ROUTES.SETTINGS];
31 changes: 26 additions & 5 deletions src/constants/routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,33 +24,33 @@ export const ROUTES = {
name: "Annonces déposées",
path: "/posted-announcements",
pathname: "/posted-announcements",
allowedRoles: [ROLES.USER],
allowedRoles: [ROLES.ADMIN, ROLES.USER],
Icon: ICONS.Posted,
},
ADD_ANNOUNCEMENT: {
name: "Ajouter une annonce",
path: "/posted-announcements/create",
pathname: "/posted-announcements/create",
allowedRoles: [ROLES.USER],
allowedRoles: [ROLES.ADMIN, ROLES.USER],
},
FAVORITE_ANNOUNCEMENTS: {
name: "Annonces préférées",
path: "/favorite-announcements",
pathname: "/favorite-announcements",
allowedRoles: [ROLES.USER],
allowedRoles: [ROLES.ADMIN, ROLES.USER],
Icon: ICONS.Favorite,
},
ANNOUNCEMENT_BY_ID: {
name: "Announcement",
path: "/announcements/",
pathname: "/announcements/[id]",
allowedRoles: [ROLES.USER],
allowedRoles: [ROLES.ADMIN, ROLES.USER],
},
MESSAGES: {
name: "Mes messages",
path: "/messages",
pathname: "/messages",
allowedRoles: [ROLES.USER],
allowedRoles: [ROLES.ADMIN, ROLES.USER],
Icon: ICONS.Envelope,
},
SETTINGS: {
Expand All @@ -60,4 +60,25 @@ export const ROUTES = {
allowedRoles: [ROLES.ADMIN, ROLES.USER],
Icon: ICONS.Settings,
},
ADMIN: {
name: "Outils d'administration",
path: "/admin",
pathname: "/admin",
allowedRoles: [ROLES.ADMIN],
Icon: ICONS.Admin,
},
SCRAP_ANNOUNCEMENTS: {
name: "Scrap d'annonces",
path: "/admin/scraped-announcements",
pathname: "/admin/scraped-announcements",
allowedRoles: [ROLES.ADMIN],
Icon: ICONS.Scrap,
},
LIST_USERS: {
name: "Liste des utilisateurs",
path: "/admin/users",
pathname: "/admin/users",
allowedRoles: [ROLES.ADMIN],
Icon: ICONS.Users,
},
};
3 changes: 1 addition & 2 deletions src/context/MessageContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ const MessageProvider: React.FC<{ children: React.ReactNode }> = ({
Authorization: "Bearer " + tokenService.getAccessToken(),
},
});
getDiscussions();
};

const sendMessageByDiscussionId = (
Expand Down Expand Up @@ -166,13 +167,11 @@ const MessageProvider: React.FC<{ children: React.ReactNode }> = ({
...discussions.slice(discussionIndex + 1),
]);
} else {
//TODO: handle new discussion
try {
const newDiscussion =
await discussionsService.getReceivedDiscussionById(
data.discussion.id
);
console.log(newDiscussion.data);
setDiscussions([newDiscussion.data, ...discussions]);
} catch (e) {
console.log(e);
Expand Down
15 changes: 15 additions & 0 deletions src/pages/admin/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { NextPage } from "next";
import { NextSeo } from "next-seo";
import AdminIndex from "../../components/admin/AdminIndex";
import { ROUTES } from "../../constants/routes";

const Admin: NextPage = () => {
return (
<>
<NextSeo title={ROUTES.ADMIN.name} />
<AdminIndex />
</>
);
};

export default Admin;
Loading

0 comments on commit c6b4ba3

Please sign in to comment.