Merge pull request #156 from dvishal485/main

notifications view section added

src/assets/NotificationIcon.tsx

@@ -0,0 +1,38 @@
+export default function NotificationIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="-0.5 0 25 25"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path
+        d="M19.0006 9.03002C19.0007 8.10058 18.8158 7.18037 18.4565 6.32317C18.0972 5.46598 17.5709 4.68895 16.9081 4.03734C16.2453 3.38574 15.4594 2.87265 14.5962 2.52801C13.7331 2.18336 12.8099 2.01409 11.8806 2.03002C10.0966 2.08307 8.39798 2.80604 7.12302 4.05504C5.84807 5.30405 5.0903 6.98746 5.00059 8.77001C4.95795 9.9595 5.21931 11.1402 5.75999 12.2006C6.30067 13.2609 7.10281 14.1659 8.09058 14.83C8.36897 15.011 8.59791 15.2584 8.75678 15.5499C8.91565 15.8415 8.99945 16.168 9.00059 16.5V18.03H15.0006V16.5C15.0006 16.1689 15.0829 15.843 15.24 15.5515C15.3971 15.26 15.6241 15.0121 15.9006 14.83C16.8528 14.1911 17.6336 13.328 18.1741 12.3167C18.7147 11.3054 18.9985 10.1767 19.0006 9.03002Z"
+        stroke="#ffffff"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15 21.04C14.1345 21.6891 13.0819 22.04 12 22.04C10.9181 22.04 9.86548 21.6891 9 21.04"
+        stroke="#ffffff"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.9901 5.64001L10.3301 8.41998C10.2549 8.54184 10.2138 8.68167 10.2111 8.82483C10.2084 8.96799 10.2441 9.10925 10.3146 9.23389C10.3851 9.35852 10.4877 9.46195 10.6118 9.53339C10.7359 9.60482 10.8769 9.64165 11.0201 9.64001H13.0201C13.1617 9.63947 13.301 9.67657 13.4237 9.7475C13.5463 9.81843 13.6479 9.92063 13.7181 10.0437C13.7883 10.1668 13.8245 10.3063 13.8231 10.4479C13.8217 10.5896 13.7827 10.7283 13.7101 10.85L12.0301 13.64"
+        stroke="#ffffff"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

src/pages/Notification/index.tsx

@@ -0,0 +1,87 @@
+import { Spinner } from "@/components/Spinner";
+import { ErrorContext } from "@/contexts/error";
+import API from "@/services/API";
+import { INotification } from "@/types/notification";
+import React, { useEffect, useState } from "react";
+
+interface NotificationCardProps {
+  notif: INotification;
+}
+
+function NotificationCard({ notif }: NotificationCardProps) {
+  const wrap_link = (child: React.ReactNode, link?: string) =>
+    link ? (
+      <a target="_blank" href={link} rel="noreferrer">
+        {child}
+      </a>
+    ) : (
+      child
+    );
+
+  return (
+    <div
+      key={notif._id}
+      className="mx-auto bg-gray-50 rounded-md hover:shadow-xl my-4 p-6"
+    >
+      {wrap_link(
+        <>
+          <h1 className="text-xl font-semibold text-left">
+            {notif.data.title}
+          </h1>
+          <p className="my-4 text-gray-600">{notif.data.description}</p>
+        </>,
+        notif.data.link,
+      )}
+
+      {notif.data.actions.map((action) => {
+        return (
+          <a
+            target="_blank"
+            key={action.action}
+            href={action.link}
+            className="text-blue-500 underline py-2 mr-2"
+            rel="noreferrer"
+          >
+            {action.action}
+          </a>
+        );
+      })}
+
+      {new Date(notif.updated_at).toLocaleString()}
+    </div>
+  );
+}
+
+export default function NotificationPage() {
+  const { setError } = React.useContext(ErrorContext);
+
+  const [notifications, setNotifs] = useState<INotification[]>(null);
+
+  useEffect(() => {
+    const notifications = "/notification";
+    API.get(notifications)
+      .then((response) => {
+        const userData = response.data.data;
+        setNotifs(userData);
+      })
+      .catch((error) => {
+        setError(error);
+      });
+  }, []);
+
+  if (notifications === null)
+    return (
+      <div className="flex w-full h-screen justify-center items-center">
+        <Spinner />
+      </div>
+    );
+
+  return (
+    <div className="max-w-4xl mx-auto py-12">
+      <h1>Latest Updates</h1>
+      {notifications.map((notif) => {
+        return <NotificationCard key={notif._id} notif={notif} />;
+      })}
+    </div>
+  );
+}

src/router/routeMap.tsx

@@ -16,6 +16,7 @@ import Permission from "@/types/permissions";
 import CustomRouteElement from "@/types/routeElement";
 import React from "react";
 import ProfileIcon from "@/assets/ProfileIcon";
+import NotificationIcon from "@/assets/NotificationIcon";
 
 //lazy imports
 const Login = React.lazy(() => import("@/pages/auth/Login"));
@@ -39,6 +40,7 @@ const AllEditions = React.lazy(() => import("@/pages/Edition/AllEditions"));
 const Logs = React.lazy(() => import("@/pages/Logs"));
 const MemberProfile = React.lazy(() => import("@/pages/Member/MemberProfile"));
 const EditMember = React.lazy(() => import("@/pages/Member/EditMember"));
+const NotificationPage = React.lazy(() => import("@/pages/Notification"));
 
 /** This route map serves the routes as well as is used to
  * generate nav bar menu, so the links can never be broken */
@@ -236,6 +238,13 @@ const routeMap: CustomRouteElement[] = [
     permission: [Permission.AccessLogs],
     label: "Logs",
   },
+  {
+    path: "notification/",
+    element: <NotificationPage />,
+    icon: <NotificationIcon />,
+    permission: [],
+    label: "Notifications",
+  },
 ];
 
 const make_protected = (routes: CustomRouteElement[]) => {

src/types/notification.ts

@@ -0,0 +1,43 @@
+export type Update = "Added" | "Removed" | "Modified" | "Unchanged" | "Inherit";
+
+export interface TabUpdate {
+  title: string;
+  data: DataUpdate[];
+  update: Update;
+}
+
+export interface LinkNodeUpdate {
+  title: string;
+  link: Link;
+  update: Update;
+}
+
+export interface DataUpdate {
+  title: string;
+  link?: Link;
+  children: LinkNodeUpdate[];
+  date?: string;
+  update: Update;
+}
+
+export type InformationUpdate = TabUpdate[];
+
+type Link = string;
+
+export interface INotification {
+  _id: string;
+  data: ClientNotification;
+  updated_at: string;
+}
+
+export interface ClientNotification {
+  title: string;
+  description: string;
+  actions: ClientNotificationAction[];
+  link?: string;
+}
+
+export interface ClientNotificationAction {
+  action: string;
+  link: string;
+}