Upgraded dependencies

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,9 +1,9 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ""
-labels: "Type: Bug"
-assignees: ""
+title: ''
+labels: 'Type: Bug'
+assignees: ''
 ---
 
 ## Describe the bug

.github/ISSUE_TEMPLATE/config.yml

@@ -1 +1 @@
-blank_issues_enabled: true
+blank_issues_enabled: true

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,9 +1,9 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: ""
-labels: "Type: Enhancement"
-assignees: ""
+title: ''
+labels: 'Type: Enhancement'
+assignees: ''
 ---
 
 ## Is your feature request related to a problem? Please describe.

.github/workflows/deploy.yml

@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [16.x]
 
     steps:
       - name: Checkout repository code
@@ -29,7 +29,7 @@ jobs:
 
       - name: Install node modules
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
-        run: npm install
+        run: npm install -f
 
       - name: Build the site
         run: |

.github/workflows/github-ci.yml

@@ -19,11 +19,11 @@ jobs:
 
       - name: Install node_modules
         if: steps.cache-node-modules.outputs.cache-hit != 'true'
-        run: npm install
+        run: npm install -f
 
       - name: Test SCSS
         run: npm run test:scss
-        
+
       - name: Test JS
         run: npm run test:js
 
@@ -40,10 +40,11 @@ jobs:
       - name: Create config.json
         run: echo $TEST_CONFIG_JSON > src/config.json
         env:
-          TEST_CONFIG_JSON: "{ \"apiURL\": \"http://localhost:1337\", \"APP_ENV\": \"prod\" }"
+          TEST_CONFIG_JSON: '{ "apiURL": "http://localhost:1337", "APP_ENV": "prod" }'
 
       - name: Test Cypress
         uses: cypress-io/github-action@v2
         with:
+          install-command: npm i -f
           start: npm start
           wait-on: 'http://localhost:3000'

README.md

@@ -17,9 +17,7 @@ The goal of **User Story** is to design and present a scalable backend infrastru
 
 ### Setting up the project
 
-After cloning this repository you will need to install all the dependencies: `npm i`
-
-**NOTE**: `"node-sass": "^4.13.1"` requires `node v13.x.x` according to this [stackoverflow](https://stackoverflow.com/questions/60394291/error-node-modules-node-sass-command-failed) answer. You can use `nvm` to manage multiple node versions. Follow this [tutorial](https://www.loginradius.com/blog/async/run-multiple-nodejs-version-on-the-same-machine/) to setup nvm.
+After cloning this repository you will need to install all the dependencies: `npm i -f`
 
 User Story uses [this repository](https://github.com/EOS-uiux-Solutions/strapi) as its `backend`. There are two ways to set up the `backend`:
 

cypress.json

@@ -8,8 +8,5 @@
     "testStoryProduct": "EOS Icons",
     "testCategory": "Documentation"
   },
-  "testFiles": [
-    "user_story.spec.js",
-    "test_filters.spec.js"
-  ]
+  "testFiles": ["user_story.spec.js", "test_filters.spec.js"]
 }

cypress/integration/test_filters.spec.js

