diff --git a/.eslintrc.js b/.eslintrc.js index 39e1de8..0184e79 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -57,6 +57,5 @@ module.exports = { __DEV__: true, __LOCAL__: false, __TEST__: false, - __SENDGRID_API_KEY__: false, }, } diff --git a/jest/config.js b/jest/config.js index 92f5a54..3ac0720 100644 --- a/jest/config.js +++ b/jest/config.js @@ -23,7 +23,6 @@ module.exports = { __SERVER__: false, __LOCAL__: false, __TEST__: true, - __SENDGRID_API_KEY__: "", localStorage: { getItem: () => null, setItem: () => null, removeItem: () => null }, }, maxConcurrency: 50, diff --git a/package.json b/package.json index 4d696ff..723ccfc 100644 --- a/package.json +++ b/package.json @@ -75,8 +75,11 @@ "@reduxjs/toolkit": "^1.6.0", "@sendgrid/mail": "^7.6.0", "@types/cookie-parser": "^1.4.2", + "@types/detect-node": "^2.0.0", "@types/js-cookie": "^3.0.1", "@types/lodash": "^4.14.177", + "@types/serviceworker": "^0.0.32", + "@types/web-push": "^3.3.2", "autoprefixer": "^10.2.6", "axios": "^0.21.1", "bcrypt": "^5.0.1", @@ -86,6 +89,7 @@ "cookie-parser": "^1.4.6", "core-js": "^3.15.2", "cross-env": "^7.0.3", + "detect-node": "^2.1.0", "express": "^4.17.1", "fs": "^0.0.1-security", "google-auth-library": "^7.10.1", @@ -114,7 +118,8 @@ "redux-devtools-extension": "^2.13.9", "redux-thunk": "^2.3.0", "serialize-javascript": "^6.0.0", - "serve-favicon": "^2.5.0" + "serve-favicon": "^2.5.0", + "web-push": "^3.4.5" }, "devDependencies": { "@babel/core": "^7.14.6", diff --git a/src/components/Notifications/index.tsx b/src/components/Notifications/index.tsx index bb381a8..02b8ce1 100644 --- a/src/components/Notifications/index.tsx +++ b/src/components/Notifications/index.tsx @@ -1,20 +1,30 @@ import _ from "lodash" -import React, { memo, useCallback, useState } from "react" -import { AppDispatch } from "../../store" +import React, { memo, useCallback, useEffect, useRef, useState } from "react" +import isNode from "detect-node" +import { shallowEqual, useSelector } from "react-redux" +import { AppDispatch, AppState } from "../../store" import { fetchVolunteerNotifsSet } from "../../store/volunteerNotifsSet" -import { VolunteerNotifs } from "../../services/volunteers" import styles from "./styles.module.scss" import { logoutUser } from "../../store/auth" import { unsetJWT } from "../../services/auth" +import { VolunteerNotifs } from "../../services/volunteers" interface Props { dispatch: AppDispatch jwt: string - // eslint-disable-next-line react/require-default-props - volunteerNotifs?: VolunteerNotifs } +let prevNotifs: VolunteerNotifs | undefined + +const Notifications = ({ dispatch, jwt }: Props): JSX.Element | null => { + const volunteerNotifs = useSelector((state: AppState) => { + const notifs = state.volunteerNotifsSet.entity + if (notifs) { + prevNotifs = notifs + return notifs + } + return prevNotifs + }, shallowEqual) -const Notifications = ({ dispatch, jwt, volunteerNotifs }: Props): JSX.Element => { const hidden = volunteerNotifs?.hiddenNotifs || [] const notifs: JSX.Element[] = [] @@ -78,41 +88,46 @@ const Notifications = ({ dispatch, jwt, volunteerNotifs }: Props): JSX.Element =