Brook.groups (#52)

* initial commit

* initial commit

* initial commit

* initial commit

* initial commit

* Implemnt group page

* Implmant dashboard

* dashboard backup

* resove conflict

* Groups Page

* Complete create group and auto fill

* Bruk.fix things (#46)

* fix(frontend): use inter font globally

* fix(frontend): fix sign in

* fix(frontend): add home link on logo

* fix(frontend): fix signup styles

* fix(frontend): sign in image opacity

* fix(frontend): fix contests

* fix(frontend): announcement card height limit

* fix(frontend): fix announcement page

* fix(backend): announcement modals

* fix(frontend): fix waitlist

* fix(frontend): fix profile screen

* fix(frontend): fix edit profile

* fix(fronted): fix footer

* fix(frontend): fix profile popup

* fix(frontend): fix profile screen

* fix(frontend): remove a2sv logo

* fix(fronted): fix signin and signup

* fix(frontend): fix nav popup bg

* fix(frontend): fix wait list

* fix(frontend): fix centering

* fix(frontend): fix sign in and sign up

* add create resource

* add create resource

* remove resources

* fix merge conflict

* resource pages

* api end point to resource

* set the limit for the length of title

* merge with zerihun.create

* error fixed

* add create topic

* edit and delete button for resource

* add skeleton

* hide/show depending on the role

* edit profile issue fixed

* fix the spelling issue

* feat(notificaitons): add notifications popup

* fix(notification-card):max-width

* fix(popup): make popup responsive

* fix(title): text transform

* fix merge conflict on create topic

* fix merge conflict on index and resource page

* remove resources

* fix merge conflict on resource

* fix merge conflict on resource api

* fix merge conflict on resource page

* fix merge conflict on resource api

* error fixed

* add create topic

* fix merge conflict on resource type and related

* fix merge conflict on resource

* fix merge resource topic

* fix the spelling issue

* fix(frontend): improve landing page

* fix(frontend): remove sign up

* fix(frontend): add bg to sign in button

* fix(frontend): make buttons equal height

* fix(frontend): improve auth image

* fix(frontend): fix overlfow

* fix(frontend): fix nav overflow

* resolve merge conflict

---------

Co-authored-by: Bruk Tedla <40060643+brukted@users.noreply.github.com>
Co-authored-by: Zerihun Moges <zerihunmoges78@gmail.com>
Co-authored-by: Endale Yohannes <endaleyohannes8@gmail.com>
Co-authored-by: aklile-yilma <aklileyilma@gmail.com>
Co-authored-by: Bruk Tedla <biruk.tedla93@gmail.com>
Co-authored-by: Endale Yohannes <95867374+Endalebob@users.noreply.github.com>

package.json

@@ -27,7 +27,8 @@
     "react-markdown": "^8.0.7",
     "react-quill": "^2.0.0",
     "react-quill-editor": "^0.3.6",
-    "react-redux": "^8.0.7",
+    "react-redux": "^8.1.1",
+    "redux": "^4.2.1",
     "tailwindcss": "3.3.2",
     "typescript": "5.1.3"
   },

src/components/common/OverViewCard.tsx

@@ -1,15 +1,15 @@
-import { ReactNode } from "react";
+import React from "react";
 import { IconType } from "react-icons";
 
 export interface CardProps {
   icon: IconType;
   title: string;
-  number: number;
+  number: number | undefined;
 }
 const OverViewCard: React.FC<CardProps> = ({ icon: Icon, title, number }) => {
   return (
     <div className="flex items-center p-4 bg-white max-w-xs w-64 shadow-sm rounded-xl border-l border-r border-b">
-      <div className="mr-4 w-12 h-12 rounded-xl bg-blue-50 flex items-center">
+      <div className="mr-4 w-12 h-12 rounded-xl bg-blue-50 text-blue-950 flex items-center">
         <Icon size={30} className="mx-auto" />
       </div>
       <div>

src/components/groups/ConfirmAutoFill.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+interface createProps {
+  handleAutoFill: () => void;
+  handleClose: () => void;
+}
+
+const ConfrimationCard: React.FC<createProps> = ({
+  handleAutoFill,
+  handleClose,
+}) => {
+  const handleConfirm = () => {
+    handleAutoFill();
+  };
+
+  return (
+    <div className="flex flex-col mb-4  w-[50vw] md:w-[40vw] lg:w-[30vw]">
+      <div className="info mx-auto items-center justify-content text-start">
+        <h1 className="font-bold p-2 justify-center">Are you sure?</h1>
+        <p className="text-light item-align justify-center">
+          Auto fill will fill the remaining seats in the group with earliest
+          applicants from the wait list.
+        </p>
+      </div>
+      <div className="confirmation pt-8 justify-end">
+        <button
+          className="mr-4  text-xl justify-self-end text-light"
+          onClick={handleClose}
+        >
+          Cancel
+        </button>
+        <button
+          className="px-4 py-1 bg-primary text-white rounded-md justify-self-end"
+          onClick={handleConfirm}
+        >
+          <span className="font-bold">Confirm</span>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ConfrimationCard;

src/components/groups/CreateGroup.tsx

@@ -0,0 +1,184 @@
+import React from "react";
+import { useState } from "react";
+import { useCreateGroupMutation } from "<@>/store/groups/groups-api";
+import Group from "<@>/types/groups/group-body";
+
+interface CreateGroup {
+  handleClose: () => void;
+}
+
+const initialState: Group = {
+  name: "",
+  capacity: 0,
+  telegramLink: "",
+  divisionId: 1,
+};
+const initialError = {
+  name: "",
+  capacity: "",
+  telegramLink: "",
+  divisionId: "",
+};
+
+const CreateGroup: React.FC<CreateGroup> = ({ handleClose }) => {
+  const [group, setGroup] = useState(initialState);
+  const [createData, { isLoading, error }] = useCreateGroupMutation();
+  const [errors, setErrors] = useState(initialError);
+
+  const handleChange = (event: any) => {
+    const { name, value } = event.target;
+    setGroup((prevErrors) => ({
+      ...prevErrors,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    const { name, capacity, telegramLink, divisionId } = group;
+
+    if (!name) {
+      setErrors((prevErrors) => ({
+        ...prevErrors,
+        name: "group name is required",
+      }));
+      return;
+    }
+
+    if (!capacity) {
+      setErrors((prevErrors) => ({
+        ...prevErrors,
+        capacity: "group size is required",
+      }));
+      return;
+    }
+
+    if (!telegramLink) {
+      setErrors((prevErrors) => ({
+        ...prevErrors,
+        telegramLink: "telegram link is required",
+      }));
+      return;
+    }
+
+    if (!divisionId) {
+      setErrors((prevErrors) => ({
+        ...prevErrors,
+        divisionId: "division level is required",
+      }));
+      return;
+    }
+
+    await createData({
+      name,
+      capacity: capacity as number,
+      telegramLink,
+      divisionId: divisionId as number,
+    }).unwrap();
+    setGroup(initialState);
+    setErrors(initialError);
+  };
+
+  return (
+    <div className="flex flex-col mb-4 items-center w-[100vw] md:w-[80vw] lg:w-[45vw]">
+      <h1 className="text-2xl font-semibold">Create New Group</h1>
+      <form className="w-full px-10" onSubmit={handleSubmit}>
+        <div className="mb-4">
+          <label htmlFor="group-name" className="text-gray-500 mb-2">
+            Group Name
+          </label>
+          <input
+            name="name"
+            type="text"
+            value={group.name}
+            onChange={handleChange}
+            className="outline-none w-full p-1 border rounded leading-tight focus:border-gray-400"
+            placeholder="Enter group name"
+            required
+          />
+          {errors.name && <p className="text-red-500"> {errors.name}</p>}
+        </div>
+        <div className="mb-4">
+          <label htmlFor="group-size" className="text-gray-600 mb-1">
+            Group Size
+          </label>
+          <input
+            id="group-size"
+            name="capacity"
+            type="number"
+            value={group.capacity}
+            onChange={handleChange}
+            className="outline-none w-full p-1 border rounded leading-tight focus:border-gray-400"
+            placeholder="Enter group size"
+            required
+          />
+          {errors.capacity && (
+            <p className="text-red-500"> {errors.capacity}</p>
+          )}
+        </div>
+        <div className="mb-4">
+          <label htmlFor="group-size" className="text-gray-500">
+            Group Telegram Link
+          </label>
+          <input
+            id="telegram link"
+            name="telegramLink"
+            type="text"
+            value={group.telegramLink}
+            onChange={handleChange}
+            className="outline-none w-full p-1 border rounded leading-tight focus:border-gray-400"
+            placeholder="Enter group telegram link"
+            required
+          />
+          {errors.telegramLink && (
+            <p className="text-red-500"> {errors.telegramLink}</p>
+          )}
+        </div>
+        <div className="mb-4">
+          <label htmlFor="division-level" className="text-gray-500 ">
+            Select Division
+          </label>
+          <select
+            id="division-level"
+            name="divisionId"
+            value={group.divisionId}
+            onChange={handleChange}
+            className="outline-none w-full p-1 border rounded leading-tight focus:border-gray-400"
+            required
+          >
+            <option value="" className="text-sm sm:text-base md:text-lg">
+              -select-
+            </option>
+            <option value="1" className="text-sm sm:text-base md:text-lg">
+              Div 1
+            </option>
+            <option value="2" className="text-sm sm:text-base md:text-lg">
+              Div 2
+            </option>
+            <option value="3" className="text-sm sm:text-base md:text-lg">
+              Div 3
+            </option>
+          </select>
+          {errors.divisionId && (
+            <p className="text-red-500"> {errors.divisionId}</p>
+          )}
+        </div>
+        <div className="flex justify-end items-center py-4">
+          <button className="mr-4" onClick={handleClose}>
+            Cancel
+          </button>
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="px-4 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 text-lg"
+            onClick={handleSubmit}
+          >
+            {isLoading ? "Creating..." : "Create"}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default CreateGroup;

src/components/groups/GroupCard.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+interface CardProps {
+  groupName: string;
+  memberCount: number;
+  capacity: number;
+  handleCardClick: () => void;
+}
+
+const GroupCard: React.FC<CardProps> = ({
+  groupName,
+  memberCount,
+  capacity,
+  handleCardClick,
+}) => {
+  return (
+    <div
+      onClick={handleCardClick}
+      className="flex items-center p-4 bg-white max-w-xs w-60 shadow-sm rounded-xl border-l border-r border-b"
+    >
+      <div className="card-item">
+        <h2 className="text-gray-600 font-semibold text-2xl">{groupName}</h2>
+        <p className="text-gray-400 text-sm">
+          {memberCount} / {capacity}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default GroupCard;

src/components/groups/MembersCard.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import UserAvatar from "../common/UserAvatar";
+
+interface UserProps {
+  fullName: string;
+  profilePicture: string;
+  telegramUsername: string;
+  university: string;
+  graduationYear: string;
+}
+
+const ProfileCard: React.FC<UserProps> = ({
+  fullName,
+  profilePicture,
+  telegramUsername,
+  university,
+  graduationYear,
+}) => {
+  return (
+    <div className="flex px-6 py-3 w-full border-b border-gray-100 justify-between items-center rounded-sm ">
+      <UserAvatar fullName={fullName} profilePhotoUrl={profilePicture} />
+      <div className="pl-2">
+        <p className="font-medium text-sm text-gray-500">{fullName}</p>
+        <p className="text-sm text-gray-400 ">{telegramUsername}</p>
+      </div>
+      <div className="flex-1 flex justify-end text-sm pl-4 text-gray-600">
+        <p className="pr-2">{university}</p>
+        <div className="border-l border-gray-300 pl-2">
+          <p>{graduationYear}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileCard;