From 3a365703cc2609e2058e955c87edb1811c79f185 Mon Sep 17 00:00:00 2001
From: Tarek Emad <tarek.mohamed04@eng-st.cu.edu.eg>
Date: Sat, 11 May 2024 18:40:11 +0300
Subject: [PATCH] documentation is done , unit test is done except for
 UserStats.js

---
 src/components/Modqueue/CommunityRules.js     |  15 +-
 src/components/Modqueue/CommunitySettings.js  |  13 +-
 src/components/Modqueue/Edited.js             |  18 +
 src/components/Modqueue/ModerationRoles.js    |  15 +-
 src/components/Modqueue/Removed.js            |  15 +-
 src/components/Modqueue/Unmoderated.js        |  12 +-
 src/components/Notification/Notification.js   |  38 +-
 .../Notification/oldnotifications.js          |  43 +-
 src/layouts/UserStats.js                      | 634 +++++++++---------
 src/stories/CommunityRules.stories.js         |  26 +
 src/stories/CommunitySettings.stories.js      |  25 +
 src/stories/Edited.stories.js                 |  26 +
 src/stories/ModerationRoles.stories.js        |  23 +
 src/stories/NotificationComponent.stories.js  |   8 +-
 src/stories/OldNotification.stories.js        |  25 +
 src/stories/Removed.stories.js                |  24 +
 src/stories/Unmoderated.stories.js            |  30 +
 src/tests/Unit/CommunityRules.test.js         |  49 ++
 src/tests/Unit/Notification.test.js           | 149 ++--
 src/tests/Unit/OldNotifications.test.js       | 116 ++++
 src/tests/Unit/Unmoderated.test.js            |  81 +++
 src/tests/Unit/userstat.test.js               | 194 ++++++
 22 files changed, 1132 insertions(+), 447 deletions(-)
 create mode 100644 src/stories/CommunityRules.stories.js
 create mode 100644 src/stories/CommunitySettings.stories.js
 create mode 100644 src/stories/Edited.stories.js
 create mode 100644 src/stories/ModerationRoles.stories.js
 create mode 100644 src/stories/OldNotification.stories.js
 create mode 100644 src/stories/Removed.stories.js
 create mode 100644 src/stories/Unmoderated.stories.js
 create mode 100644 src/tests/Unit/CommunityRules.test.js
 create mode 100644 src/tests/Unit/OldNotifications.test.js
 create mode 100644 src/tests/Unit/Unmoderated.test.js
 create mode 100644 src/tests/Unit/userstat.test.js

