Update particles (remove deprecated packages).

README.md

@@ -16,22 +16,22 @@ Accord is an app, similar to Discord, but cooler.
 
 ## Setup
 
-1. Clone the repo.
-2. Generate SSH keys.
-   From app folder:
+1. Clone the repo (frop GitHub).
+2. Generate SSH keys (secure user logins).
+   From app directory (with Git bash):
    ```
    mkdir -p backend/keys
    ssh-keygen -t rsa -b 2048 -m PEM -f backend/keys/jwt
    ```
 3. Install npm packages.
-   From app folder:
+   From app directory:
    ```
    cd frontend
    npm i
    cd ../backend
    npm i
    ```
-4. Configure `backend/.env.example` and rename it to `.env`
+4. In `backend` directory, configure `.env.example` and rename the file to `.env`
 
 ---
 

frontend/package.json

@@ -36,17 +36,18 @@
     "react-hook-form": "^7.12.1",
     "react-modal": "^3.14.3",
     "react-number-format": "^4.7.3",
-    "react-particles-js": "^3.5.3",
     "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^5.0.1",
     "react-select": "^4.3.1",
     "react-textarea-autosize": "^8.3.3",
     "react-tooltip": "^4.2.21",
+    "react-tsparticles": "^2.6.0",
     "redux": "^4.1.0",
     "redux-persist": "^6.0.0",
     "socket.io-client": "^4.0.0",
     "striptags": "^3.2.0",
+    "tsparticles": "^2.6.0",
     "typescript": "^4.3.5",
     "web-vitals": "^1.1.2"
   },
@@ -96,12 +97,11 @@
     "@types/socket.io-client": "^3.0.0",
     "autoprefixer": "^10.4.0",
     "chance": "^1.1.8",
-    "cypress": "^8.7.0",
+    "cypress": "^12.1.0",
     "dotenv-cli": "^4.0.0",
     "postcss": "^8.4.5",
     "sazerac": "^2.0.0",
