Zerihun.fix (#58)

* add apply * complete application * fix things * fix more things * more minor fixes * fix nav * fix announcement * inner div to bubble --------- Co-authored-by: Zerihun Moges <zerihunmoges78@gmail.com>
Endalebob · Jun 30, 2023 · a1b768c · a1b768c · vercel · Jun 30, 2023
1 parent de0c672
commit a1b768c
Show file tree

Hide file tree

Showing 11 changed files with 123 additions and 107 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/components/admin/AnnouncementDetail.tsx b/src/components/admin/AnnouncementDetail.tsx
@@ -7,6 +7,9 @@ import { MdModeEditOutline } from "react-icons/md";
 import { createMarkup } from "../common/TextEditor";
 import Modal from "../common/Modal";
 import ProgressIndicator from "../common/ProgressIndicator";
+import "react-quill/dist/quill.bubble.css";
+import dynamic from "next/dynamic";
+const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
 
 interface AnnouncementDetailProps {
  announcement: Announcement;
@@ -68,7 +71,7 @@ const AnnouncementDetail: React.FC<AnnouncementDetailProps> = ({
  />
  </div>
  </div>
- <div dangerouslySetInnerHTML={createMarkup(description)} />
+ <ReactQuill value={description} readOnly={true} theme="bubble" />
  </div>
  );
 };

diff --git a/src/components/auth/AuthImage.tsx b/src/components/auth/AuthImage.tsx
@@ -20,7 +20,7 @@ const AuthImage = () => {
  Start making your dreams come true
  </h1>
  <p className="text-white max-w-[439px] mt-5">
- Create an account and join africa's digital revolution.
+ Create an account and join Africa's digital revolution.
  </p>
  </div>
 

diff --git a/src/components/common/TextEditor.tsx b/src/components/common/TextEditor.tsx
@@ -1,6 +1,5 @@
 import "react-quill/dist/quill.snow.css";
 import dynamic from "next/dynamic";
-import "react-quill/dist/quill.snow.css";
 import DOMPurify from "dompurify";
 
 export const createMarkup = (html: string) => {

diff --git a/src/components/contest/OverViewContests.tsx b/src/components/contest/OverViewContests.tsx
@@ -38,7 +38,7 @@ const OverViewContests: React.FC = () => {
  },
  {
  icon: BsArrowRepeat,
- title: "current Contest",
+ title: "Current Contest",
  number: status?.value.currentContests,
  },
  ];

diff --git a/src/components/layout/NavBar.tsx b/src/components/layout/NavBar.tsx
@@ -40,6 +40,11 @@ const NavBar: React.FC = () => {
  to: "/resources",
  current: false,
  },
+ {
+ name: "Announcements",
+ to: "/announcements",
+ current: false,
+ },
  ],
  admin: [
  {
@@ -54,7 +59,7 @@ const NavBar: React.FC = () => {
  },
  {
  name: "Announcements",
- to: "/admin/announcements",
+ to: "/announcements",
  current: false,
  },
  {
@@ -188,16 +193,16 @@ const NavBar: React.FC = () => {
  <section
  className={classNames(
  hideNav ? "hidden" : "flex",
- "px-4 py-2 border-b-2 items-center"
+ "px-4 py-2 border-b items-center"
  )}
  >
  {isAuthenticated ? (
- <div className="w-28 lg:w-52">
+ <div>
  <Image src="/A2SV-Logo.svg" width={105} height={30} alt="logo" />
  </div>
  ) : (
  <Link className="z-30" href="/">
- <div className="w-28 lg:w-52">
+ <div>
  <Image src="/A2SV-Logo.svg" width={105} height={30} alt="logo" />
  </div>
  </Link>
@@ -222,8 +227,8 @@ const NavBar: React.FC = () => {
  key={index}
  href={to}
  className={classNames(
- current ? "text-blue-700" : "text-primary-text",
- "text-sm md:text-base"
+ current ? "text-primary" : "text-primary-text",
+ "text-sm md:text-base font-medium"
  )}
  >
  {name}
@@ -260,7 +265,7 @@ const NavBar: React.FC = () => {
  <div className="flex items-center gap-x-2">
  {hasUnreadNotification ? (
  <Link href={"/notifications"}>
- <MdNotificationAdd className="text-red-500 text-2xl hover:text-red-300-500" />
+ <MdNotificationAdd className="text-primary text-2xl hover:text-blue-600" />
  </Link>
  ) : (
  <Link href={"/notifications"}>

diff --git a/src/components/profile/ProfileCard.tsx b/src/components/profile/ProfileCard.tsx
@@ -36,7 +36,7 @@ const ProfileCard = () => {
  <div className="w-96 mx-2 rounded-lg overflow-hidden bg-white shadow-md p-8">
  {applicant.profilePicture ? (
  <Image
- className="w-full rounded-lg aspect-square object-center"
+ className="w-full rounded-lg aspect-square object-center object-contain"
  src={applicant.profilePicture}
  alt="profile-picture"
  width={317}

diff --git a/src/components/resources/Resource.tsx b/src/components/resources/Resource.tsx
@@ -13,6 +13,9 @@ import { createMarkup } from "../common/TextEditor";
 import EditResources from "./EditResource";
 import { FiDelete, FiEdit, FiTrash, FiTrash2 } from "react-icons/fi";
 import { MdDelete, MdEdit } from "react-icons/md";
+import "react-quill/dist/quill.bubble.css";
+import dynamic from "next/dynamic";
+const ReactQuill = dynamic(() => import("react-quill"), { ssr: false });
 
 interface ResourceProps {
  selectedChapter: number;
@@ -110,7 +113,12 @@ const Resource: React.FC<ResourceProps> = ({
  {chapter ? (
  <div className="flex-col items-center justify-center w-full">
  <h1 className="text-2xl font-bold mb-4">{chapter.title}</h1>
- <div dangerouslySetInnerHTML={createMarkup(chapter.content)} />
+ {/* <div dangerouslySetInnerHTML={createMarkup(chapter.content)} /> */}
+ <ReactQuill
+ value={chapter.content}
+ readOnly={true}
+ theme="bubble"
+ />
  </div>
  ) : (
  <div>

diff --git a/src/middleware.ts b/src/middleware.ts
@@ -3,7 +3,7 @@ import { NextRequest } from "next/server";
 import { useSelector } from "react-redux";
 import { RootState } from "./store";
 import { useAppSelector } from "./store/hooks";
-const baseUrl = "https://t-web-project.vercel.app";
+const baseUrl = "http://localhost:3000";
 
 export default function middleware(req: NextRequest) {
  let verify = req.cookies.get("token");
@@ -12,7 +12,7 @@ export default function middleware(req: NextRequest) {
 
  if (
  !verify &&
- (url.includes("/admin/announcements") ||
+ (url.includes("/announcements") ||
  url.includes("/admin/waitlist") ||
  url.includes("/admin/groups") ||
  url.includes("/journey") ||

diff --git a/src/pages/admin/announcements.tsx → src/pages/announcements.tsx b/src/pages/admin/announcements.tsx → src/pages/announcements.tsx
@@ -7,6 +7,7 @@ import Error from "<@>/components/common/Error";
 import Modal from "<@>/components/common/Modal";
 import { useGetAnnouncementsQuery } from "<@>/store/announcement/announcement-api";
 import { Announcement } from "<@>/types/admin/Announcement";
+import { getCookie } from "<@>/utils/cookie";
 import Head from "next/head";
 import React, { useState } from "react";
 import { AiOutlinePlus } from "react-icons/ai";
@@ -73,14 +74,16 @@ const index: React.FC = () => {
  <div className="flex justify-between w-full">
  <p className="opacity-60 text-lg">Announcements</p>
 
- <Button
- onClick={() => {
- setCreateAnnouncement(true);
- setShowModal(true);
- }}
- startIcon={<AiOutlinePlus />}
- label="New Announcement"
- />
+ {getCookie("role") === "HeadOfEducation" && (
+ <Button
+ onClick={() => {
+ setCreateAnnouncement(true);
+ setShowModal(true);
+ }}
+ startIcon={<AiOutlinePlus />}
+ label="New Announcement"
+ />
+ )}
  </div>
 
  <div className="w-full grid grid-cols-1 lg:grid-cols-4 md:grid-cols-2 gap-8 p-4">

diff --git a/src/pages/notifications/index.tsx b/src/pages/notifications/index.tsx
@@ -58,99 +58,97 @@ const Notifications = () => {
  // notifications card popup
 
  return (
- <section className="w-3/4 lg:w-1/2 mx-auto mt-5 mb-10">
- <div className="flex justify-between">
- <h1 className="text-3xl font-bold text-gray-800 mb-10">
- Notifications
- </h1>
- {hasUnreadNotification && (
- <button
- className="bg-primary hover:bg-blue-400 text-white font-bold py-2 px-4 h-10 rounded"
- onClick={handleReadAllClick}
- >
- Read All
- </button>
- )}
- </div>
-
- {isLoading ? (
- <div className="flex flex-col gap-y-4">
- {Array(4)
- .fill(4)
- .map((_item, index) => (
- <div
- className="bg-white rounded-lg shadow-lg p-6 animate-pulse"
- key={index}
- >
- <h2 className="text-xl font-semibold mb-2 bg-gray-300 h-6 w-3/4 lg:w-1/2 rounded"></h2>
- <p className="text-gray-700 mb-4 bg-gray-300 h-4 w-3/4 rounded"></p>
- <div className="flex items-center text-gray-600">
- <div className="bg-gray-300 h-4 w-4 rounded-full mr-2"></div>
- <span className="bg-gray-300 h-4 w-16 rounded"></span>
- </div>
- </div>
- ))}
+ <div className="bg-zinc-50">
+ <section className="w-3/4 lg:w-1/2 mx-auto mt-5 mb-10">
+ <div className="flex justify-between">
+ <h1 className="text-3xl font-bold text-gray-800 mb-10">
+ Notifications
+ </h1>
+ {hasUnreadNotification && (
+ <button
+ className="bg-primary hover:bg-blue-400 text-white font-bold py-2 px-4 h-10 rounded"
+ onClick={handleReadAllClick}
+ >
+ Read All
+ </button>
+ )}
  </div>
- ) : (
- <div className="flex flex-col gap-y-4">
- {notifications && notifications.length != 0 ? (
- notifications.map(
- ({ title, content, dateCreated, isRead }, index) => (
- <button
+
+ {isLoading ? (
+ <div className="flex flex-col gap-y-4">
+ {Array(4)
+ .fill(4)
+ .map((_item, index) => (
+ <div
+ className="bg-white rounded-lg shadow-lg p-6 animate-pulse"
  key={index}
- onClick={() =>
- setCurrNotification({
- title,
- content,
- dateCreated,
- isRead,
- })
- }
  >
- <div
+ <h2 className="text-xl font-semibold mb-2 bg-gray-300 h-6 w-3/4 lg:w-1/2 rounded"></h2>
+ <p className="text-gray-700 mb-4 bg-gray-300 h-4 w-3/4 rounded"></p>
+ <div className="flex items-center text-gray-600">
+ <div className="bg-gray-300 h-4 w-4 rounded-full mr-2"></div>
+ <span className="bg-gray-300 h-4 w-16 rounded"></span>
+ </div>
+ </div>
+ ))}
+ </div>
+ ) : (
+ <div className="flex flex-col divide-y p-4 rounded-xl">
+ {notifications && notifications.length != 0 ? (
+ notifications.map(
+ ({ title, content, dateCreated, isRead }, index) => (
+ <button
  key={index}
- className={
- isRead
- ? "bg-white rounded-lg shadow-lg p-6 hover:scale-100"
- : "bg-white rounded-lg shadow-lg p-6 hover:scale-100 border border-red-400 "
+ onClick={() =>
+ setCurrNotification({
+ title,
+ content,
+ dateCreated,
+ isRead,
+ })
  }
  >
- <h2 className="text-xl font-semibold mb-2 text-start">
- {title}
- </h2>
+ <div
+ key={index}
+ className={isRead ? "bg-white p-6" : "bg-blue-50 p-6 "}
+ >
+ <h2 className="text-xl font-semibold mb-2 text-start">
+ {title}
+ </h2>
 
- <p className="text-primary text-start my-5">Details</p>
- {/* <p className="text-gray-700 mb-4">{content}</p> */}
- <div className="flex items-center text-gray-600">
- <FaRegCalendarAlt className="mr-2" />
- <span>{getDate(dateCreated)}</span>
+ <p className="text-primary text-start my-5">Details</p>
+ {/* <p className="text-gray-700 mb-4">{content}</p> */}
+ <div className="flex items-center text-gray-600">
+ <FaRegCalendarAlt className="mr-2" />
+ <span>{getDate(dateCreated)}</span>
+ </div>
  </div>
- </div>
- </button>
+ </button>
+ )
  )
- )
- ) : (
- <p className="text-gray-600 text-start">
- You don't have any notifications.
- </p>
- )}
- </div>
- )}
- {currNotification && (
- <Modal
- onClose={() => {
- setCurrNotification(null);
- }}
- children={
- <NotificationsCard
- title={currNotification.title}
- content={currNotification.content}
- date={getDate(currNotification.dateCreated)}
- />
- }
- />
- )}
- </section>
+ ) : (
+  <p className="text-gray-600 text-start">
+  You don't have any notifications.
+ </p>
+ )}
+ </div>
+ )}
+  {currNotification && (
+  <Modal
+  onClose={() => {
+  setCurrNotification(null);
+ }}
+  children={
+  <NotificationsCard
+  title={currNotification.title}
+  content={currNotification.content}
+  date={getDate(currNotification.dateCreated)}
+ />
+ }
+ />
+ )}
+ </section>
+ </div>
  );
 };