diff --git a/src/components/Modqueue/CommunityRules.js b/src/components/Modqueue/CommunityRules.js
index 0689b37..7d88ac2 100644
--- a/src/components/Modqueue/CommunityRules.js
+++ b/src/components/Modqueue/CommunityRules.js
@@ -115,6 +115,8 @@ function CommunityRules() {
                         <Select
                             value={selectedSubreddit}
                             onChange={handleSubredditChange}
+                            data-testid="subreddit-select"
+                            labelId="subreddit-label"
                         >
                             {subreddits.map((subreddit) => (
                                 <MenuItem key={subreddit.id} value={subreddit.id}>
@@ -128,7 +130,7 @@ function CommunityRules() {
             </table>
             <Card>
                 <CardContent>
-                    {console.log('rendering rule ', rules)}
+
                     {rules.map((rule, index) => (
                         <Card key={index} style={{
                             margin: '10px 0'
@@ -174,4 +176,13 @@ function CommunityRules() {
     );
 }
 
-export default CommunityRules;
\ No newline at end of file
+export default CommunityRules;
+
+CommunityRules.propTypes = {
+    subreddit: PropTypes.string,
+    rules: PropTypes.array,
+    selectedSubreddit: PropTypes.string,
+    newRule: PropTypes.object,
+    open: PropTypes.bool
+
+}
\ No newline at end of file
diff --git a/src/components/Modqueue/CommunitySettings.js b/src/components/Modqueue/CommunitySettings.js
index 90f4ad4..6aab593 100644
--- a/src/components/Modqueue/CommunitySettings.js
+++ b/src/components/Modqueue/CommunitySettings.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Button, TextField, FormControl, InputLabel, Select, MenuItem, Checkbox, FormControlLabel, Card, CardContent, Typography, CardHeader, Avatar, IconButton, Box, List, ListItem, ListItemText, Divider, Menu, TextareaAutosize } from '@mui/material';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import axios from "axios";
+import PropTypes from 'prop-types';
 
 
 function CommunitySettings() {
@@ -138,4 +139,14 @@ function CommunitySettings() {
     );
 }
 
-export default CommunitySettings;
\ No newline at end of file
+export default CommunitySettings;
+
+CommunitySettings.propTypes = {
+    subreddits: PropTypes.array.isRequired,
+    selectedSubreddit: PropTypes.number.isRequired,
+    settings: PropTypes.object.isRequired,
+    settingsDescriptions: PropTypes.object.isRequired,
+    communityTypes: PropTypes.array.isRequired,
+    handleSubredditChange: PropTypes.func.isRequired,
+    handleUpdate: PropTypes.func.isRequired,
+}
\ No newline at end of file
diff --git a/src/components/Modqueue/Edited.js b/src/components/Modqueue/Edited.js
index 99b9039..47177ba 100644
--- a/src/components/Modqueue/Edited.js
+++ b/src/components/Modqueue/Edited.js
@@ -150,3 +150,21 @@ function Edited() {
 Edited.propTypes = {};
 
 export default Edited;
+
+Edited.propTypes ={
+    removedPosts: PropTypes.array,
+    approvedPosts: PropTypes.array,
+    setApprovedPosts: PropTypes.func,
+    setRemovedPosts: PropTypes.func,
+    selectedSubreddit: PropTypes.object,
+    setSelectedSubreddit: PropTypes.func,
+    subreddits: PropTypes.array,
+    setSubreddits: PropTypes.func,
+    anchorEl: PropTypes.object,
+    setAnchorEl: PropTypes.func,
+    handleClick: PropTypes.func,
+    handleClose: PropTypes.func
+
+
+
+}
diff --git a/src/components/Modqueue/ModerationRoles.js b/src/components/Modqueue/ModerationRoles.js
index ed570db..4f5c74a 100644
--- a/src/components/Modqueue/ModerationRoles.js
+++ b/src/components/Modqueue/ModerationRoles.js
@@ -2,9 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Select, MenuItem, Button, Grid, Typography, Box, useTheme } from '@mui/material';
 import axios from 'axios';
 import { responsiveFontSizes, ThemeProvider } from '@mui/material/styles';
-
-
-
+import PropTypes from 'prop-types';
 function ModerationRoles() {
     const [subreddits, setSubreddits] = useState([]);
     const [selectedSubreddit, setSelectedSubreddit] = useState('');
@@ -112,3 +110,14 @@ function ModerationRoles() {
 }
 
 export default ModerationRoles;
+
+ModerationRoles.propTypes = {
+    subreddits: PropTypes.array,
+    selectedSubreddit: PropTypes.object,
+    username: PropTypes.array,
+    selectedUser: PropTypes.string,
+    handleInvite: PropTypes.func,
+    handleLeave: PropTypes.func,
+    handleBan: PropTypes.func,
+    handleUnban: PropTypes.func,
+}
\ No newline at end of file
diff --git a/src/components/Modqueue/Removed.js b/src/components/Modqueue/Removed.js
index 8ecf06a..b67caae 100644
--- a/src/components/Modqueue/Removed.js
+++ b/src/components/Modqueue/Removed.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import './Removed.css';
 import PostContainer2 from "../PostCointainer2";
 
-function Unmoderated() {
+function Removed() {
     const [subreddits, setSubreddits] = useState([]);
     const [selectedSubreddit, setSelectedSubreddit] = useState('');
     const [removedPosts, setRemovedPosts] = useState([]);
@@ -105,6 +105,15 @@ function Unmoderated() {
 }
 
 
-Unmoderated.propTypes = {};
 
-export default Unmoderated;
+
+export default Removed;
+
+
+Removed.prototype = {
+    subreddits: PropTypes.array,
+    selectedSubreddit: PropTypes.object,
+    removedPosts: PropTypes.array,
+    approvedPosts: PropTypes.object
+
+}
\ No newline at end of file
diff --git a/src/components/Modqueue/Unmoderated.js b/src/components/Modqueue/Unmoderated.js
index 9d466b3..80b5ef3 100644
--- a/src/components/Modqueue/Unmoderated.js
+++ b/src/components/Modqueue/Unmoderated.js
@@ -145,6 +145,16 @@ function Unmoderated() {
 }
 
 
-Unmoderated.propTypes = {};
+
 
 export default Unmoderated;
+
+
+Unmoderated.propTypes = {
+    subreddits: PropTypes.array,
+    removedPosts: PropTypes.array,
+    approvedPosts: PropTypes.array,
+     handleApprove: PropTypes.func,
+     handleDisapprove: PropTypes.func
+
+}
\ No newline at end of file
diff --git a/src/components/Notification/Notification.js b/src/components/Notification/Notification.js
index 8795f56..161d74f 100644
--- a/src/components/Notification/Notification.js
+++ b/src/components/Notification/Notification.js
@@ -303,36 +303,10 @@ Notification.propTypes = {
      * The type of notification
      */
     type: propTypes.oneOf(['comment', 'message', 'chat', 'friendRequest', 'newPost', 'report']),
-    /**
-     * The user name
-     */
-    userName: propTypes.string,
-    /**
-     * The recipient user ID
-     */
-    recipientUserId: propTypes.string,
-    /**
-     * The sender user email
-     */
-    senderUserEmail: propTypes.string,
-    /**
-     * The sender user ID
-     */
-    senderUserId: propTypes.string,
-    /**
-     * The thread ID
-     */
-    threadID: propTypes.string,
-    /**
-     * The thread data
-     */
-    threadData: propTypes.string,
-    /**
-     * The timestamp
-     */
-    timestamp: propTypes.string,
-    /**
-     * The read status
-     */
-    isRead: propTypes.string,
+    setNotificationCount: propTypes.func.isRequired,
+
+    contentID: propTypes.object.isRequired,
+    content: propTypes.string.isRequired,
+    createdAt: propTypes.string.isRequired,
+    read: propTypes.bool.isRequired,
 }
\ No newline at end of file
diff --git a/src/components/Notification/oldnotifications.js b/src/components/Notification/oldnotifications.js
index b07235b..e93fa04 100644
--- a/src/components/Notification/oldnotifications.js
+++ b/src/components/Notification/oldnotifications.js
@@ -295,41 +295,12 @@ const OldNotification = ({setNotificationCount}) => {
 
 export default OldNotification;
 
-Notification.propTypes = {
-    /**
-     * The type of notification
-     */
+OldNotification.propTypes = {
     type: propTypes.oneOf(['comment', 'message', 'chat', 'friendRequest', 'newPost', 'report']),
-    /**
-     * The user name
-     */
-    userName: propTypes.string,
-    /**
-     * The recipient user ID
-     */
-    recipientUserId: propTypes.string,
-    /**
-     * The sender user email
-     */
-    senderUserEmail: propTypes.string,
-    /**
-     * The sender user ID
-     */
-    senderUserId: propTypes.string,
-    /**
-     * The thread ID
-     */
-    threadID: propTypes.string,
-    /**
-     * The thread data
-     */
-    threadData: propTypes.string,
-    /**
-     * The timestamp
-     */
-    timestamp: propTypes.string,
-    /**
-     * The read status
-     */
-    isRead: propTypes.string,
+    setNotificationCount: propTypes.func.isRequired,
+
+    contentID: propTypes.object.isRequired,
+    content: propTypes.string.isRequired,
+    createdAt: propTypes.string.isRequired,
+    read: propTypes.bool.isRequired,
 }
\ No newline at end of file
diff --git a/src/layouts/UserStats.js b/src/layouts/UserStats.js
index b391c8b..9732843 100644
--- a/src/layouts/UserStats.js
+++ b/src/layouts/UserStats.js
@@ -8,18 +8,18 @@ import Cookies from "js-cookie";
 import { useParams } from "react-router-dom";
 
 import {
-  Card,
-  Typography,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  TextField,
-  RadioGroup,
-  Radio,
-  FormControlLabel,
-  InputLabel,
-  Snackbar,
+    Card,
+    Typography,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    TextField,
+    RadioGroup,
+    Radio,
+    FormControlLabel,
+    InputLabel,
+    Snackbar,
 } from "@mui/material";
 import Button from "@mui/material/Button";
 import MoreVert from "@mui/icons-material/MoreVert";
@@ -36,334 +36,334 @@ import CustomSnackbar from "../components/MUIEdited/CustomSnackbar";
 import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
 
 export default function UserStats(props) {
-  const username = props.username;
-  const [stats, setStats] = useState([]);
-  const [anchorEl, setAnchorEl] = React.useState(null);
-  const [openReport, setOpenReport] = React.useState(false);
-  const [reason, setReason] = React.useState("");
+    const username = props.username;
+    const [stats, setStats] = useState([]);
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const [openReport, setOpenReport] = React.useState(false);
+    const [reason, setReason] = React.useState("");
 
-  const [radioValue, setRadioValue] = React.useState("");
-  const [offense, setOffense] = React.useState("");
-  const [followed, setFollowed] = useState(false);
-  const [snack, openSnack] = useState(false);
-  const [followStatus, setFollowStatus] = useState(false);
-  const [blockedStatus, setBlockedStatus] = useState(false);
-  const [blockMessage, setBlockMessage]= useState("");
-  const handleRadioChange = (event) => {
-    setRadioValue(event.target.value);
-    setOffense(event.target.value);
-  };
-
-  const openReportPopUp = (bool) => {
-    setOpenReport(bool);
-  };
+    const [radioValue, setRadioValue] = React.useState("");
+    const [offense, setOffense] = React.useState("");
+    const [followed, setFollowed] = useState(false);
+    const [snack, openSnack] = useState(false);
+    const [followStatus, setFollowStatus] = useState(false);
+    const [blockedStatus, setBlockedStatus] = useState(false);
+    const [blockMessage, setBlockMessage]= useState("");
+    const handleRadioChange = (event) => {
+        setRadioValue(event.target.value);
+        setOffense(event.target.value);
+    };
 
-  const handleCloseReport = () => {
-    setOpenReport(false);
-  };
+    const openReportPopUp = (bool) => {
+        setOpenReport(bool);
+    };
 
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
+    const handleCloseReport = () => {
+        setOpenReport(false);
+    };
 
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
 
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
 
-  const sendReport = () => {
-    const token = Cookies.get("token");
 
-    const config = {
-      headers: { Authorization: `Bearer ${token}` },
-    };
+    const sendReport = () => {
+        const token = Cookies.get("token");
 
-    axios.post("http://localhost:4000/reports", {
-      name: localStorage.getItem("username"),
-      offense: offense,
-      reason: reason,
-      reportedUser: username,
+        const config = {
+            headers: { Authorization: `Bearer ${token}` },
+        };
 
-    });
-  };
+        axios.post("http://localhost:4000/reports", {
+            name: localStorage.getItem("username"),
+            offense: offense,
+            reason: reason,
+            reportedUser: username,
 
-  useEffect(() => {
-    const token = Cookies.get("token");
-    const config = {
-      headers: { Authorization: `Bearer ${token}` },
+        });
     };
 
-    axios
-      .get(`http://localhost:8000/api/v1/users/${username}/about`, config)
-      .then((response) => {
-        setStats(response.data.data);
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  }, [username]);
+    useEffect(() => {
+        const token = Cookies.get("token");
+        const config = {
+            headers: { Authorization: `Bearer ${token}` },
+        };
 
-  useEffect(() => {
-    console.log("useEffect");
-    const token = Cookies.get("token");
+        axios
+            .get(`http://localhost:8000/api/v1/users/${username}/about`, config)
+            .then((response) => {
+                setStats(response.data.data);
+            })
+            .catch((error) => {
+                console.log(error);
+            });
+    }, [username]);
 
-    const config = {
-      headers: { Authorization: `Bearer ${token}` },
-    };
+    useEffect(() => {
+        console.log("useEffect");
+        const token = Cookies.get("token");
 
-    axios
-      .get(`http://localhost:8000/api/v1/users/me/current`, config)
-      .then((response) => {
-          let followedUsers = response.data.data.user.followedUsers.map(user => user.username);
-        let followed = followedUsers.includes(username);
-          let blockedUsers = response.data.data.user.blockedUsers.map(user => user.username);
-          let blocked = blockedUsers.includes(username);
-        console.log(response.data.data.user.blockedUsers);
-        setFollowStatus(followed);
-        setBlockedStatus(blocked);
-        console.log("followed", followed);
-        console.log("blocked", blocked);
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  }, []);
+        const config = {
+            headers: { Authorization: `Bearer ${token}` },
+        };
 
-  const toggleFollow = () => {
-    const token = Cookies.get("token");
+        axios
+            .get(`http://localhost:8000/api/v1/users/me/current`, config)
+            .then((response) => {
+                let followedUsers = response.data.data.user.followedUsers.map(user => user.username);
+                let followed = followedUsers.includes(username);
+                let blockedUsers = response.data.data.user.blockedUsers.map(user => user.username);
+                let blocked = blockedUsers.includes(username);
+                console.log(response.data.data.user.blockedUsers);
+                setFollowStatus(followed);
+                setBlockedStatus(blocked);
+                console.log("followed", followed);
+                console.log("blocked", blocked);
+            })
+            .catch((error) => {
+                console.log(error);
+            });
+    }, []);
 
-    const config = {
-      headers: { Authorization: `Bearer ${token}` },
-    };
+    const toggleFollow = () => {
+        const token = Cookies.get("token");
 
-    if (!followStatus) {
-      axios
-        .post(
-          `http://localhost:8000/api/v1/users/me/friend/${username}`,{}
-         , config
-        )
-        .then((response) => {
-          setFollowStatus(response.status === 200 ? true : false);
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    } else {
-      axios
-        .delete(
-          `http://localhost:8000/api/v1/users/me/friend/${username}`,
-          config
-        )
-        .then((response) => {
-          setFollowStatus(response.status === 204 ? false : true);
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    }
-  };
+        const config = {
+            headers: { Authorization: `Bearer ${token}` },
+        };
 
-  const handleBlock = () => {
-    const token = Cookies.get("token");
-    console.log('token', token);
-    const config = {
-      headers: { Authorization: `Bearer ${token}` },
+        if (!followStatus) {
+            axios
+                .post(
+                    `http://localhost:8000/api/v1/users/me/friend/${username}`,{}
+                    , config
+                )
+                .then((response) => {
+                    setFollowStatus(response.status === 200 ? true : false);
+                })
+                .catch((error) => {
+                    console.log(error);
+                });
+        } else {
+            axios
+                .delete(
+                    `http://localhost:8000/api/v1/users/me/friend/${username}`,
+                    config
+                )
+                .then((response) => {
+                    setFollowStatus(response.status === 204 ? false : true);
+                })
+                .catch((error) => {
+                    console.log(error);
+                });
+        }
     };
-    console.log('config', config);
-    console.log("blockedStatus", blockedStatus);
-    console.log('username',username);
-    if (!blockedStatus) {
-      axios.post(`http://localhost:8000/api/v1/users/me/block/${username}`,{} ,config)
-        .then((response) => {
-          setBlockedStatus(response.status == 200 ? true : false)
-            setBlockMessage(`You have blocked ${username}`);
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    } else {
-      axios.delete(`http://localhost:8000/api/v1/users/me/block/${username}`,config,{})
-        .then((response) => {
-          setBlockedStatus(response.status == 204 ? false : true);
-            setBlockMessage(`You have unblocked ${username}`);
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    }
-  };
 
-  return (
-    <div style={{ marginLeft: "10px", marginTop: "20px" }}>
+    const handleBlock = () => {
+        const token = Cookies.get("token");
+        console.log('token', token);
+        const config = {
+            headers: { Authorization: `Bearer ${token}` },
+        };
+        console.log('config', config);
+        console.log("blockedStatus", blockedStatus);
+        console.log('username',username);
+        if (!blockedStatus) {
+            axios.post(`http://localhost:8000/api/v1/users/me/block/${username}`,{} ,config)
+                .then((response) => {
+                    setBlockedStatus(response.status == 200 ? true : false)
+                    setBlockMessage(`You have blocked ${username}`);
+                })
+                .catch((error) => {
+                    console.log(error);
+                });
+        } else {
+            axios.delete(`http://localhost:8000/api/v1/users/me/block/${username}`,config,{})
+                .then((response) => {
+                    setBlockedStatus(response.status == 204 ? false : true);
+                    setBlockMessage(`You have unblocked ${username}`);
+                })
+                .catch((error) => {
+                    console.log(error);
+                });
+        }
+    };
 
-      <CustomSnackbar
-        isOpen={snack}
-        onClose={() => openSnack(false)}
-        message="User has been reported to moderators. Thank you for helping keep our community safe!"
-        severity="warning"
-      />
-      <Dialog open={openReport} onClose={handleCloseReport}>
-        <DialogTitle>Report User</DialogTitle>
-        <DialogContent sx={{ width: 300 }}>
-          <TextField
-            autoFocus
-            margin="dense"
-            label="Reason for Reporting (optional)"
-            fullWidth
-            value={reason}
-            onChange={(e) => setReason(e.target.value)}
-          />
-          <RadioGroup value={radioValue} onChange={handleRadioChange}>
-            <InputLabel sx={{ margin: 2 }}>Type of offense</InputLabel>
+    return (
+        <div style={{ marginLeft: "10px", marginTop: "20px" }}>
 
-            <FormControlLabel
-              value="Sexual Harassment"
-              control={<Radio />}
-              label={
-                <>
-                  <MdFmdBad />
-                  Sexual Harassment
-                </>
-              }
+            <CustomSnackbar
+                isOpen={snack}
+                onClose={() => openSnack(false)}
+                message="User has been reported to moderators. Thank you for helping keep our community safe!"
+                severity="warning"
             />
+            <Dialog open={openReport} onClose={handleCloseReport}>
+                <DialogTitle>Report User</DialogTitle>
+                <DialogContent sx={{ width: 300 }}>
+                    <TextField
+                        autoFocus
+                        margin="dense"
+                        label="Reason for Reporting (optional)"
+                        fullWidth
+                        value={reason}
+                        onChange={(e) => setReason(e.target.value)}
+                    />
+                    <RadioGroup value={radioValue} onChange={handleRadioChange}>
+                        <InputLabel sx={{ margin: 2 }}>Type of offense</InputLabel>
 
-            <FormControlLabel
-              value="Bullying"
-              control={<Radio />}
-              label={
-                <>
-                  <GiBullyMinion />
-                  Bullying
-                </>
-              }
-            />
+                        <FormControlLabel
+                            value="Sexual Harassment"
+                            control={<Radio />}
+                            label={
+                                <>
+                                    <MdFmdBad />
+                                    Sexual Harassment
+                                </>
+                            }
+                        />
 
-            <FormControlLabel
-              value="Inappropriate Avatar"
-              control={<Radio />}
-              label={
-                <>
-                  <MdOutlineQuestionAnswer /> Inappropriate Avatar
-                </>
-              }
-            />
-          </RadioGroup>
-        </DialogContent>
+                        <FormControlLabel
+                            value="Bullying"
+                            control={<Radio />}
+                            label={
+                                <>
+                                    <GiBullyMinion />
+                                    Bullying
+                                </>
+                            }
+                        />
+
+                        <FormControlLabel
+                            value="Inappropriate Avatar"
+                            control={<Radio />}
+                            label={
+                                <>
+                                    <MdOutlineQuestionAnswer /> Inappropriate Avatar
+                                </>
+                            }
+                        />
+                    </RadioGroup>
+                </DialogContent>
 
-        <DialogActions>
-          <Button
-            onClick={() => {
-              setOpenReport(false);
-              handleClose();
-            }}
-          >
-            Cancel
-          </Button>
-          <Button
-            onClick={() => {
-              openSnack(true);
-              sendReport();
-              setOpenReport(false);
-            }}
-            disabled={!offense}
-            variant="contained"
-            color="error"
-          >
-            Report <WarningAmberIcon />
-          </Button>
-        </DialogActions>
-      </Dialog>
+                <DialogActions>
+                    <Button
+                        onClick={() => {
+                            setOpenReport(false);
+                            handleClose();
+                        }}
+                    >
+                        Cancel
+                    </Button>
+                    <Button
+                        onClick={() => {
+                            openSnack(true);
+                            sendReport();
+                            setOpenReport(false);
+                        }}
+                        disabled={!offense}
+                        variant="contained"
+                        color="error"
+                    >
+                        Report <WarningAmberIcon />
+                    </Button>
+                </DialogActions>
+            </Dialog>
 
-      <Menu
-        id="dropdown-menu"
-        anchorEl={anchorEl}
-        open={Boolean(anchorEl)}
-        onClose={handleClose}
-      >
-        <MenuItem onClick={handleClose}>Share</MenuItem>
-        <MenuItem onClick={handleClose}>Send a Message</MenuItem>
-        <MenuItem onClick={handleBlock}>un/Block Account</MenuItem>
-        <MenuItem
-          onClick={() => {
-            handleClose();
-            setOpenReport(true);
-          }}
-        >
-          Report Profile
-        </MenuItem>
-      </Menu>
-      <Card
-        sx={{
-          width: "100%",
-          padding: "1rem",
-          marginBottom: "1rem",
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "center",
-          justifyContent: "center",
-          boxShadow: "0 0 5px rgba(0, 0, 0, 0.1)",
-          borderRadius: "25px",
-        }}
-      >
+            <Menu
+                id="dropdown-menu"
+                anchorEl={anchorEl}
+                open={Boolean(anchorEl)}
+                onClose={handleClose}
+            >
+                <MenuItem onClick={handleClose}>Share</MenuItem>
+                <MenuItem onClick={handleClose}>Send a Message</MenuItem>
+                <MenuItem onClick={handleBlock}>un/Block Account</MenuItem>
+                <MenuItem
+                    onClick={() => {
+                        handleClose();
+                        setOpenReport(true);
+                    }}
+                >
+                    Report Profile
+                </MenuItem>
+            </Menu>
+            <Card
+                sx={{
+                    width: "100%",
+                    padding: "1rem",
+                    marginBottom: "1rem",
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    boxShadow: "0 0 5px rgba(0, 0, 0, 0.1)",
+                    borderRadius: "25px",
+                }}
+            >
         <span style={{ display: "inline" }}>
           <div className="title-and-options">
             <Typography variant="h5" sx={{ marginBottom: "1rem" }}>
               u/{username}
             </Typography>
             <Button
-              aria-controls="dropdown-menu"
-              aria-haspopup="true"
-              onClick={handleClick}
-              sx={{
-                color: "#000",
-                width: "40px",
-                borderRadius: "50px",
-                border: "1px solid #000",
-                boxShadow: "none",
-                padding: "0",
-                minWidth: "0",
-                marginRight: "0.5rem",
-              }}
+                aria-controls="dropdown-menu"
+                aria-haspopup="true"
+                onClick={handleClick}
+                sx={{
+                    color: "#000",
+                    width: "40px",
+                    borderRadius: "50px",
+                    border: "1px solid #000",
+                    boxShadow: "none",
+                    padding: "0",
+                    minWidth: "0",
+                    marginRight: "0.5rem",
+                }}
             >
               <MoreVert />
             </Button>{" "}
           </div>
           <div>
             <Button
-              onClick={toggleFollow}
-              endIcon={
-                !followStatus ? (
-                  <AddCircleOutlineTwoToneIcon />
-                ) : (
-                  <RemoveCircleOutlineIcon />
-                )
-              }
-              sx={{
-                backgroundColor: "#0079d3",
-                color: "#fff",
-                "&:hover": {
-                  backgroundColor: "#005c9e",
-                },
-                borderRadius: "50px",
-                padding: "0.5rem 1rem",
-                marginTop: "1rem",
-              }}
+                onClick={toggleFollow}
+                endIcon={
+                    !followStatus ? (
+                        <AddCircleOutlineTwoToneIcon />
+                    ) : (
+                        <RemoveCircleOutlineIcon />
+                    )
+                }
+                sx={{
+                    backgroundColor: "#0079d3",
+                    color: "#fff",
+                    "&:hover": {
+                        backgroundColor: "#005c9e",
+                    },
+                    borderRadius: "50px",
+                    padding: "0.5rem 1rem",
+                    marginTop: "1rem",
+                }}
             >
               {followStatus ? "Unfollow" : "Follow"}
             </Button>
 
             <Button
-              endIcon={<IoChatbubbleEllipsesOutline />}
-              sx={{
-                "&:hover": {
-                  backgroundColor: "#f5f5f5",
-                },
-                borderRadius: "50px",
-                border: "1px solid #000",
-                padding: "0.5rem 1rem",
-                marginTop: "1rem",
-                marginLeft: "0.8rem",
-              }}
+                endIcon={<IoChatbubbleEllipsesOutline />}
+                sx={{
+                    "&:hover": {
+                        backgroundColor: "#f5f5f5",
+                    },
+                    borderRadius: "50px",
+                    border: "1px solid #000",
+                    padding: "0.5rem 1rem",
+                    marginTop: "1rem",
+                    marginLeft: "0.8rem",
+                }}
             >
               Chat
             </Button>
@@ -374,28 +374,28 @@ export default function UserStats(props) {
             <div>comment karma: {stats.commentKarma}</div>
             <div>
               Cake Day:
-              {/* {stats.cakeDay.slice(0, 10)} */}
+                {/* {stats.cakeDay.slice(0, 10)} */}
             </div>
           </div>
         </span>
-        <hr />
-        <Typography
-          variant="h6"
-          sx={{ marginBottom: "1rem", fontSize: "15px" }}
-        >
-          Moderator of these communities:
-        </Typography>
-      </Card>
-        <Snackbar
-            open={blockMessage !== ""}
-            autoHideDuration={6000}
-            onClose={() => setBlockMessage("")}
-            anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-        >
-            <Alert onClose={() => setBlockMessage("")} severity="success">
-                {blockMessage}
-            </Alert>
-        </Snackbar>
-    </div>
-  );
-}
+                <hr />
+                <Typography
+                    variant="h6"
+                    sx={{ marginBottom: "1rem", fontSize: "15px" }}
+                >
+                    Moderator of these communities:
+                </Typography>
+            </Card>
+            <Snackbar
+                open={blockMessage !== ""}
+                autoHideDuration={6000}
+                onClose={() => setBlockMessage("")}
+                anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+            >
+                <Alert onClose={() => setBlockMessage("")} severity="success">
+                    {blockMessage}
+                </Alert>
+            </Snackbar>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/stories/CommunityRules.stories.js b/src/stories/CommunityRules.stories.js
new file mode 100644
index 0000000..4200a3f
--- /dev/null
+++ b/src/stories/CommunityRules.stories.js
@@ -0,0 +1,26 @@
+import react from 'react';
+import CommunityRules from '../components/Modqueue/CommunityRules';
+
+export default {
+    title: 'CommunityRules',
+    component: CommunityRules,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    };
+
+const Template = (args) => (
+    <>
+        <CommunityRules {...args} />
+    </>
+
+);
+
+export const CommunityRules1 = Template.bind({});
+CommunityRules1.args = {
+    subreddits: [], // Provide mock data for subreddits
+    communityRules: [], // Provide mock data for communityRules
+
+}
+
diff --git a/src/stories/CommunitySettings.stories.js b/src/stories/CommunitySettings.stories.js
new file mode 100644
index 0000000..8314502
--- /dev/null
+++ b/src/stories/CommunitySettings.stories.js
@@ -0,0 +1,25 @@
+import react from 'react';
+import CommunitySettings from '../components/Modqueue/CommunitySettings';
+
+export default {
+  title: 'CommunitySettings',
+  component: CommunitySettings,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    
+};
+const template = (args) => (
+    <>
+        <CommunitySettings {...args} />
+    </>
+
+);
+
+export const CommunitySettings1 = template.bind({});
+CommunitySettings1.args = {
+    subreddits: [], // Provide mock data for subreddits
+    communitySettings: [], // Provide mock data for communitySettings
+
+}
diff --git a/src/stories/Edited.stories.js b/src/stories/Edited.stories.js
new file mode 100644
index 0000000..28f1146
--- /dev/null
+++ b/src/stories/Edited.stories.js
@@ -0,0 +1,26 @@
+import react from 'react';
+import Edited from '../components/Modqueue/Edited';
+
+export default {
+  title: 'Edited',
+  component: Edited,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+
+const Template = (args) => (
+  <>
+    <Edited {...args} />
+  </>
+
+);
+
+export const Edited1 = Template.bind({});
+Edited1.args = {
+  subreddits: [], // Provide mock data for subreddits
+  editedPosts: [], // Provide mock data for editedPosts
+
+}
diff --git a/src/stories/ModerationRoles.stories.js b/src/stories/ModerationRoles.stories.js
new file mode 100644
index 0000000..994b3b1
--- /dev/null
+++ b/src/stories/ModerationRoles.stories.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import ModerationRoles from '../components/Modqueue/ModerationRoles';
+
+export default {
+    title: 'ModerationRoles',
+    component: ModerationRoles,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+
+}
+const template = (args) => (
+    <>
+        <ModerationRoles {...args} />
+    </>
+
+);
+
+export const ModerationRoles1 = template.bind({});
+ModerationRoles1.args = {
+    subreddits: [], // Provide mock data for subreddits
+}
\ No newline at end of file
diff --git a/src/stories/NotificationComponent.stories.js b/src/stories/NotificationComponent.stories.js
index 2eb14d5..581ae42 100644
--- a/src/stories/NotificationComponent.stories.js
+++ b/src/stories/NotificationComponent.stories.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
 import Notification from '../components/Notification/Notification';
 
 //👇 This default export determines where your story goes in the story list
@@ -15,9 +16,10 @@ export default {
 
 
 //exporting with args for the component
-const Template = (args) => <Notification {...args} />;
-export const Primary = Template.bind({});
-Primary.args = {
+const Template = (args) => <Router><Notification {...args} /></Router>;
+;
+export const notifications = Template.bind({});
+notifications.args = {
     primary: true,
     label: 'Button',
 };
\ No newline at end of file
diff --git a/src/stories/OldNotification.stories.js b/src/stories/OldNotification.stories.js
new file mode 100644
index 0000000..bc75b06
--- /dev/null
+++ b/src/stories/OldNotification.stories.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import OldNotification from '../components/Notification/oldnotifications';
+
+//👇 This default export determines where your story goes in the story list
+
+export default {
+    title: 'OldNotification',
+    component: OldNotification,
+    parameters: {
+        layout: 'centered',
+    },
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+};
+
+
+//exporting with args for the component
+const Template = (args) => <Router><OldNotification {...args} /></Router>;
+;
+export const oldnotifications = Template.bind({});
+oldnotifications.args = {
+    primary: true,
+    label: 'Button',
+};
\ No newline at end of file
diff --git a/src/stories/Removed.stories.js b/src/stories/Removed.stories.js
new file mode 100644
index 0000000..30c77db
--- /dev/null
+++ b/src/stories/Removed.stories.js
@@ -0,0 +1,24 @@
+import react from 'react';
+import Removed from './../components/Modqueue/Removed';
+
+export default {
+    title: 'Removed',
+    component: Removed,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    };
+
+export const Removed1 = (args) => (
+    <>
+        <Removed {...args} />
+    </>
+
+);
+
+Removed1.args = {
+    subreddits: [], // Provide mock data for subreddits
+    removedPosts: [], // Provide mock data for removedPosts
+
+}
diff --git a/src/stories/Unmoderated.stories.js b/src/stories/Unmoderated.stories.js
new file mode 100644
index 0000000..9026e4e
--- /dev/null
+++ b/src/stories/Unmoderated.stories.js
@@ -0,0 +1,30 @@
+import react from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import Unmoderated from '../components/Modqueue/Unmoderated';
+
+//👇 This default export determines where your story goes in the story list
+
+export default {
+    title: 'Unmoderated',
+    component: Unmoderated,
+    parameters: {
+        layout: 'centered',
+    },
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+};
+
+
+//👇 We create a "template" of how args map to rendering
+const Template = (args) => <Router><Unmoderated {...args} /></Router>;
+;
+export const unmoderated = Template.bind({});
+
+
+unmoderated.args = {
+    subreddits: [], // Provide mock data for subreddits
+    removedPosts: [], // Provide mock data for removedPosts
+    approvedPosts: [], // Provide mock data for approvedPosts
+    handleApprove: () => {}, // Provide a mock function for handleApprove
+    handleDisapprove: () => {}, // Provide a mock function for handleDisapprove
+};
diff --git a/src/tests/Unit/CommunityRules.test.js b/src/tests/Unit/CommunityRules.test.js
new file mode 100644
index 0000000..6e32f5b
--- /dev/null
+++ b/src/tests/Unit/CommunityRules.test.js
@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import axios from 'axios';
+import CommunityRules from './../../components/Modqueue/CommunityRules';
+
+jest.mock('axios');
+
+describe('CommunityRules component', () => {
+    beforeEach(() => {
+        axios.get.mockResolvedValue({
+            data: [
+                {id: 1, name: 'Subreddit1'},
+                {id: 2, name: 'Subreddit2'}
+            ]
+        });
+    });
+
+    it('renders without crashing', () => {
+        render(<CommunityRules/>);
+    });
+
+    it('fetches the list of subreddits', async () => {
+        render(<CommunityRules/>);
+
+        await waitFor(() => {
+            expect(axios.get).toHaveBeenCalledWith('http://localhost:4000/api/subreddits');
+        });
+    });
+
+    it('displays the list of subreddits', async () => {
+        render(<CommunityRules/>);
+
+        await waitFor(() => {
+            const subredditSelect = screen.getByTestId('subreddit-select');
+            const subredditOptions = subredditSelect.querySelectorAll('option');
+
+        });
+
+        const subredditSelect = screen.getByTestId('subreddit-select');
+        console.log(subredditSelect.outerHTML);
+        expect(subredditSelect).toBeInTheDocument();
+
+        const subredditOptions = subredditSelect.querySelectorAll('option');
+        expect(subredditOptions.length).toBe(0);
+    });
+
+
+});
\ No newline at end of file
diff --git a/src/tests/Unit/Notification.test.js b/src/tests/Unit/Notification.test.js
index eed4945..13876c5 100644
--- a/src/tests/Unit/Notification.test.js
+++ b/src/tests/Unit/Notification.test.js
@@ -1,64 +1,115 @@
 import React from 'react';
-import { render, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import axios from 'axios';
-import MockAdapter from 'axios-mock-adapter';
-import Notification from '../../components/Notification/Notification'; // Assuming the component file is in the same directory
-
-// Mock Axios requests
-const mock = new MockAdapter(axios);
-
-// Sample notification data for testing
-const testData = [
-    {
-        id: 1,
-        userName: 'John',
-        type: 'comment',
-        threadData: 'Some thread data',
-        timestamp: '2024-04-11T12:00:00Z',
-        status: false,
-    },
-];
-
-// Mock Axios responses
-mock.onGet('http://localhost:8000/get_notifications').reply(200, testData);
-mock.onPost('http://localhost:8000/hide_notification').reply(200, { status: 'true' });
+import Notification from './../../components/Notification/Notification';
+import {BrowserRouter as Router} from 'react-router-dom';
+import {waitFor} from '@testing-library/dom';
+jest.mock('axios');
 
 describe('Notification Component', () => {
-    it('fetches and displays notifications correctly', async () => {
-        const { getByAltText, getByText, queryByText } = render(<Notification setNotificationCount={() => {}} />);
+    it('should render a comment notification', async () => {
+        axios.get.mockResolvedValue({
+            data: {
+                data: {
+                    notifications: [
+                        {
+                            type: 'comment',
+                            contentID: {
+                                userID: {
+                                    username: 'Test User',
+                                    profilePicture: 'Test Picture',
+                                },
+                                id: '1',
+                                title: 'Test Comment',
+                            },
+                            content: 'This is a test comment.',
+                            createdAt: '2022-01-01T00:00:00.000Z',
+                        },
+                    ],
+                },
+            },
+        });
+        const setNotificationCount = jest.fn();
 
-        // Wait for the loading state to disappear
-        await waitFor(() => expect(queryByText('Loading...')).not.toBeInTheDocument());
+        render(            <Router>
+            <Notification setNotificationCount={setNotificationCount} />
+        </Router>);
 
-        // Wait for the image to be rendered
-        await waitFor(() => expect(getByAltText('comment')).toBeInTheDocument());
+        await waitFor(() => {
+            const commentNotification = screen.getByText('Comment Notification');
+            expect(commentNotification).toBeInTheDocument();
+            expect(screen.getByText('Test Comment')).toBeInTheDocument();
+        });
 
-        // Check if the notification is displayed
-        expect(getByText('John has commented your post')).toBeInTheDocument();
-        expect(getByText('Some thread data')).toBeInTheDocument();
-        expect(getByText('2024-04-11T12:00:00Z')).toBeInTheDocument();
     });
 
-    it('marks notification as read on click', async () => {
-        const { getByText, queryByText } = render(<Notification setNotificationCount={() => {}} />);
+    it('should render a message notification', async() => {
+        axios.get.mockResolvedValue({
+            data: {
+                data: {
+                    notifications: [
+                        {
+                            type: 'message',
+                            contentID: {
+                                userID: {
+                                    username: 'Test User',
+                                    profilePicture: 'Test Picture',
+                                },
+                                id: '1',
+                                title: 'Test Message',
+                            },
+                            content: 'This is a test message.',
+                            createdAt: '2022-01-01T00:00:00.000Z',
+                            read: false,
+                        },
+                    ],
+                },
+            },
+        });
+        const setNotificationCount = jest.fn();
 
-        // Wait for the notification data to be displayed
-        await waitFor(() => expect(queryByText('John has commented your post')).toBeInTheDocument());
-
-        // Click on the notification to mark it as read
-        fireEvent.click(getByText('John has commented your post'));
+        render(            <Router>
+            <Notification setNotificationCount={setNotificationCount} />
+        </Router>);
+        await waitFor(() => {
+            const messageNotification = screen.getByText('Message Notification');
+            expect(messageNotification).toBeInTheDocument();
+        });
+    });
 
-        // Check if the notification text is marked as read by checking for status change sending a post request to the server changing the status to true
-        await waitFor(() => expect(queryByText('John has commented your post')).toBeInTheDocument());
 
-        //check if the server has received the post request
-        expect(mock.history.post.length).toBe(1);
-        // check if the client sent post request with the correct data
-        expect(JSON.parse(mock.history.post[0].data)).toEqual({ notification_id: 1 });
-        // check if the notification is marked as read in server response data that is sent by client to server
-        const response = await axios.post('http://localhost:8000/hide_notification', { notification_id: 1 });
-        console.log(response.data);
-        expect(response.data.status).toEqual('true');
+    it('should render a friend request notification', async() => {
+        axios.get.mockResolvedValue({
+            data: {
+                data: {
+                    notifications: [
+                        {
+                            type: 'follow',
+                            contentID: {
+                                userID: {
+                                    username: 'Test User',
+                                    profilePicture: 'Test Picture',
+                                },
+                                id: '1',
+                                title: 'Test Message',
+                            },
+                            content: 'This is a test follow.',
+                            createdAt: '2022-01-01T00:00:00.000Z',
+                            read: false,
+                        },
+                    ],
+                },
+            },
+        });
+        const setNotificationCount = jest.fn();
 
+        render(            <Router>
+            <Notification setNotificationCount={setNotificationCount} />
+        </Router>);
+        await waitFor(() => {
+            const messageNotification = screen.getByText('Follow Notification');
+            expect(messageNotification).toBeInTheDocument();
+        });
     });
+    
 });
\ No newline at end of file
diff --git a/src/tests/Unit/OldNotifications.test.js b/src/tests/Unit/OldNotifications.test.js
new file mode 100644
index 0000000..dda792e
--- /dev/null
+++ b/src/tests/Unit/OldNotifications.test.js
@@ -0,0 +1,116 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import axios from 'axios';
+import OldNotification from './../../components/Notification/oldnotifications';
+import {BrowserRouter as Router} from 'react-router-dom';
+import {waitFor} from '@testing-library/dom';
+jest.mock('axios');
+
+describe('Notification Component', () => {
+    it('should render a comment notification', async () => {
+        axios.get.mockResolvedValue({
+            data: {
+                data: {
+                    notifications: [
+                        {
+                            type: 'comment',
+                            contentID: {
+                                userID: {
+                                    username: 'Test User',
+                                    profilePicture: 'Test Picture',
+                                },
+                                id: '1',
+                                title: 'Test Comment',
+                            },
+                            content: 'This is a test comment.',
+                            createdAt: '2022-01-01T00:00:00.000Z',
+                            read : true,
+                        },
+                    ],
+                },
+            },
+        });
+        const setNotificationCount = jest.fn();
+
+        render(            <Router>
+            <OldNotification setNotificationCount={setNotificationCount} />
+        </Router>);
+
+        await waitFor(() => {
+            const commentNotification = screen.getByText('Comment Notification');
+            expect(commentNotification).toBeInTheDocument();
+            expect(screen.getByText('Test Comment')).toBeInTheDocument();
+        });
+
+    });
+
+    it('should render a message notification', async() => {
+        axios.get.mockResolvedValue({
+            data: {
+                data: {
+                    notifications: [
+                        {
+                            type: 'message',
+                            contentID: {
+                                userID: {
+                                    username: 'Test User',
+                                    profilePicture: 'Test Picture',
+                                },
+                                id: '1',
+                                title: 'Test Message',
+                            },
+                            content: 'This is a test message.',
+                            createdAt: '2022-01-01T00:00:00.000Z',
+                            read: true,
+                        },
+                    ],
+                },
+            },
+        });
+        const setNotificationCount = jest.fn();
+
+        render(            <Router>
+            <OldNotification setNotificationCount={setNotificationCount} />
+        </Router>);
+        await waitFor(() => {
+            const messageNotification = screen.getByText('Message Notification');
+            expect(messageNotification).toBeInTheDocument();
+        });
+    });
+
+
+    it('should render a friend request notification', async() => {
+        axios.get.mockResolvedValue({
+            data: {
+                data: {
+                    notifications: [
+                        {
+                            type: 'follow',
+                            contentID: {
+                                userID: {
+                                    username: 'Test User',
+                                    profilePicture: 'Test Picture',
+                                },
+                                id: '1',
+                                title: 'Test Message',
+                            },
+                            content: 'This is a test follow.',
+                            createdAt: '2022-01-01T00:00:00.000Z',
+                            read: true,
+                        },
+                    ],
+                },
+            },
+        });
+        const setNotificationCount = jest.fn();
+
+        render(            <Router>
+            <OldNotification setNotificationCount={setNotificationCount} />
+        </Router>);
+        await waitFor(() => {
+            const messageNotification = screen.getByText('Follow Notification');
+            expect(messageNotification).toBeInTheDocument();
+        });
+    });
+
+});
\ No newline at end of file
diff --git a/src/tests/Unit/Unmoderated.test.js b/src/tests/Unit/Unmoderated.test.js
new file mode 100644
index 0000000..ff7e0b7
--- /dev/null
+++ b/src/tests/Unit/Unmoderated.test.js
@@ -0,0 +1,81 @@
+import React from 'react';
+import { render, waitFor, fireEvent,within} from '@testing-library/react';
+import axios from 'axios';
+import userEvent from '@testing-library/user-event';
+import Unmoderated from './../../components/Modqueue/Unmoderated';
+
+jest.mock('axios');
+
+describe('Unmoderated component', () => {
+    beforeEach(() => {
+        axios.get.mockImplementation((url) => {
+            switch (url) {
+                case 'http://localhost:4000/api/subreddits':
+                    return Promise.resolve({
+                        data: [{
+                            id: 1,
+                            name: 'r/aww'
+                        },
+                        {
+                            id: 2,
+                            name: 'r/funny'
+                        },
+                        {
+                            id: 3,
+                            name: 'r/pics'
+                        }
+                        ],
+                    });
+                case `http://localhost:4001/api/subreddits/1/removedPosts`:
+                    return Promise.resolve({
+                        data: [{
+                            id: 1,
+                            data: {
+                                type: "post",
+                                data: {
+                                    post: {
+                                        _id: "aa0c",
+                                        votes: {
+                                            upvotes: 1,
+                                            downvotes: 0
+                                        },
+                                        username: "joe",
+                                        title: "sjkna",
+                                        content: "klasfn",
+                                        bold: false,
+                                        italic: false,
+                                        id: "aa0c"
+                                    },
+                                    id: "aa0c"
+                                },
+                                user: {
+                                    id: "a0c",
+                                    name: "joe"
+                                },
+                                date: "2013-01-01T00:00:00Z",
+                                subredditId: "2",
+                                reason: "spam",
+                                id: "aa0c",
+                                removedstatus: true,
+                                spamstatus: true,
+                                removedby: "admin",
+                                status: "disapproved"
+                            }
+                        }]
+                    });
+                default:
+                    return Promise.reject(new Error('not found'));
+            }
+        });
+    });
+
+    it('renders the component', () => {
+        const { getByText } = render(<Unmoderated />);
+        expect(getByText('Select your Subreddit please')).toBeInTheDocument();
+    });
+
+
+
+
+
+});
\ No newline at end of file
diff --git a/src/tests/Unit/userstat.test.js b/src/tests/Unit/userstat.test.js
new file mode 100644
index 0000000..0fd5c79
--- /dev/null
+++ b/src/tests/Unit/userstat.test.js
@@ -0,0 +1,194 @@
+// import React from "react";
+// import { render, waitFor, fireEvent } from "@testing-library/react";
+// import { useEffect, useState } from "react";
+// import { Link } from "react-router-dom";
+// import axios from "axios";
+// import { useParams } from "react-router-dom";
+//
+//
+// import {
+//     Card,
+//     Typography,
+//     Dialog,
+//     DialogActions,
+//     DialogContent,
+//     DialogTitle,
+//     TextField,
+//     RadioGroup,
+//     Radio,
+//     FormControlLabel,
+//     InputLabel,
+//     Snackbar,
+// } from "@mui/material";
+// import Button from "@mui/material/Button";
+// import MoreVert from "@mui/icons-material/MoreVert";
+// import Menu from "@mui/material/Menu";
+// import MenuItem from "@mui/material/MenuItem";
+// import AddCircleOutlineTwoToneIcon from "@mui/icons-material/AddCircleOutlineTwoTone";
+//
+// import UserStats from "../../layouts/UserStats";
+// import { IoChatbubbleEllipsesOutline } from "react-icons/io5";
+// import { GiBullyMinion } from "react-icons/gi";
+// import { MdFmdBad } from "react-icons/md";
+// import { MdOutlineQuestionAnswer } from "react-icons/md";
+// import WarningAmberIcon from "@mui/icons-material/WarningAmber";
+// import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
+//
+//
+// jest.mock("axios");
+//
+// describe("UserStats", () => {
+//     const mockSetFollowStatus = jest.fn();
+//     const mockSetBlockedStatus = jest.fn();
+//     const mockSetStats = jest.fn();
+//     const mockSetOpenReport = jest.fn();
+//     const mockSetReason = jest.fn();
+//     const mockSetRadioValue = jest.fn();
+//     const mockSetFollowed = jest.fn();
+//     const mockSetBlockMessage = jest.fn();
+//
+//     const mockAxiosGet = jest.fn();
+//
+//     beforeEach(() => {
+//         mockAxiosGet.mockResolvedValue({
+//             data: {
+//                 data: {
+//                     followedUsers: ["user1", "user2"],
+//                     blockedUsers: ["user3", "user4"],
+//                 },
+//             },
+//         });
+//
+//         axios.get = mockAxiosGet;
+//     });
+//
+//     it("should update followStatus and blockStatus when called", async () => {
+//         const mockUseParams = jest.fn().mockReturnValue({ username: "testUser" });
+//
+//         render(<UserStats
+//             username="testUser"
+//             setFollowStatus={mockSetFollowStatus}
+//             setBlockedStatus={mockSetBlockedStatus}
+//             setStats={mockSetStats}
+//             setOpenReport={mockSetOpenReport}
+//             setReason={mockSetReason}
+//             setRadioValue={mockSetRadioValue}
+//             setFollowed={mockSetFollowed}
+//             setBlockMessage={mockSetBlockMessage}
+//             useParams={mockUseParams}
+//         />);
+//
+//         await waitFor(() => {
+//             expect(mockSetFollowStatus).toBeCalledWith(false);
+//             expect(mockSetBlockedStatus).toBeCalledWith(false);
+//         });
+//     });
+//
+//     it("should call axios.get when component mounts", async () => {
+//         const mockUseParams = jest.fn().mockReturnValue({ username: "testUser" });
+//
+//         render(<UserStats
+//             username="testUser"
+//             setFollowStatus={mockSetFollowStatus}
+//             setBlockedStatus={mockSetBlockedStatus}
+//             setStats={mockSetStats}
+//             setOpenReport={mockSetOpenReport}
+//             setReason={mockSetReason}
+//             setRadioValue={mockSetRadioValue}
+//             setFollowed={mockSetFollowed}
+//             setBlockMessage={mockSetBlockMessage}
+//             useParams={mockUseParams}
+//         />);
+//
+//         await waitFor(() => {
+//             expect(mockAxiosGet).toBeCalledWith(`http://localhost:8000/api/v1/users/${"testUser"}/about`);
+//         });
+//     });
+//
+//     it("should not call axios.get when component unmounts", async () => {
+//         const mockUseParams = jest.fn().mockReturnValue({ username: "testUser" });
+//
+//         const { unmount } = render(<UserStats
+//             username="testUser"
+//             setFollowStatus={mockSetFollowStatus}
+//             setBlockedStatus={mockSetBlockedStatus}
+//             setStats={mockSetStats}
+//             setOpenReport={mockSetOpenReport}
+//             setReason={mockSetReason}
+//             setRadioValue={mockSetRadioValue}
+//             setFollowed={mockSetFollowed}
+//             setBlockMessage={mockSetBlockMessage}
+//             useParams={mockUseParams}
+//         />);
+//
+//         unmount();
+//
+//         await waitFor(() => {
+//             expect(mockAxiosGet).toBeCalledTimes(1);
+//         });
+//     });
+//
+//     it("should update followStatus and blockStatus when called with different usernames", async () => {
+//         const mockUseParams = jest.fn().mockReturnValue({ username: "testUser" });
+//
+//         render(<UserStats
+//             username="testUser"
+//             setFollowStatus={mockSetFollowStatus}
+//             setBlockedStatus={mockSetBlockedStatus}
+//             setStats={mockSetStats}
+//             setOpenReport={mockSetOpenReport}
+//             setReason={mockSetReason}
+//             setRadioValue={mockSetRadioValue}
+//             setFollowed={mockSetFollowed}
+//             setBlockMessage={mockSetBlockMessage}
+//             useParams={mockUseParams}
+//         />);
+//
+//         await waitFor(() => {
+//             expect(mockSetFollowStatus).toBeCalledWith(true);
+//             expect(mockSetBlockedStatus).toBeCalledWith(false);
+//         });
+//
+//         mockUseParams.mockReturnValueOnce({ username: "differentUser" });
+//
+//         render(<UserStats
+//             username="differentUser"
+//             setFollowStatus={mockSetFollowStatus}
+//             setBlockedStatus={mockSetBlockedStatus}
+//             setStats={mockSetStats}
+//             setOpenReport={mockSetOpenReport}
+//             setReason={mockSetReason}
+//             setRadioValue={mockSetRadioValue}
+//             setFollowed={mockSetFollowed}
+//             setBlockMessage={mockSetBlockMessage}
+//             useParams={mockUseParams}
+//         />);
+//
+//         await waitFor(() => {
+//             expect(mockSetFollowStatus).toBeCalledWith(false);
+//             expect(mockSetBlockedStatus).toBeCalledWith(false);
+//         });
+//     });
+//
+//     it("should not update followStatus and blockStatus when called with wrong username", async () => {
+//         const mockUseParams = jest.fn().mockReturnValue({ username: "wrongUser" });
+//
+//         render(<UserStats
+//             username="wrongUser"
+//             setFollowStatus={mockSetFollowStatus}
+//             setBlockedStatus={mockSetBlockedStatus}
+//             setStats={mockSetStats}
+//             setOpenReport={mockSetOpenReport}
+//             setReason={mockSetReason}
+//             setRadioValue={mockSetRadioValue}
+//             setFollowed={mockSetFollowed}
+//             setBlockMessage={mockSetBlockMessage}
+//             useParams={mockUseParams}
+//         />);
+//
+//         await waitFor(() => {
+//             expect(mockSetFollowStatus).toBeCalledTimes(0);
+//             expect(mockSetBlockedStatus).toBeCalledTimes(0);
+//         });
+//     });
+// });
\ No newline at end of file