Addressing Continuous Refreshing Issue in Development Environment

package.json

@@ -48,6 +48,7 @@
     "react-toastify": "^9.0.3",
     "redux": "^4.1.1",
     "redux-thunk": "^2.3.0",
+    "typedoc-plugin-markdown": "^3.17.1",
     "typescript": "^4.3.5",
     "web-vitals": "^1.0.1"
   },
@@ -92,7 +93,7 @@
     "@types/enzyme": "^3.10.9",
     "@types/jest": "^26.0.24",
     "@types/js-cookie": "^3.0.2",
-    "@types/node": "^12.20.16",
+    "@types/node": "^12.20.55",
     "@types/react": "^17.0.14",
     "@types/react-bootstrap": "^0.32.32",
     "@types/react-datepicker": "^4.1.4",

src/App.tsx

@@ -33,6 +33,7 @@ import Events from 'screens/UserPortal/Events/Events';
 import Tasks from 'screens/UserPortal/Tasks/Tasks';
 // import Chat from 'screens/UserPortal/Chat/Chat';
 import Advertisements from 'components/Advertisements/Advertisements';
+import useLocalStorage from 'utils/useLocalStorage';
 
 function app(): JSX.Element {
   /*const { updatePluginLinks, updateInstalled } = bindActionCreators(
@@ -62,20 +63,19 @@ function app(): JSX.Element {
 
   const { data, loading } = useQuery(CHECK_AUTH);
 
+  const { setItem } = useLocalStorage();
+
   useEffect(() => {
     if (data) {
-      localStorage.setItem(
-        'name',
-        `${data.checkAuth.firstName} ${data.checkAuth.lastName}`
-      );
-      localStorage.setItem('id', data.checkAuth._id);
-      localStorage.setItem('email', data.checkAuth.email);
-      localStorage.setItem('IsLoggedIn', 'TRUE');
-      localStorage.setItem('UserType', data.checkAuth.userType);
-      localStorage.setItem('FirstName', data.checkAuth.firstName);
-      localStorage.setItem('LastName', data.checkAuth.lastName);
-      localStorage.setItem('UserImage', data.checkAuth.image);
-      localStorage.setItem('Email', data.checkAuth.email);
+      setItem('name', `${data.checkAuth.firstName} ${data.checkAuth.lastName}`);
+      setItem('id', data.checkAuth._id);
+      setItem('email', data.checkAuth.email);
+      setItem('IsLoggedIn', 'TRUE');
+      setItem('UserType', data.checkAuth.userType);
+      setItem('FirstName', data.checkAuth.firstName);
+      setItem('LastName', data.checkAuth.lastName);
+      setItem('UserImage', data.checkAuth.image);
+      setItem('Email', data.checkAuth.email);
     }
   }, [data, loading]);
 

src/components/AddOn/core/AddOnEntry/AddOnEntry.test.tsx

@@ -21,13 +21,16 @@ import { MockedProvider, wait } from '@apollo/react-testing';
 import { StaticMockLink } from 'utils/StaticMockLink';
 import { ADD_ON_ENTRY_MOCK } from './AddOnEntryMocks';
 import { ToastContainer } from 'react-toastify';
+import useLocalStorage from 'utils/useLocalStorage';
+
+const { getItem } = useLocalStorage();
 
 const link = new StaticMockLink(ADD_ON_ENTRY_MOCK, true);
 
 const httpLink = new HttpLink({
   uri: BACKEND_URL,
   headers: {
-    authorization: 'Bearer ' + localStorage.getItem('token') || '',
+    authorization: 'Bearer ' + getItem('token') || '',
   },
 });
 console.error = jest.fn();

src/components/AddOn/core/AddOnRegister/AddOnRegister.test.tsx

@@ -20,10 +20,13 @@ import i18nForTest from 'utils/i18nForTest';
 import { I18nextProvider } from 'react-i18next';
 import { toast } from 'react-toastify';
 
+import useLocalStorage from 'utils/useLocalStorage';
+const { getItem } = useLocalStorage();
+
 const httpLink = new HttpLink({
   uri: BACKEND_URL,
   headers: {
-    authorization: 'Bearer ' + localStorage.getItem('token') || '',
+    authorization: 'Bearer ' + getItem('token') || '',
   },
 });
 

src/components/AddOn/core/AddOnStore/AddOnStore.test.tsx

@@ -22,11 +22,14 @@ import { store } from 'state/store';
 import { BACKEND_URL } from 'Constant/constant';
 import i18nForTest from 'utils/i18nForTest';
 import { I18nextProvider } from 'react-i18next';
+import useLocalStorage from 'utils/useLocalStorage';
+
+const { getItem } = useLocalStorage();
 
 const httpLink = new HttpLink({
   uri: BACKEND_URL,
   headers: {
-    authorization: 'Bearer ' + localStorage.getItem('token') || '',
+    authorization: 'Bearer ' + getItem('token') || '',
   },
 });
 

src/components/Advertisements/Advertisements.test.tsx

@@ -27,10 +27,14 @@ import userEvent from '@testing-library/user-event';
 import { ADD_ADVERTISEMENT_MUTATION } from 'GraphQl/Mutations/mutations';
 import { ToastContainer } from 'react-toastify';
 
+import useLocalStorage from 'utils/useLocalStorage';
+
+const { getItem } = useLocalStorage();
+
 const httpLink = new HttpLink({
   uri: BACKEND_URL,
   headers: {
-    authorization: 'Bearer ' + localStorage.getItem('token') || '',
+    authorization: 'Bearer ' + getItem('token') || '',
   },
 });
 

src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx

@@ -17,11 +17,14 @@ import { BACKEND_URL } from 'Constant/constant';
 import i18nForTest from 'utils/i18nForTest';
 import { I18nextProvider } from 'react-i18next';
 import dayjs from 'dayjs';
+import useLocalStorage from 'utils/useLocalStorage';
+
+const { getItem } = useLocalStorage();
 
 const httpLink = new HttpLink({
   uri: BACKEND_URL,
   headers: {
-    authorization: 'Bearer ' + localStorage.getItem('token') || '',
+    authorization: 'Bearer ' + getItem('token') || '',
   },
 });
 const translations = JSON.parse(

src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.test.tsx

@@ -23,6 +23,9 @@ import { toast } from 'react-toastify';
 import { ADD_ADVERTISEMENT_MUTATION } from 'GraphQl/Mutations/mutations';
 import dayjs from 'dayjs';
 import { StaticMockLink } from 'utils/StaticMockLink';
+import useLocalStorage from 'utils/useLocalStorage';
+
+const { getItem } = useLocalStorage();
 
 jest.mock('react-toastify', () => ({
   toast: {
@@ -60,7 +63,7 @@ const link = new StaticMockLink(MOCKS, true);
 const httpLink = new HttpLink({
   uri: BACKEND_URL,
   headers: {
-    authorization: 'Bearer ' + localStorage.getItem('token') || '',
+    authorization: 'Bearer ' + getItem('token') || '',
   },
 });
 

src/components/DeleteOrg/DeleteOrg.test.tsx

@@ -17,6 +17,7 @@ import i18nForTest from 'utils/i18nForTest';
 import DeleteOrg from './DeleteOrg';
 import { ToastContainer, toast } from 'react-toastify';
 import { IS_SAMPLE_ORGANIZATION_QUERY } from 'GraphQl/Queries/Queries';
+import useLocalStorage from 'utils/useLocalStorage';
 
 async function wait(ms = 1000): Promise<void> {
   await act(async () => {
@@ -103,10 +104,12 @@ afterEach(() => {
   localStorage.clear();
 });
 
+const { setItem } = useLocalStorage();
+
 describe('Delete Organization Component', () => {
   test('should be able to Toggle Delete Organization Modal', async () => {
     window.location.assign('/orgsetting/id=456');
-    localStorage.setItem('UserType', 'SUPERADMIN');
+    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -131,7 +134,7 @@ describe('Delete Organization Component', () => {
 
   test('should be able to Toggle Delete Organization Modal When Organization is Sample Organization', async () => {
     window.location.assign('/orgsetting/id=123');
-    localStorage.setItem('UserType', 'SUPERADMIN');
+    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -156,7 +159,7 @@ describe('Delete Organization Component', () => {
 
   test('Delete organization functionality should work properly', async () => {
     window.location.assign('/orgsetting/id=456');
-    localStorage.setItem('UserType', 'SUPERADMIN');
+    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -177,7 +180,7 @@ describe('Delete Organization Component', () => {
 
   test('Delete organization functionality should work properly for sample org', async () => {
     window.location.assign('/orgsetting/id=123');
-    localStorage.setItem('UserType', 'SUPERADMIN');
+    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -198,7 +201,7 @@ describe('Delete Organization Component', () => {
 
   test('Error handling for IS_SAMPLE_ORGANIZATION_QUERY mock', async () => {
     window.location.assign('/orgsetting/id=123');
-    localStorage.setItem('UserType', 'SUPERADMIN');
+    setItem('UserType', 'SUPERADMIN');
     jest.spyOn(toast, 'error');
     render(
       <MockedProvider addTypename={false} link={link2}>
@@ -222,7 +225,7 @@ describe('Delete Organization Component', () => {
 
   test('Error handling for DELETE_ORGANIZATION_MUTATION mock', async () => {
     window.location.assign('/orgsetting/id=456');
-    localStorage.setItem('UserType', 'SUPERADMIN');
+    setItem('UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link2}>
         <BrowserRouter>

src/components/DeleteOrg/DeleteOrg.tsx

@@ -10,14 +10,16 @@ import {
 } from 'GraphQl/Mutations/mutations';
 import { IS_SAMPLE_ORGANIZATION_QUERY } from 'GraphQl/Queries/Queries';
 import styles from './DeleteOrg.module.css';
+import useLocalStorage from 'utils/useLocalStorage';
 
 function deleteOrg(): JSX.Element {
   const { t } = useTranslation('translation', {
     keyPrefix: 'deleteOrg',
   });
+  const { getItem } = useLocalStorage();
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const currentUrl = window.location.href.split('=')[1];
-  const canDelete = localStorage.getItem('UserType') === 'SUPERADMIN';
+  const canDelete = getItem('UserType') === 'SUPERADMIN';
   const toggleDeleteModal = (): void => setShowDeleteModal(!showDeleteModal);
 
   const [del] = useMutation(DELETE_ORGANIZATION_MUTATION);

src/components/LeftDrawer/LeftDrawer.test.tsx

@@ -26,6 +26,11 @@ const propsUsers: InterfaceLeftDrawerProps = {
   hideDrawer: null,
   screenName: 'Users',
 };
+const propsReq: InterfaceLeftDrawerProps = {
+  ...props,
+  hideDrawer: false,
+  screenName: 'Requests',
+};
 
 const MOCKS = [
   {
@@ -47,10 +52,10 @@ jest.mock('react-toastify', () => ({
 }));
 
 beforeEach(() => {
-  localStorage.setItem('FirstName', 'John');
-  localStorage.setItem('LastName', 'Doe');
+  localStorage.setItem('Talawa-admin_FirstName', 'John');
+  localStorage.setItem('Talawa-admin_LastName', 'Doe');
   localStorage.setItem(
-    'UserImage',
+    'Talawa-admin_UserImage',
     'https://api.dicebear.com/5.x/initials/svg?seed=John%20Doe'
   );
 });
@@ -62,8 +67,8 @@ afterEach(() => {
 
 describe('Testing Left Drawer component for SUPERADMIN', () => {
   test('Component should be rendered properly', () => {
-    localStorage.setItem('UserImage', '');
-    localStorage.setItem('UserType', 'SUPERADMIN');
+    localStorage.setItem('Talawa-admin_UserImage', '');
+    localStorage.setItem('Talawa-admin_UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -101,7 +106,7 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
   });
 
   test('Testing in roles screen', () => {
-    localStorage.setItem('UserType', 'SUPERADMIN');
+    localStorage.setItem('Talawa-admin_UserType', 'SUPERADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -153,9 +158,33 @@ describe('Testing Left Drawer component for SUPERADMIN', () => {
   });
 });
 
+test('Styles should be applied correctly for Requests button', () => {
+  localStorage.setItem('Talawa-admin_UserType', 'SUPERADMIN');
+  render(
+    <MockedProvider addTypename={false} link={link}>
+      <BrowserRouter>
+        <I18nextProvider i18n={i18nForTest}>
+          <LeftDrawer {...propsReq} />
+        </I18nextProvider>
+      </BrowserRouter>
+    </MockedProvider>
+  );
+
+  const requestsBtn = screen.getByTestId(/requestsBtn/i);
+
+  expect(
+    requestsBtn.className.includes('text-white btn btn-success')
+  ).toBeTruthy();
+
+  // Assert that the 'light' variant is not present
+  expect(
+    requestsBtn.className.includes('text-secondary btn btn-light')
+  ).toBeFalsy();
+});
+
 describe('Testing Left Drawer component for ADMIN', () => {
   test('Components should be rendered properly', () => {
-    localStorage.setItem('UserType', 'ADMIN');
+    localStorage.setItem('Talawa-admin_UserType', 'ADMIN');
     render(
       <MockedProvider addTypename={false} link={link}>
         <BrowserRouter>
@@ -189,4 +218,28 @@ describe('Testing Left Drawer component for ADMIN', () => {
     userEvent.click(orgsBtn);
     expect(global.window.location.pathname).toContain('/orglist');
   });
+
+  test('Styles should be applied correctly for Users button', () => {
+    localStorage.setItem('Talawa-admin_UserType', 'SUPERADMIN');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <I18nextProvider i18n={i18nForTest}>
+            <LeftDrawer {...propsUsers} />
+          </I18nextProvider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    const rolesBtn = screen.getByTestId(/rolesBtn/i);
+
+    expect(
+      rolesBtn.className.includes('text-white btn btn-success')
+    ).toBeTruthy();
+
+    // Assert that the 'light' variant is not present
+    expect(
+      rolesBtn.className.includes('text-secondary btn btn-light')
+    ).toBeFalsy();
+  });
 });

src/components/LeftDrawer/LeftDrawer.tsx

@@ -10,6 +10,7 @@ import { ReactComponent as TalawaLogo } from 'assets/svgs/talawa.svg';
 import styles from './LeftDrawer.module.css';
 import { useMutation } from '@apollo/client';
 import { REVOKE_REFRESH_TOKEN } from 'GraphQl/Mutations/mutations';
+import useLocalStorage from '../../utils/useLocalStorage';
 
 export interface InterfaceLeftDrawerProps {
   hideDrawer: boolean | null;
@@ -23,11 +24,13 @@ const leftDrawer = ({
 }: InterfaceLeftDrawerProps): JSX.Element => {
   const { t } = useTranslation('translation', { keyPrefix: 'leftDrawer' });
 
-  const userType = localStorage.getItem('UserType');
-  const firstName = localStorage.getItem('FirstName');
-  const lastName = localStorage.getItem('LastName');
-  const userImage = localStorage.getItem('UserImage');
-  const userId = localStorage.getItem('id');
+  const { getItem } = useLocalStorage();
+
+  const userType = getItem('UserType');
+  const firstName = getItem('FirstName');
+  const lastName = getItem('LastName');
+  const userImage = getItem('UserImage');
+  const userId = getItem('id');
   const history = useHistory();
 
   const [revokeRefreshToken] = useMutation(REVOKE_REFRESH_TOKEN);