@@ -8,8 +8,9 @@ describe('Test the filters and search for stories in Home page', () => {
   }
 
   const selectProduct = (productName) => {
-    cy.get(`[data-cy=${productName.split(' ').join('-')}-card]`)
-      .click({ force: true })
+    cy.get(`[data-cy=${productName.split(' ').join('-')}-card]`).click({
+      force: true
+    })
   }
 
   const setDropdown = (dropdown, value) => {

package.json

@@ -4,49 +4,49 @@
   "private": false,
   "homepage": "https://userstory.eosdesignsystem.com/",
   "dependencies": {
-    "@reach/router": "^1.2.1",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/user-event": "^7.2.1",
-    "axios": "^0.19.2",
-    "better-docs": "^2.0.1",
-    "eos-icons-react": "^2.1.1",
-    "i18next": "^19.4.5",
+    "@reach/router": "^1.3.4",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.25.0",
+    "better-docs": "^2.7.1",
+    "eos-icons-react": "^2.2.0",
+    "i18next": "^21.6.7",
     "lodash": "^4.17.21",
-    "markdown-it": "^12.0.6",
+    "markdown-it": "^12.3.2",
     "moment": "^2.29.1",
-    "node-sass": "^4.13.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-dropzone": "^11.0.1",
+    "node-sass": "^7.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-dropzone": "^11.5.1",
     "react-helmet": "^6.1.0",
-    "react-hook-form": "^6.3.2",
-    "react-i18next": "^11.5.0",
-    "react-image-gallery": "^1.2.5",
-    "react-loading-skeleton": "^2.2.0",
-    "react-markdown": "^5.0.2",
-    "react-markdown-editor-lite": "^1.2.4",
-    "react-mentions": "^4.3.0",
+    "react-hook-form": "^7.25.0",
+    "react-i18next": "^11.15.3",
+    "react-image-gallery": "^1.2.7",
+    "react-loading-skeleton": "^3.0.2",
+    "react-markdown": "^8.0.0",
+    "react-markdown-editor-lite": "^1.3.2",
+    "react-mentions": "^4.3.1",
     "react-promise-tracker": "^2.1.0",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1",
+    "react-router-dom": "^6.2.1",
+    "react-scripts": "5.0.0",
     "react-share": "^4.4.0"
   },
   "devDependencies": {
-    "cypress": "^4.12.1",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.10.1",
-    "eslint-config-standard": "^14.1.1",
-    "eslint-plugin-cypress": "^2.11.3",
-    "eslint-plugin-import": "^2.20.2",
+    "cypress": "^9.3.1",
+    "eslint": "^8.7.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.1.3",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-standard": "^4.0.1",
-    "husky": "^4.2.5",
-    "prettier": "^2.0.5",
-    "sass-lint": "^1.12.1"
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "^7.28.0",
+    "eslint-plugin-standard": "^4.1.0",
+    "husky": "^7.0.4",
+    "prettier": "^2.5.1",
+    "sass-lint": "^1.13.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -80,4 +80,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

src/assets/scss/components/comments.scss

@@ -30,7 +30,7 @@
 }
 
 .btn-comment-edit {
-  margin:2% 0;
+  margin: 2% 0;
 }
 
 .comment-form {

src/components/CommentForm.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { useForm } from 'react-hook-form'
 import { EOS_ATTACHMENT } from 'eos-icons-react'
 
@@ -20,7 +20,9 @@ const CommentForm = (props) => {
     placeholder
   } = props
 
-  const { register, errors, handleSubmit } = useForm()
+  const {
+    formState: { errors }
+  } = useForm({ defaultValues: { Comments: '' } })
 
   const [users, setUsers] = useState([])
 
@@ -29,8 +31,6 @@ const CommentForm = (props) => {
     setUsers(response.data?.data?.users ?? [])
   }
 
-  fetchUsers()
-
   const displayTransform = (id, display) => {
     return `@${display}`
   }
@@ -48,15 +48,18 @@ const CommentForm = (props) => {
     setAttachments([...attachments, ...newFilesArray])
   }
 
+  useEffect(() => {
+    fetchUsers()
+  }, [])
+
   return (
-    <form className='comment-form' onSubmit={handleSubmit(addComment)}>
+    <form className='comment-form'>
       <div className='flex flex-row'>
         <div className='comment-input'>
           <MentionsInput
-            name='Comments'
-            value={comment}
+            id='Comments'
             data-cy={`comment-input-${id}`}
-            inputRef={register({ required: true })}
+            value={comment}
             onChange={(e) => setComment(e.target.value)}
             placeholder={placeholder}
             allowSuggestionsAboveCursor={true}
@@ -83,6 +86,8 @@ const CommentForm = (props) => {
           <Button
             className='btn btn-secondary btn-comment'
             data-cy={`btn-comment-${id}`}
+            onClick={(e) => addComment(e, { Comments: comment })}
+            type='button'
           >
             {cta}
           </Button>

src/components/Comments.js

@@ -71,7 +71,9 @@ const Comments = (props) => {
     [attachments, replyAttachments]
   )
 
-  const addComment = async (data) => {
+  const addComment = async (e, data) => {
+    e.preventDefault()
+
     const formData = new FormData()
     data.user = id
     data.user_story = storyId
@@ -87,7 +89,8 @@ const Comments = (props) => {
     fetchStoryComments()
   }
 
-  const addCommentReply = async (data) => {
+  const addCommentReply = async (e, data) => {
+    console.log(data)
     const formData = new FormData()
 
     data.user = id
@@ -168,9 +171,8 @@ const Comments = (props) => {
                       Reply
                     </Button>
                   )}
-                  <br/> 
-                  {data.user_story_comment_replies.length == 1 ? (
-
+                  <br />
+                  {data.user_story_comment_replies.length === 1 ? (
                     <Button
                       className='btn btn-default btn-comment-edit'
                       onClick={() => {
@@ -183,9 +185,10 @@ const Comments = (props) => {
                     >
                       {data.user_story_comment_replies.length} Reply
                     </Button>
-                  ) : data.user_story_comment_replies.length == 0 ? (
+                  ) : data.user_story_comment_replies.length === 0 ? (
                     ''
-                  ) :  ( <Button
+                  ) : (
+                    <Button
                       className='btn btn-default btn-comment-edit'
                       onClick={() => {
                         toggleViewReplies(
@@ -196,8 +199,8 @@ const Comments = (props) => {
                       }}
                     >
                       {data.user_story_comment_replies.length} Replies
-                    </Button>)   }
-
+                    </Button>
+                  )}
                 </div>
                 {viewRepliesToggled.find((item) => item === key + 1) &&
                   data.user_story_comment_replies.map((reply, key) => (

src/components/Notifications.js

@@ -11,9 +11,8 @@ const Notifications = () => {
 
   const [notifications, setNotifications] = useState([])
 
-  const [notificationsDropdownState, setNotificationsDropdownState] = useState(
-    false
-  )
+  const [notificationsDropdownState, setNotificationsDropdownState] =
+    useState(false)
 
   const [notificationCount, setNotificationCount] = useState(0)
 

src/components/ProfileImageUploader.js

@@ -2,10 +2,10 @@ import React, { useEffect, useState } from 'react'
 import { useDropzone } from 'react-dropzone'
 import Modal from './Modal'
 import axios from 'axios'
-import { apiURL } from '../config.json'
 import LoadingIndicator from '../modules/LoadingIndicator'
 import FormError from './FormError'
 import { EOS_DELETE } from 'eos-icons-react'
+const { apiURL } = require('../config.json')
 
 const ProfileImageUploader = ({
   userId,

src/components/StoryPageTimeline.js

@@ -57,19 +57,21 @@ const StoryPageTimeline = (props) => {
         (id) => id !== JSON.stringify(userId)
       )
       const response = await userStory.updateVotes(story.id, updatedFollowerIds)
-      updatedFollowerIds = response.data.data.updateUserStory.userStory.followers.map(
-        (follower) => JSON.stringify(follower.id)
-      )
+      updatedFollowerIds =
+        response.data.data.updateUserStory.userStory.followers.map((follower) =>
+          JSON.stringify(follower.id)
+        )
       setFollowers(updatedFollowerIds)
       setVoted(false)
       setVotes((votes) => votes - 1)
     } else {
       followers.push(JSON.stringify(userId))
       let updatedFollowerIds = followers
       const response = await userStory.updateVotes(story.id, updatedFollowerIds)
-      updatedFollowerIds = response.data.data.updateUserStory.userStory.followers.map(
-        (follower) => JSON.stringify(follower.id)
-      )
+      updatedFollowerIds =
+        response.data.data.updateUserStory.userStory.followers.map((follower) =>
+          JSON.stringify(follower.id)
+        )
       setFollowers(updatedFollowerIds)
       setVoted(true)
       setVotes((votes) => votes + 1)

src/components/UsersSuggestionDropdown.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef, useState } from 'react'
 import axios from 'axios'
 import { trackPromise, usePromiseTracker } from 'react-promise-tracker'
-import { apiURL } from '../config.json'
 import LoadingIndicator from '../modules/LoadingIndicator'
+const { apiURL } = require('../config.json')
 
 const UsersSuggestionDropdown = ({
   isOpen,