ADD units test and js Doc

NonLegit · Nov 7, 2022 · 2c6d76e · 2c6d76e
1 parent 224422a
commit 2c6d76e
Show file tree

Hide file tree

Showing 50 changed files with 14,262 additions and 85 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5502
+}
diff --git a/docs/NotificationsBody_NotificationCategories_NotificationCategories.jsx.html b/docs/NotificationsBody_NotificationCategories_NotificationCategories.jsx.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>JSDoc: Source: NotificationsBody/NotificationCategories/NotificationCategories.jsx</title>
+
+    <script src="scripts/prettify/prettify.js"> </script>
+    <script src="scripts/prettify/lang-css.js"> </script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
+</head>
+
+<body>
+
+<div id="main">
+
+    <h1 class="page-title">Source: NotificationsBody/NotificationCategories/NotificationCategories.jsx</h1>
+
+
+
+
+
+
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>/* eslint-disable import/no-cycle */
+import { useContext, createContext } from 'react';
+import IconButton from '@mui/material/IconButton';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import moment from 'moment/moment';
+import { CategoriesContext } from '../NotificationsBody';
+import {
+  Notification, Options, MenuOptions, NotificationTime,
+  NotificationBody, BodyHead, Body, ContainerHead, SeeMore,
+} from './styles';
+import NotificationImages from './NotificationImage/NotificationImages';
+
+export const ReplayContext = createContext();
+/**
+ * Notification Categories
+ * @return {React.Component} - Retrun all notificaion dependent on type today or earlier
+ */
+function NotificationCategories() {
+  const {
+    earlier, today, handleClose, handleClick, open, anchorEl,
+  } = useContext(CategoriesContext);
+  const options = ['Hide this notification', 'Disable updates from this community'];
+  const value = (today) || earlier;
+  moment.updateLocale('en', {
+    relativeTime: {
+      past: '%s ',
+      ago: '',
+      s: 'now',
+      m: '%d m',
+      h: '%dh',
+      dd: '%dd',
+      MM: moment().format('MMM d'),
+      yy: '%dy',
+    },
+  });
+  return (
+    value?.map((ele, indx) => (
+      &lt;Notification key={`${ele.date}${indx + 0}`}>
+        &lt;ReplayContext.Provider value={ele.replay}>
+          &lt;NotificationImages />
+        &lt;/ReplayContext.Provider>
+        &lt;NotificationBody>
+          &lt;ContainerHead>
+            &lt;BodyHead>
+              { ele.head}
+              &lt;NotificationTime>
+                { ' · ' }
+                { (moment.utc(ele.date).local().startOf('seconds')
+                  .fromNow())}
+              &lt;/NotificationTime>
+            &lt;/BodyHead>
+            &lt;SeeMore>
+              &lt;IconButton
+                id={indx}
+                aria-controls={open ? 'long-menu' : undefined}
+                aria-expanded={open ? 'true' : undefined}
+                aria-haspopup="true"
+                onClick={handleClick}
+                catorige={(today) ? 'today' : 'earlier'}
+              >
+                &lt;MoreHorizIcon />
+              &lt;/IconButton>
+              &lt;MenuOptions
+                anchorOrigin={{
+                  vertical: 'bottom',
+                  horizontal: 'right',
+                }}
+                transformOrigin={{
+                  vertical: 'top',
+                  horizontal: 'right',
+                }}
+                id={indx}
+                anchorEl={anchorEl}
+                open={open}
+                onClose={handleClose}
+              >
+                {options.map((option) => (
+                  &lt;Options
+                    key={option}
+                    selected={option === 'Pyxis'}
+                    onClick={handleClose}
+                  >
+                    {option}
+                  &lt;/Options>
+                ))}
+              &lt;/MenuOptions>
+            &lt;/SeeMore>
+          &lt;/ContainerHead>
+          &lt;Body>{ ele.body}&lt;/Body>
+        &lt;/NotificationBody>
+      &lt;/Notification>
+    ))
+  );
+}
+
+export default NotificationCategories;
+</code></pre>
+        </article>
+    </section>
+
+
+
+
+</div>
+
+<nav>
+    <h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#NotificationCategories">NotificationCategories</a></li><li><a href="global.html#NotificationImages">NotificationImages</a></li><li><a href="global.html#NotificationsBody">NotificationsBody</a></li><li><a href="global.html#NotificationsHeader">NotificationsHeader</a></li></ul>
+</nav>
+
+<br class="clear">
+
+<footer>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a> on Mon Nov 07 2022 00:22:12 GMT+0200 (Eastern European Standard Time)
+</footer>
+
+<script> prettyPrint(); </script>
+<script src="scripts/linenumber.js"> </script>
+</body>
+</html>
diff --git a/docs/NotificationsBody_NotificationCategories_NotificationImage_NotificationImages.jsx.html b/docs/NotificationsBody_NotificationCategories_NotificationImage_NotificationImages.jsx.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>JSDoc: Source: NotificationsBody/NotificationCategories/NotificationImage/NotificationImages.jsx</title>
+
+    <script src="scripts/prettify/prettify.js"> </script>
+    <script src="scripts/prettify/lang-css.js"> </script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
+</head>
+
+<body>
+
+<div id="main">
+
+    <h1 class="page-title">Source: NotificationsBody/NotificationCategories/NotificationImage/NotificationImages.jsx</h1>
+
+
+
+
+
+
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>/* eslint-disable import/no-cycle */
+import { useContext } from 'react';
+import NotificationsIcon from '@mui/icons-material/Notifications';
+import ModeCommentIcon from '@mui/icons-material/ModeComment';
+import {
+  ImageContiner, ChildImage, NotificationImage,
+} from './styles';
+import { ReplayContext } from '../NotificationCategories';
+
+/**
+ * Notification Images
+ * @return {React.Component} - Retrun all image beside notification body
+ */
+function NotificationImages() {
+  const {
+    value,
+  } = useContext(ReplayContext);
+  return (
+    &lt;ImageContiner>
+      { (value === '1') ? (
+        &lt;>
+          &lt;NotificationImage src="https://styles.redditmedia.com/t5_78ssv9/styles/profileIcon_snoocf705ea1-8fa3-4bb7-8251-87244be506cc-headshot.png?width=64&amp;height=64&amp;frame=1&amp;crop=64:64,smart&amp;s=1cf9bff3cf29717ffc57976fb69334888e4774ef" alt="message" />
+          &lt;ChildImage>
+            &lt;ModeCommentIcon />
+          &lt;/ChildImage>
+        &lt;/>
+      ) : (
+        &lt;>
+          &lt;NotificationImage src="https://www.redditstatic.com/notifications/default_subreddit_avatar.png" alt="ring" />
+          &lt;ChildImage>
+            {' '}
+            &lt;NotificationsIcon />
+            {' '}
+          &lt;/ChildImage>
+        &lt;/>
+      ) }
+    &lt;/ImageContiner>
+  );
+}
+
+export default NotificationImages;
+</code></pre>
+        </article>
+    </section>
+
+
+
+
+</div>
+
+<nav>
+    <h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#NotificationCategories">NotificationCategories</a></li><li><a href="global.html#NotificationImages">NotificationImages</a></li><li><a href="global.html#NotificationsBody">NotificationsBody</a></li><li><a href="global.html#NotificationsHeader">NotificationsHeader</a></li></ul>
+</nav>
+
+<br class="clear">
+
+<footer>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a> on Mon Nov 07 2022 00:22:12 GMT+0200 (Eastern European Standard Time)
+</footer>
+
+<script> prettyPrint(); </script>
+<script src="scripts/linenumber.js"> </script>
+</body>
+</html>
diff --git a/docs/NotificationsBody_NotificationsBody.jsx.html b/docs/NotificationsBody_NotificationsBody.jsx.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>JSDoc: Source: NotificationsBody/NotificationsBody.jsx</title>
+
+    <script src="scripts/prettify/prettify.js"> </script>
+    <script src="scripts/prettify/lang-css.js"> </script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
+</head>
+
+<body>
+
+<div id="main">
+
+    <h1 class="page-title">Source: NotificationsBody/NotificationsBody.jsx</h1>
+
+
+
+
+
+
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>/* eslint-disable react/jsx-no-constructed-context-values */
+/* eslint-disable import/no-cycle */
+import { createContext, useState, useEffect } from 'react';
+import axios from 'axios';
+import NotificationCategories from './NotificationCategories/NotificationCategories';
+import
+{
+  Notification, NotificationsContiner, NotificationsHead,
+} from './styles';
+
+export const CategoriesContext = createContext();
+/**
+ * Notifications Body
+ * The component fetch data from api
+ *  and it has functions handleClick and handleClose
+ * @return {React.Component} - Body of each Notification depandent it's type
+ */
+
+function NotificationsBody() {
+  const api = 'https://d441e0bc-931f-4cc7-ab12-a51e81f70be4.mock.pstmn.io/fruits';
+  const [earlier, setEarlier] = useState([]);
+  const [today, setToday] = useState([]);
+  useEffect(() => {
+    axios.get(api) // fetch api
+      .then((actualData) => {
+        setEarlier(actualData.data.Earlier);
+        setToday(actualData.data.Today);
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  }, [api]);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [select, setSelect] = useState(null);
+  const [type, setType] = useState(null);
+  const open = Boolean(anchorEl);
+  const handleClick = (event) => { // function to set what notifiacation we select and it's type
+    setAnchorEl(event.currentTarget);
+    setSelect(event.currentTarget.getAttribute('id'));
+    setType(event.currentTarget.getAttribute('catorige'));
+  };
+  const handleClose = (event) => { // function to handel if delete when close
+    const tabindex = event.currentTarget.getAttribute('tabindex');
+    console.log(tabindex);
+    if (select != null &amp;&amp; tabindex === '0') {
+      if (type === 'today') {
+        setToday(
+          today.filter((e, i) => i !== Number(select)),
+        );
+      } else {
+        setEarlier(
+          earlier.filter((e, i) => i !== Number(select)),
+        );
+      }
+      setSelect(null);
+    }
+    setAnchorEl(null);
+  };
+  return (
+    &lt;Notification>
+      &lt;NotificationsContiner>
+        {(today.length !== 0) &amp;&amp; &lt;NotificationsHead>Today&lt;/NotificationsHead> }
+
+        &lt;CategoriesContext.Provider value={{
+          today, handleClose, handleClick, open, anchorEl,
+        }}
+        >
+          &lt;NotificationCategories />
+        &lt;/CategoriesContext.Provider>
+        { (earlier.length !== 0)
+          &amp;&amp; &lt;NotificationsHead>Earlier&lt;/NotificationsHead> }
+        &lt;CategoriesContext.Provider value={{
+          earlier, handleClose, handleClick, open, anchorEl,
+        }}
+        >
+          &lt;NotificationCategories />
+        &lt;/CategoriesContext.Provider>
+      &lt;/NotificationsContiner>
+    &lt;/Notification>
+  );
+}
+
+export default NotificationsBody;
+</code></pre>
+        </article>
+    </section>
+
+
+
+
+</div>
+
+<nav>
+    <h2><a href="index.html">Home</a></h2><h3>Global</h3><ul><li><a href="global.html#NotificationCategories">NotificationCategories</a></li><li><a href="global.html#NotificationImages">NotificationImages</a></li><li><a href="global.html#NotificationsBody">NotificationsBody</a></li><li><a href="global.html#NotificationsHeader">NotificationsHeader</a></li></ul>
+</nav>
+
+<br class="clear">
+
+<footer>
+    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.0</a> on Mon Nov 07 2022 00:22:12 GMT+0200 (Eastern European Standard Time)
+</footer>
+
+<script> prettyPrint(); </script>
+<script src="scripts/linenumber.js"> </script>
+</body>
+</html>