-    "tailwindcss": "^2.2.19",
-    "tsparticles": "^1.33.2"
+    "tailwindcss": "^3.2.4"
   },
   "optionalDependencies": {
     "@material-ui/core": "^4.12.3",

frontend/src/components/modals/guild-settings/guild-settings-invites.tsx

@@ -1,6 +1,6 @@
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router';
-import { getGuild, getGuildInvites, getGuildUsers } from '../../../store/guilds';
+import { fetchGuildInvites, getGuild, getGuildInvites, getGuildUsers } from '../../../store/guilds';
 import { deleteInvite } from '../../../store/invites';
 import { openSaveChanges } from '../../../store/ui';
 import Username from '../../user/username';
@@ -13,6 +13,8 @@ const GuildSettingsInvites: React.FunctionComponent = () => {
   const guild = useSelector(getGuild(guildId));
   const guildUsers = useSelector(getGuildUsers(guildId));
 
+  dispatch(fetchGuildInvites(guildId));
+
   const Invites = () => (
     <div className="mt-2">
       {invites.map(i => (
@@ -20,9 +22,13 @@ const GuildSettingsInvites: React.FunctionComponent = () => {
           <strong><code>{i.id}</code></strong>
           <span className="pl-5 secondary">
             <span>Used <code>{i.uses}</code> times</span>
-            <span>Created by <Username
-              user={guildUsers.find(gu => gu.id == i.inviterId)}
-              guild={guild} /></span>
+            <span>Created by
+              <Username
+                className='pt-2 scale-75'
+                size='sm'
+                user={guildUsers.find(gu => gu.id == i.inviterId)}
+                guild={guild} />
+            </span>
           </span>
           <span className="float-right">
             <CircleButton

frontend/src/components/pages/auth/register-page.tsx

@@ -1,4 +1,3 @@
-import Particles from 'react-particles-js';
 import { Link, Redirect, useLocation } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
 import { useSelector, useDispatch } from 'react-redux';

frontend/src/components/pages/home-page.tsx

@@ -81,7 +81,7 @@ const HomePage: React.FunctionComponent = () => {
         title="*Description may represent unreleased features.*"
         className="absolute top-50 w-1/2 inset-x-1/4 flex justify-between">
         <ImageCard src={Chat} title="Chat Made Simple">
-          Accord focuses on just the practical features and a simple messaging solution.
+          Accord focuses on just the practical features for a simple messaging solution.
         </ImageCard>
         <ImageCard src={Devices} title="Mobile or Desktop">
           (work in progress)

frontend/src/components/pages/invite-page.tsx

@@ -1,8 +1,7 @@
 import { Entity } from '@acrd/types';
-import { faSearch, faSearchDollar, faSearchLocation } from '@fortawesome/free-solid-svg-icons';
+import { faSearchLocation } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useEffect } from 'react';
-import Particles from 'react-particles-js';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link, useHistory, useParams } from 'react-router-dom';
 import fetchEntities from '../../store/actions/fetch-entities';

frontend/src/components/pages/not-found-page.tsx

@@ -1,4 +1,3 @@
-import Particles from 'react-particles-js';
 import { Link } from 'react-router-dom';
 import CircleButton from '../utils/buttons/circle-button';
 import FullParticles from '../utils/full-particles';

frontend/src/components/user/username.tsx

@@ -10,9 +10,10 @@ export interface UsernameProps {
   user: Entity.User;
   guild?: Entity.Guild;
   size?: 'sm' | 'md' | 'lg';
+  className?: string;
 }
 
-const Username: React.FunctionComponent<UsernameProps> = ({ guild, user, size = 'md' }) => {
+const Username: React.FunctionComponent<UsernameProps> = ({ guild, user, className, size = 'md' }) => {
   const highestRole = useSelector(getMemberHighestRole(guild?.id, user.id));
 
   const userOwnsGuild = guild?.ownerId === user.id;
@@ -50,7 +51,8 @@ const Username: React.FunctionComponent<UsernameProps> = ({ guild, user, size =
 
   return (
     <div className={classNames(
-      `flex items-center px-2`,
+      className,
+      `inline-flex items-center px-2`,
       'cursor-pointer',
       { 'opacity-50': !isOnline })}>
       <div className="relative avatar mr-2">

frontend/src/components/utils/full-particles.tsx

@@ -1,11 +1,16 @@
-import Particles from 'react-particles-js'
+import { useCallback } from 'react';
+import Particles from 'react-tsparticles';
+import { loadFull } from 'tsparticles';
 
 const FullParticles: React.FunctionComponent = () => {
+  const particlesInit = useCallback(loadFull, []);
+
   return (
     <Particles
+      init={particlesInit}
       width="100%"
       height="100%"
-      params={{
+      options={{
         "particles": {
           "number": {
             "value": 200,
@@ -113,9 +118,9 @@ const FullParticles: React.FunctionComponent = () => {
             }
           }
         },
-        "retina_detect": true
-      } as any} />
-    );
+        "retina_detect": true,
+      }} />
+  );
 }
- 
+
 export default FullParticles;

frontend/src/index.css

@@ -59,10 +59,18 @@ nav[role='menu'] {
 [contenteditable='true']:empty:before {
   content: attr(placeholder);
   pointer-events: none;
-  display: block; /* For Firefox */
+  display: block;
+  /* For Firefox */
   color: var(--muted);
 }
 
 ::file-selector-button {
   display: none;
 }
+
+#tsparticles {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}

frontend/src/store/guilds.ts

@@ -4,6 +4,7 @@ import { byAscending } from '../components/utils/vanilla/sort';
 import { actions as api, uploadFile } from './api';
 import { notInArray } from './utils/filter';
 import { getHeaders } from './utils/rest-headers';
+import { actions as inviteActions } from './invites';
 
 const slice = createSlice({
   name: 'guilds',
@@ -29,18 +30,6 @@ const slice = createSlice({
 export const actions = slice.actions;
 export default slice.reducer;
 
-// export const fetchGuild = (id: string) => (dispatch, getStore: () => Store.AppState) => {
-//   const guilds = getStore().entities.guilds;
-//   const isCached = guilds.some(g => g.id === id);
-//   if (isCached) return;
-
-//   dispatch(api.restCallBegan({
-//     url: `/guilds/${id}`,
-//     headers: getHeaders(),
-//     callback: (guild: Entity.Guild) => dispatch(actions.fetched([guild])),
-//   }));
-// }
-
 export const createGuild = (name: string) => (dispatch) => {
   dispatch(api.wsCallBegan({
     event: 'GUILD_CREATE',
@@ -61,6 +50,14 @@ export const uploadGuildIcon = (guildId: string, file: File) => (dispatch) => {
   dispatch(uploadFile(file, uploadCallback));
 }
 
+export const fetchGuildInvites = (id: string) => (dispatch, getStore: () => Store.AppState) => {
+  dispatch(api.restCallBegan({
+    url: `/guilds/${id}/invites`,
+    headers: getHeaders(),
+    callback: (invites: Entity.Invite[]) => dispatch(inviteActions.fetched(invites)),
+  }));
+}
+
 export const deleteGuild = (guildId: string) => (dispatch) => {
   dispatch(api.wsCallBegan({
     event: 'GUILD_DELETE',