REFACTOR: Centralised Types and Interfaces

app/communities/page.tsx

@@ -10,7 +10,7 @@ import useCommunityMembershipActions from "@/hooks/community/useCommunityMembers
 import { useIntersectionObserver } from "@/hooks/useIntersectionObserver";
 import { Box, Heading, Spinner, Stack, Text } from "@chakra-ui/react";
 import React, { useEffect, useMemo } from "react";
-import { Community } from "@/atoms/communitiesAtom";
+import { Community } from "@/types/community";
 
 /**
  * Displays the communities page with the top 5 communities.

app/community/[communityId]/CommunityClientPage.tsx

@@ -1,13 +1,14 @@
 "use client";
 
-import { Community, communityStateAtom } from "@/atoms/communitiesAtom";
+import { communityStateAtom } from "@/atoms/communitiesAtom";
 import About from "@/components/Community/about/About";
 import CreatePostLink from "@/components/Community/CreatePostLink";
 import CommunityHeader from "@/components/Community/community-header/CommunityHeader";
 import PageContent from "@/components/Layout/PageContent";
 import Posts from "@/components/Posts/Posts";
 import { useAtom } from "jotai";
 import React, { useEffect } from "react";
+import { Community } from "@/types/community";
 
 type CommunityPageProps = {
   communityData: Community;

app/community/[communityId]/comments/[pid]/PostClientPage.tsx

@@ -1,8 +1,7 @@
 "use client";
 
 /* eslint-disable react-hooks/exhaustive-deps */
-import { Community, communityStateAtom } from "@/atoms/communitiesAtom";
-import { Post } from "@/atoms/postsAtom";
+import { communityStateAtom } from "@/atoms/communitiesAtom";
 import About from "@/components/Community/about/About";
 import PageContent from "@/components/Layout/PageContent";
 import PostLoader from "@/components/Loaders/post-loader/PostLoader";
@@ -19,6 +18,8 @@ import { User } from "firebase/auth";
 import { useAtom } from "jotai";
 import React, { useEffect } from "react";
 import { useAuthState } from "react-firebase-hooks/auth";
+import { Community } from "@/types/community";
+import { Post } from "@/types/post";
 
 type PostPageProps = {
   communityData: Community;

app/community/[communityId]/submit/SubmitPostClientPage.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { authModalStateAtom } from "@/atoms/authModalAtom";
-import { Community, communityStateAtom } from "@/atoms/communitiesAtom";
+import { communityStateAtom } from "@/atoms/communitiesAtom";
 import About from "@/components/Community/about/About";
 import PageContent from "@/components/Layout/PageContent";
 import AuthButtons from "@/components/Navbar/RightContent/AuthButtons";
@@ -11,6 +11,7 @@ import { Box, Stack, Text } from "@chakra-ui/react";
 import { useAtom, useSetAtom } from "jotai";
 import React, { useEffect } from "react";
 import { useAuthState } from "react-firebase-hooks/auth";
+import { Community } from "@/types/community";
 
 type SubmitPostPageProps = {
   communityData: Community;

app/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 /* eslint-disable react-hooks/exhaustive-deps */
-import { PostVote } from "@/atoms/postsAtom";
 import CreatePostLink from "@/components/Community/CreatePostLink";
 import PersonalHome from "@/components/Community/PersonalHome";
 import Recommendations from "@/components/Community/recommendations/Recommendations";

atoms/authModalAtom.ts

@@ -1,17 +1,5 @@
 import { atom } from "jotai";
-
-/**
- * Interface which describes the state of the authentication modal.
- * The modal has 2 properties:
- * @property {boolean} open - whether the modal is open or not
- * @property {"login" | "signup" | "resetPassword"} view - which specific view of the modal should be displayed
- *
- * @see https://jotai.org/docs/core/atom
- */
-export interface AuthModalState {
-  open: boolean;
-  view: "login" | "signup" | "resetPassword";
-}
+import { AuthModalState } from "@/types/authModal";
 
 /**
  * Describes the default state of the authentication modal.

atoms/communitiesAtom.ts

@@ -1,40 +1,5 @@
-import { Timestamp } from "firebase/firestore";
 import { atom } from "jotai";
-
-/**
- * Interface representing a community.
- * @property {string} id - unique identifier for the community
- * @property {string} creatorId - unique identifier for the user who created the community
- * @property {number} numberOfMembers - number of members in the community
- * @property {"public" | "restricted" | "private"} privacyType - privacy type of the community
- * @property {Timestamp} createdAt - timestamp of when the community was created
- * @property {string} imageURL - URL of the community's image
- */
-export interface Community {
-  id: string;
-  creatorId: string;
-  numberOfMembers: number;
-  privacyType: "public" | "restricted" | "private";
-  createdAt?: Timestamp;
-  imageURL?: string;
-  adminIds?: string[];
-}
-
-/**
- * The snippet representing a community a user us subscribed to
- * is stored in the `users` collection (as snippets) in the database for higher efficiency.
- * This interface represents the snippets of data for a community that a user is subscribed to.
- * The whole community data is not required and it can be fetched from `communities` if required.
- * This stores just enough data to model the subscription relations.
- * @property {string} communityId - unique identifier for the community
- * @property {boolean} isAdmin - whether the user is an admin of the community or not
- * @property {string} imageURL - URL of the community's image
- */
-export interface CommunitySnippet {
-  communityId: string;
-  isAdmin?: boolean;
-  imageURL?: string;
-}
+import { Community, CommunitySnippet } from "@/types/community";
 
 /**
  * Stores the community snippets to track the state of the communities atom.

atoms/directoryMenuAtom.ts

@@ -1,23 +1,6 @@
 import { atom } from "jotai";
-import { IconType } from "react-icons";
 import { TiHome } from "react-icons/ti";
-
-/**
- * Interface which describes the state of the directory menu item.
- * Captures community information for the directory menu item.
- * @property {string} displayText - text to be displayed on the menu item
- * @property {string} link - link to be navigated to when the menu item is clicked
- * @property {IconType} icon - icon to be displayed on the menu item
- * @property {string} iconColor - color of the icon
- * @property {string} imageURL - URL of the image to be displayed on the menu item
- */
-export type DirectoryMenuItem = {
-  displayText: string;
-  link: string;
-  icon: IconType;
-  iconColor: string | { base: string; _dark: string };
-  imageURL?: string;
-};
+import { DirectoryMenuItem } from "@/types/directoryMenu";
 
 /**
  * Interface which describes the state of the directory menu.

atoms/postsAtom.ts

@@ -1,50 +1,5 @@
-import { Timestamp } from "firebase/firestore";
 import { atom } from "jotai";
-
-/**
- * Interface representing a post.
- * Posts are created by users and are stored in the `posts` collection in Firebase.
- * @property {string} id - ID of the post
- * @property {string} communityId - ID of the community the post belongs to
- * @property {string} creatorId - ID of the user who created the post
- * @property {string} creatorUsername - username of the user who created the post
- * @property {string} title - title of the post
- * @property {string} body - body of the post
- * @property {number} numberOfComments - number of comments on the post
- * @property {number} voteStatus - whether the post was liked or disliked by the current user
- * @property {string} imageURL - URL of the image attached to the post
- * @property {string} communityImageURL - URL of the image attached to the community
- * @property {Timestamp} createTime - time when the post was created
- */
-export type Post = {
-  id?: string; // optional because firebase will automatically add the id for the post
-  communityId: string;
-  creatorId: string;
-  creatorUsername: string;
-  title: string;
-  body: string;
-  numberOfComments: number;
-  voteStatus: number;
-  imageURL?: string;
-  communityImageURL?: string;
-  createTime: Timestamp;
-};
-
-/**
- * Snippet representing user voting on a post.
- * This snippet is stored in the `users` collection in Firebase.
- * Stores the ID of the post, ID of the community of that post, and whether it was liked or disliked (+-1)
- * @property {string} id - ID of the snippet
- * @property {string} postId - ID of the post
- * @property {string} communityId - ID of the community the post belongs to
- * @property {number} voteValue - whether the post was liked or disliked by the current user (1 or -1)
- */
-export type PostVote = {
-  id: string;
-  postId: string;
-  communityId: string;
-  voteValue: number;
-};
+import { Post, PostVote } from "@/types/post";
 
 /**
  * Represents the base state for the atom.

atoms/savedPostsAtom.ts

@@ -1,12 +1,5 @@
 import { atom } from "jotai";
-
-export type SavedPost = {
-  id: string;
-  postId: string;
-  communityId: string;
-  postTitle: string;
-  communityImageURL?: string;
-};
+import { SavedPost } from "@/types/savedPost";
 
 interface SavedPostState {
   savedPosts: SavedPost[];

components/Community/about/About.tsx

@@ -1,4 +1,4 @@
-import { Community } from "@/atoms/communitiesAtom";
+import { Community } from "@/types/community";
 import useCommunityState from "@/hooks/community/useCommunityState";
 import { Box, Button, Flex, Stack } from "@chakra-ui/react";
 import { useRouter } from "next/navigation";

components/Community/about/AboutCommunity.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Community } from "@/atoms/communitiesAtom";
+import { Community } from "@/types/community";
 import { Flex, Text } from "@chakra-ui/react";
 import moment from "moment";
 

components/Community/about/AdminSectionAbout.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Community } from "@/atoms/communitiesAtom";
+import { Community } from "@/types/community";
 import { Button } from "@chakra-ui/react";
 import useCommunityPermissions from "@/hooks/community/useCommunityPermissions";
 import CommunitySettingsModal from "@/components/Modal/CommunitySettings/CommunitySettings";

components/Community/community-header/CommunityHeader.tsx

@@ -1,4 +1,4 @@
-import { Community } from "@/atoms/communitiesAtom";
+import { Community } from "@/types/community";
 import { Box, Flex } from "@chakra-ui/react";
 import React from "react";
 import useCommunityState from "@/hooks/community/useCommunityState";

components/Community/community-header/CommunityMembersButton.tsx

@@ -2,7 +2,6 @@ import React, { useState } from "react";
 import { IconButton, Icon } from "@chakra-ui/react";
 import CommunityMembersModal from "../../Modal/CommunityMembers/CommunityMembersModal";
 import { FiUsers } from "react-icons/fi";
-import { Community } from "@/atoms/communitiesAtom";
 
 type CommunityMembersButtonProps = {
   communityId: string;

components/Community/community-header/CommunitySettings.tsx

@@ -6,7 +6,7 @@ import { useAuthState } from "react-firebase-hooks/auth";
 import { auth } from "@/firebase/clientApp";
 import { FiSettings } from "react-icons/fi";
 import CommunitySettingsModal from "../../Modal/CommunitySettings/CommunitySettings";
-import { Community } from "@/atoms/communitiesAtom";
+import { Community } from "@/types/community";
 
 type CommunitySettingsProps = {
   communityData: Community;

components/Community/community-item/CommunityItem.tsx

@@ -1,4 +1,4 @@
-import { Community } from "@/atoms/communitiesAtom";
+import { Community } from "@/types/community";
 import { Flex, Stack } from "@chakra-ui/react";
 import { useRouter } from "next/navigation";
 import React from "react";

components/Community/community-item/CommunityItemButtonMembersSection.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Community } from "@/atoms/communitiesAtom";
+import { Community } from "@/types/community";
 import { Stack, Flex, Icon, Button } from "@chakra-ui/react";
 import { BsFillPeopleFill } from "react-icons/bs";
 

components/Community/community-item/CommunityItemNameIconSection.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Community } from "@/atoms/communitiesAtom";
+import { Community } from "@/types/community";
 import { Flex, Image, Icon, Text } from "@chakra-ui/react";
 import { IoPeopleCircleOutline } from "react-icons/io5";
 

components/Community/recommendations/RecommendationRow.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Community } from "@/atoms/communitiesAtom";
+import { Community } from "@/types/community";
 import { Flex, Icon, Image, Text, Button } from "@chakra-ui/react";
 import Link from "next/link";
 import { IoPeopleCircleOutline } from "react-icons/io5";

components/Modal/CommunityMembers/CommunityMembersModal.tsx

@@ -16,7 +16,7 @@ import {
   Stack,
   Text,
 } from "@chakra-ui/react";
-import { CommunityMember } from "@/lib/community/fetchCommunityMembers";
+import { CommunityMember } from "@/types/communityMember";
 import useCommunityMembers from "@/hooks/community/useCommunityMembers";
 
 type CommunityMembersModalProps = {

components/Modal/CommunitySettings/AdminManager.tsx

@@ -1,4 +1,4 @@
-import { Community } from "@/atoms/communitiesAtom";
+import { Community } from "@/types/community";
 import { auth } from "@/firebase/clientApp";
 import useCustomToast from "@/hooks/useCustomToast";
 import useAddAdmin from "@/hooks/admin/useAddAdmin";
@@ -16,7 +16,7 @@ import {
 } from "@chakra-ui/react";
 import React, { useEffect, useState } from "react";
 import { useAuthState } from "react-firebase-hooks/auth";
-import { AdminUser } from "@/lib/community/adminTypes";
+import { AdminUser } from "@/types/adminUser";
 
 type AdminManagerProps = {
   communityData: Community;

components/Modal/CommunitySettings/CommunitySettings.tsx

@@ -1,4 +1,4 @@
-import { Community, communityStateAtom } from "@/atoms/communitiesAtom";
+import { communityStateAtom } from "@/atoms/communitiesAtom";
 import useCommunityImage from "@/hooks/community/useCommunityImage";
 import useCommunityPrivacy from "@/hooks/community/useCommunityPrivacy";
 import useDeleteCommunity from "@/hooks/community/useDeleteCommunity";
@@ -26,6 +26,7 @@ import {
   ModalFooter,
   PrivacySettings,
 } from ".";
+import { Community } from "@/types/community";
 
 type CommunitySettingsModalProps = {
   open: boolean;

components/Modal/CommunitySettings/ImageSettings.tsx

@@ -1,4 +1,4 @@
-import { Community } from "@/atoms/communitiesAtom";
+import { Community } from "@/types/community";
 import { Box, Button, Flex, Image, Input, Stack, Text } from "@chakra-ui/react";
 import React from "react";
 

components/Modal/CommunitySettings/PrivacySettings.tsx

@@ -1,4 +1,4 @@
-import { Community } from "@/atoms/communitiesAtom";
+import { Community } from "@/types/community";
 import { Box, Flex, Stack, Text } from "@chakra-ui/react";
 import React from "react";
 import { FiCheck } from "react-icons/fi";

components/Navbar/SearchModal.tsx

@@ -18,7 +18,7 @@ import React, { useRef, useState } from "react";
 import { AiOutlineSearch } from "react-icons/ai";
 import useSearch from "@/hooks/useSearch";
 import { useRouter } from "next/navigation";
-import { Post } from "@/atoms/postsAtom";
+import { Post } from "@/types/post";
 import moment from "moment";
 
 type SearchModalProps = {

components/Posts/Comments/CommentItem.tsx

@@ -1,5 +1,13 @@
-import { Comment } from "@/hooks/comments/types";
-import { Box, Button, Flex, Icon, Spinner, Stack, Text } from "@chakra-ui/react";
+import { Comment } from "@/types/comment";
+import {
+  Box,
+  Button,
+  Flex,
+  Icon,
+  Spinner,
+  Stack,
+  Text,
+} from "@chakra-ui/react";
 import { User } from "firebase/auth";
 import React, { useState } from "react";
 import { CgProfile } from "react-icons/cg";

components/Posts/Comments/Comments.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { Post } from "@/atoms/postsAtom";
-import { Comment } from "@/hooks/comments/types";
+import { Post } from "@/types/post";
+import { Comment } from "@/types/comment";
 import useCommentList from "@/hooks/comments/useCommentList";
 import useCreateComment from "@/hooks/comments/useCreateComment";
 import useDeleteComment from "@/hooks/comments/useDeleteComment";
@@ -201,7 +201,7 @@ const Comments: React.FC<CommentsProps> = ({
                           cursor="default"
                         >
                           <Box pl={6} width="100%">
-                              <CommentItem
+                            <CommentItem
                               comment={comment}
                               onDeleteComment={deleteComment}
                               loadingDelete={deleteLoadingId === comment.id}

components/Posts/Posts.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import { Community } from "@/atoms/communitiesAtom";
+import { Community } from "@/types/community";
 import { auth } from "@/firebase/clientApp";
 import useCommunityPermissions from "@/hooks/community/useCommunityPermissions";
 import usePostState from "@/hooks/posts/usePostState";

components/Posts/new-post-form/NewPostForm.tsx

@@ -1,4 +1,4 @@
-import { Community } from "@/atoms/communitiesAtom";
+import { Community } from "@/types/community";
 import useCreatePost from "@/hooks/posts/useCreatePost";
 import useSelectFile from "@/hooks/useSelectFile";
 import { Flex, Icon } from "@chakra-ui/react";