Migrate to functionnal components (#232)

* Refactor Home component

* Refactor Welcome

* Refactor small components

* Refactor Nav component

* refactor Settings

* Refactor Chat

* Refactor New message notifications

* Fix tests

* Remove tooltip

* Remove react-simple-dropdown

* Change to last redux

* Switch to redux hooks

* Add github action

.github/workflows/lint-test.yml

@@ -0,0 +1,32 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Node.js CI
+
+on:
+  push:
+  pull_request:
+  workflow_dispatch:
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x, 18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'npm'
+      - run: npm i yarn -g
+      - run: yarn setup
+        env:
+          TZ: UTC
+          VITE_COMMIT_SHA: some_sha
+      - run: yarn lint
+      - run: yarn test

client/.eslintrc.cjs

@@ -1,10 +1,26 @@
 module.exports = {
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended'
+  ],
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint'],
   root: true,
   env: {
     browser: true,
     node: true,
   },
+  settings: {
+    react: {
+      pragma: 'React', // Pragma to use, default to "React"
+      version: 'detect', // React version. "detect" automatically picks the version you have installed.
+    },
+  },
+  rules: {
+    "react/prop-types": "off",
+    "@typescript-eslint/no-empty-function": "off"
+  }
 };

client/package.json

@@ -13,9 +13,10 @@
   ],
   "license": "MIT",
   "dependencies": {
+    "@react-hookz/web": "^20.0.2",
+    "@reduxjs/toolkit": "^1.9.1",
     "bootstrap": "^4.6.2",
     "classnames": "^2.3.2",
-    "clipboard": "^2.0.11",
     "jquery": "3",
     "moment": "^2.29.4",
     "nanoid": "^4.0.0",
@@ -28,7 +29,7 @@
     "react-redux": "^8.0.5",
     "react-router": "^6.4.4",
     "react-router-dom": "^6.4.4",
-    "react-simple-dropdown": "^3.2.3",
+    "react-tooltip": "^5.2.0",
     "redux": "^4.2.0",
     "redux-thunk": "^2.4.2",
     "sanitize-html": "^2.7.3",
@@ -54,6 +55,8 @@
     "eslint": "^8.29.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "jest-fetch-mock": "^3.0.3",
     "prettier": "^2.0.5",

client/src/actions/app.js

@@ -31,10 +31,6 @@ export const toggleSocketConnected = payload => async dispatch => {
   dispatch({ type: 'TOGGLE_SOCKET_CONNECTED', payload });
 };
 
-export const createUser = payload => async dispatch => {
-  dispatch({ type: 'CREATE_USER', payload });
-};
-
 export const clearActivities = () => async dispatch => {
   dispatch({ type: 'CLEAR_ACTIVITIES' });
 };

client/src/actions/app.test.js

@@ -40,7 +40,6 @@ describe('App actions', () => {
       [actions.showNotice('test'), 'SHOW_NOTICE'],
       [actions.toggleSoundEnabled('test'), 'TOGGLE_SOUND_ENABLED'],
       [actions.toggleSocketConnected('test'), 'TOGGLE_SOCKET_CONNECTED'],
-      [actions.createUser('test'), 'CREATE_USER'],
       [actions.setLanguage('test'), 'CHANGE_LANGUAGE'],
     ];
 

client/src/actions/encrypted_messages.js

@@ -1,10 +1,18 @@
 import { getSocket } from '@/utils/socket';
 import { prepare as prepareMessage, process as processMessage } from '@/utils/message';
+import { changeUsername } from '@/reducers/user';
 
 export const sendEncryptedMessage = payload => async (dispatch, getState) => {
   const state = getState();
   const msg = await prepareMessage(payload, state);
-  dispatch({ type: `SEND_ENCRYPTED_MESSAGE_${msg.original.type}`, payload: msg.original.payload });
+  switch(msg.original.type){
+    case "CHANGE_USERNAME":
+      dispatch(changeUsername(msg.original.payload));
+      dispatch({ type: `SEND_ENCRYPTED_MESSAGE_${msg.original.type}`, payload: msg.original.payload });
+      break;
+    default:
+      dispatch({ type: `SEND_ENCRYPTED_MESSAGE_${msg.original.type}`, payload: msg.original.payload });
+  }
   getSocket().emit('ENCRYPTED_MESSAGE', msg.toSend);
 };