Upgrades React version

package.json

@@ -45,10 +45,10 @@
     "eslint-plugin-react": "^7.17.0",
     "eslint-plugin-react-hooks": "^1.7.0",
     "gh-pages": "^1.2.0",
-    "node-sass": "^4.13.0",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
-    "react-scripts": "^1.1.4",
+    "node-sass": "^9.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
     "rollup": "^0.64.1",
     "rollup-plugin-babel": "^3.0.7",
     "rollup-plugin-commonjs": "^9.1.3",
@@ -65,4 +65,4 @@
     "rollup-plugin-json": "^4.0.0",
     "yarn": "^1.21.1"
   }
-}
+}

src/card/index.js

@@ -1,18 +1,18 @@
-import React from "react";
-import PropTypes from "prop-types";
-import "./card.scss";
+import React from 'react';
+import PropTypes from 'prop-types';
+import './card.scss';
 
 const Card = ({
-  imagePosition,
-  classNamePrefix,
-  cardOption,
-  renderImage,
-  data,
+  imagePosition = 'left',
+  classNamePrefix = null,
+  cardOption = null,
+  renderImage = true,
+  data = null,
 }) => {
   const { image, message, receivedTime, detailPage } = data;
 
   const classNameGenerator = () => {
-    const prefix = classNamePrefix ? `${classNamePrefix}-` : "";
+    const prefix = classNamePrefix ? `${classNamePrefix}-` : '';
     const classes = {
       card: `${prefix}card`,
       content: `${prefix}content`,
@@ -34,7 +34,7 @@ const Card = ({
         <div
           className={classes.content}
           style={
-            imagePosition === "right" ? { flexDirection: "row-reverse" } : {}
+            imagePosition === 'right' ? { flexDirection: 'row-reverse' } : {}
           }
         >
           {renderImage && (
@@ -59,14 +59,6 @@ const Card = ({
   );
 };
 
-Card.defaultProps = {
-  renderImage: true,
-  imagePosition: "left",
-  data: null,
-  classNamePrefix: null,
-  cardOption: null,
-};
-
 Card.propTypes = {
   data: PropTypes.shape({
     image: PropTypes.string,
@@ -76,7 +68,8 @@ Card.propTypes = {
   }),
   renderImage: PropTypes.bool,
   cardOption: PropTypes.func,
-  imagePosition: PropTypes.oneOf(["left", "right"]),
+  imagePosition: PropTypes.oneOf(['left', 'right']),
   classNamePrefix: PropTypes.string,
 };
+
 export default Card;

src/index.js

@@ -1,10 +1,10 @@
-import React, { Component, Fragment } from "react";
-import PropTypes from "prop-types";
-import axios from "axios";
-import Card from "./card";
-import Spinner from "./spinner";
-import defaultIcon from "./assets/default_bell.svg";
-import "./styles.scss";
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+import Card from './card';
+import Spinner from './spinner';
+import defaultIcon from './assets/default_bell.svg';
+import './styles.scss';
 
 class Notifications extends Component {
   constructor(props) {
@@ -32,12 +32,12 @@ class Notifications extends Component {
     const { data, styles } = this.state;
     const { fetchData } = this.props;
 
-    document.addEventListener("mousedown", (event) => {
+    document.addEventListener('mousedown', (event) => {
       this.handleClickOutside(event);
     });
 
     // If data is a URL
-    if (typeof data === "string" && this.validateURL(data)) {
+    if (typeof data === 'string' && this.validateURL(data)) {
       axios
         .get(data)
         .then((response) => this.setState({ data: response.data }))
@@ -59,7 +59,7 @@ class Notifications extends Component {
     if (fetchData) {
       // Infinite scroll to notification container
       if (data.length > 0) {
-        scrollRef.addEventListener("scroll", () => {
+        scrollRef.addEventListener('scroll', () => {
           if (
             scrollRef.scrollTop + scrollRef.clientHeight >=
             scrollRef.scrollHeight
@@ -80,7 +80,7 @@ class Notifications extends Component {
   }
 
   componentWillUnmount() {
-    document.removeEventListener("mousedown", (event) => {
+    document.removeEventListener('mousedown', (event) => {
       this.handleClickOutside(event);
     });
   }
@@ -95,8 +95,8 @@ class Notifications extends Component {
 
   validateURL = (myURL) => {
     const pattern = new RegExp(
-      "^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$",
-      "i"
+      '^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$',
+      'i'
     );
     return pattern.test(myURL);
   };
@@ -112,7 +112,7 @@ class Notifications extends Component {
 
   classNameGenerator = () => {
     const { classNamePrefix } = this.props;
-    const prefix = classNamePrefix ? `${classNamePrefix}-` : "";
+    const prefix = classNamePrefix ? `${classNamePrefix}-` : '';
     const classes = {
       notifications: `${prefix}notifications`,
       icon: `${prefix}icon`,
@@ -131,8 +131,14 @@ class Notifications extends Component {
   };
 
   render() {
-    const { show, styles, loading, data, classes, notificationCount } =
-      this.state;
+    const {
+      show,
+      styles,
+      loading,
+      data,
+      classes,
+      notificationCount,
+    } = this.state;
     const {
       viewAllBtn,
       icon,
@@ -171,9 +177,9 @@ class Notifications extends Component {
           {notificationCount > 0 && (
             <div
               className={classes.count}
-              style={notificationCount >= 100 ? { fontSize: "8px" } : null}
+              style={notificationCount >= 100 ? { fontSize: '8px' } : null}
             >
-              {notificationCount < 100 ? notificationCount : "99+"}
+              {notificationCount < 100 ? notificationCount : '99+'}
             </div>
           )}
         </div>
@@ -184,7 +190,7 @@ class Notifications extends Component {
           style={{
             ...styles,
             width,
-            visibility: show ? "visible" : "hidden",
+            visibility: show ? 'visible' : 'hidden',
             opacity: show ? 1 : 0,
           }}
         >
@@ -239,11 +245,11 @@ Notifications.defaultProps = {
   height: null,
   width: null,
   header: {
-    title: "Notifications",
-    option: { text: "Mark all as read", onClick: () => {} },
+    title: 'Notifications',
+    option: { text: 'Mark all as read', onClick: () => {} },
   },
   headerBackgroundColor: null,
-  classNamePrefix: "",
+  classNamePrefix: '',
   icon: defaultIcon,
   style: {},
 };