components: Fix some react warnings.

Definitely need to respect that you can't access this.setState() for params that are linkedEvent.

.eslintignore

@@ -1,3 +1,4 @@
 fuse.js
 translation_report.ts
 src/api_tests
+jest.config.js

.eslintrc.json

@@ -1,16 +1,23 @@
 {
   "root": true,
   "env": {
-    "browser": true
+    "browser": true,
+    "jest": true
   },
   "plugins": [
-    "jane",
-    "inferno"
+    "@typescript-eslint",
+    "jane"
   ],
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
   "extends": [
     "plugin:jane/recommended",
+    "plugin:jane/react",
     "plugin:jane/typescript",
-    "plugin:inferno/recommended"
+    "plugin:@typescript-eslint/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -25,6 +32,7 @@
     "@typescript-eslint/no-this-alias": 0,
     "@typescript-eslint/no-unused-vars": 0,
     "@typescript-eslint/no-use-before-define": 0,
+    "@typescript-eslint/ban-ts-comment": 0,
     "@typescript-eslint/no-useless-constructor": 0,
     "arrow-body-style": 0,
     "curly": 0,
@@ -32,11 +40,6 @@
     "eqeqeq": 0,
     "func-style": 0,
     "import/no-duplicates": 0,
-    "inferno/jsx-key": 0,
-    "inferno/jsx-no-target-blank": 0,
-    "inferno/jsx-props-class-name": 0,
-    "inferno/no-direct-mutation-state": 0,
-    "inferno/no-unknown-property": 0,
     "max-statements": 0,
     "max-params": 0,
     "new-cap": 0,
@@ -53,6 +56,13 @@
     "prefer-const": 0,
     "prefer-rest-params": 0,
     "quote-props": 0,
-    "unicorn/filename-case": 0
+    "unicorn/filename-case": 0,
+    "react/no-direct-mutation-state": 1,
+    "react/no-access-state-in-setstate": 1,
+    "react/jsx-key": 2,
+    "jsx-a11y/no-onchange": 0,
+    "jsx-a11y/aria-role": 1,
+    "jsx-a11y/click-events-have-key-events": 1,
+    "react/no-did-update-set-state": 0
   }
 }

.gitignore

@@ -24,4 +24,3 @@ test/data/result.json
 
 package-lock.json
 *.orig
-

.storybook/main.js

@@ -0,0 +1,14 @@
+module.exports = {
+  stories: ['../src/**/*.stories.tsx'],
+  webpackFinal: async config => {
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    loader: require.resolve('babel-loader'),
+    options: {
+      presets: [['react-app', { flow: false, typescript: true }]],
+    },
+  });
+  config.resolve.extensions.push('.ts', '.tsx');
+  return config;
+},
+};

.storybook/preview.js

@@ -0,0 +1,2 @@
+import "@reach/menu-button/styles.css";
+import "../src/custom.css"

config/jest/cssTransform.js

@@ -0,0 +1,14 @@
+'use strict';
+
+// This is a custom Jest transformer turning style imports into empty objects.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process() {
+    return 'module.exports = {};';
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return 'cssTransform';
+  },
+};

config/jest/fileTransform.js

@@ -0,0 +1,40 @@
+'use strict';
+
+const path = require('path');
+const camelcase = require('camelcase');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+module.exports = {
+  process(src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename));
+
+    if (filename.match(/\.svg$/)) {
+      // Based on how SVGR generates a component name:
+      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
+      const pascalCaseFilename = camelcase(path.parse(filename).name, {
+        pascalCase: true,
+      });
+      const componentName = `Svg${pascalCaseFilename}`;
+      return `const React = require('react');
+      module.exports = {
+        __esModule: true,
+        default: ${assetFilename},
+        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
+          return {
+            $$typeof: Symbol.for('react.element'),
+            type: 'svg',
+            ref: ref,
+            key: null,
+            props: Object.assign({}, props, {
+              children: ${assetFilename}
+            })
+          };
+        }),
+      };`;
+    }
+
+    return `module.exports = ${assetFilename};`;
+  },
+};

fuse.js

@@ -1,61 +1,66 @@
-const {
-  FuseBox,
-  Sparky,
-  EnvPlugin,
-  CSSPlugin,
-  WebIndexPlugin,
-  QuantumPlugin,
-} = require('fuse-box');
-const transformInferno = require('ts-transform-inferno').default;
-const transformClasscat = require('ts-transform-classcat').default;
-let fuse, app;
-let isProduction = false;
+/**
+ * FUSEBOX IS NO LONGER USED FOR THIS PROJECT
+ * Keeping this as a reference for now in case there are problems with the new bundler down the road
+ */
 
-Sparky.task('config', _ => {
-  fuse = new FuseBox({
-    homeDir: 'src',
-    hash: isProduction,
-    output: 'dist/$name.js',
-    experimentalFeatures: true,
-    cache: !isProduction,
-    // sourceMaps: !isProduction,
-    sourceMaps: true,
-    transformers: {
-      before: [transformClasscat(), transformInferno()],
-    },
-    alias: {
-      locale: 'moment/locale',
-    },
-    plugins: [
-      EnvPlugin({ NODE_ENV: isProduction ? 'production' : 'development' }),
-      CSSPlugin(),
-      WebIndexPlugin({
-        title: 'Inferno Typescript FuseBox Example',
-        template: 'src/index.html',
-        path: isProduction ? '/static' : '/',
-      }),
-      isProduction &&
-        QuantumPlugin({
-          bakeApiIntoBundle: 'app',
-          treeshake: true,
-          uglify: true,
-        }),
-    ],
-  });
-  app = fuse.bundle('app').instructions('>index.tsx');
-});
-Sparky.task('clean', _ => Sparky.src('dist/').clean('dist/'));
-Sparky.task('env', _ => (isProduction = true));
-Sparky.task('copy-assets', () =>
-  Sparky.src('assets/**/**.*').dest(isProduction ? 'dist/' : 'dist/static')
-);
-Sparky.task('dev', ['clean', 'config', 'copy-assets'], _ => {
-  fuse.dev({
-    fallback: 'index.html',
-  });
-  app.hmr().watch();
-  return fuse.run();
-});
-Sparky.task('prod', ['clean', 'env', 'config', 'copy-assets'], _ => {
-  return fuse.run();
-});
+// const {
+//   FuseBox,
+//   Sparky,
+//   EnvPlugin,
+//   CSSPlugin,
+//   WebIndexPlugin,
+//   QuantumPlugin,
+// } = require('fuse-box');
+// const transformInferno = require('ts-transform-inferno').default;
+// const transformClasscat = require('ts-transform-classcat').default;
+// let fuse, app;
+// let isProduction = false;
+
+// Sparky.task('config', _ => {
+//   fuse = new FuseBox({
+//     homeDir: 'src',
+//     hash: isProduction,
+//     output: 'dist/$name.js',
+//     experimentalFeatures: true,
+//     cache: !isProduction,
+//     // sourceMaps: !isProduction,
+//     sourceMaps: true,
+//     transformers: {
+//       before: [transformClasscat(), transformInferno()],
+//     },
+//     alias: {
+//       locale: 'moment/locale',
+//     },
+//     plugins: [
+//       EnvPlugin({ NODE_ENV: isProduction ? 'production' : 'development' }),
+//       CSSPlugin(),
+//       WebIndexPlugin({
+//         title: 'Inferno Typescript FuseBox Example',
+//         template: 'src/index.html',
+//         path: isProduction ? '/static' : '/',
+//       }),
+//       isProduction &&
+//         QuantumPlugin({
+//           bakeApiIntoBundle: 'app',
+//           treeshake: true,
+//           uglify: true,
+//         }),
+//     ],
+//   });
+//   app = fuse.bundle('app').instructions('>index.tsx');
+// });
+// Sparky.task('clean', _ => Sparky.src('dist/').clean('dist/'));
+// Sparky.task('env', _ => (isProduction = true));
+// Sparky.task('copy-assets', () =>
+//   Sparky.src('assets/**/**.*').dest(isProduction ? 'dist/' : 'dist/static')
+// );
+// Sparky.task('dev', ['clean', 'config', 'copy-assets'], _ => {
+//   fuse.dev({
+//     fallback: 'index.html',
+//   });
+//   app.hmr().watch();
+//   return fuse.run();
+// });
+// Sparky.task('prod', ['clean', 'env', 'config', 'copy-assets'], _ => {
+//   return fuse.run();
+// });

index.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- Primary Meta Tags -->
+  <title>Chapo Chat</title>
+  <meta name="title" content="Chapo Chat">
+  <meta name="description"
+    content="ChapoChat is a leftist social platform for discussion, posting memes, and sharing content. Join a community today.">
+
+  <!-- Open Graph / Facebook -->
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://www.chapo.chat/">
+  <meta property="og:title" content="Chapo Chat">
+  <meta property="og:description"
+    content="ChapoChat is a leftist social platform for discussion, posting memes, and sharing content. Join a community today!">
+  <meta property="og:image" content="https://www.chapo.chat/static/assets/meta-preview.png">
+
+  <!-- Twitter -->
+  <meta property="twitter:card" content="summary_large_image">
+  <meta property="twitter:url" content="https://www.chapo.chat/">
+  <meta property="twitter:title" content="Chapo Chat">
+  <meta property="twitter:description"
+    content="ChapoChat is a leftist social platform for discussion, posting memes, and sharing content. Join a community today!">
+  <meta property="twitter:image" content="https://www.chapo.chat/static/assets/meta-preview.png">
+
+  <!-- Icons -->
+  <link rel="shortcut icon" type="image/svg+xml" href="/favicon.ico" />
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <link rel="manifest" href="/site.webmanifest">
+
+  <!-- Styles -->
+  <link rel="stylesheet" type="text/css" href="/css/tribute.css" />
+  <link rel="stylesheet" type="text/css" href="/css/toastify.css" />
+  <link rel="stylesheet" type="text/css" href="/css/choices.min.css" />
+  <link rel="stylesheet" type="text/css" href="/css/tippy.css" />
+  <link rel="stylesheet" type="text/css" href="/css/themes/litely.min.css" id="default-light" />
+  <link rel="stylesheet" type="text/css" href="/css/themes/darkly.min.css" id="default-dark"
+    media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark), (prefers-color-scheme: light)" />
+  <link rel="stylesheet" type="text/css" href="/css/main.css" />
+  <!-- <link rel="stylesheet" type="text/css" href="/custom.css" /> -->
+  <!-- <link rel="stylesheet" type="text/css" href="/variables.css" /> -->
+
+  <!-- Scripts -->
+  <script src="https://browser.sentry-cdn.com/5.19.1/bundle.min.js"
+    integrity="sha384-ibWewy8LWP0FdvEBD3iLjNmbFkkh/FKtOz8GR9C8ZBWjDTbjbdIDpa4nc/AasWns" crossorigin="anonymous">
+    </script>
+  <script src="https://hcaptcha.com/1/api.js"></script>
+  <script async src="/libs/sortable/sortable.min.js"></script>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/index.tsx"></script>
+</body>
+</html>

jest.config.js

@@ -1,10 +1,50 @@
+// module.exports = {
+//   preset: 'ts-jest',
+//   testEnvironment: 'node',
+//   testTimeout: 30000,
+//   globals: {
+//     'ts-jest': {
+//       diagnostics: false,
+//     },
+//   },
+//   testPathIgnorePatterns: ["/node_modules/", "/src\/api_tests/"]
+// };
+
 module.exports = {
-  preset: 'ts-jest',
-  testEnvironment: 'node',
-  testTimeout: 30000,
-  globals: {
-    'ts-jest': {
-      diagnostics: false,
-    },
+  roots: ['<rootDir>/src'],
+  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/**/*.d.ts'],
+  setupFiles: ['react-app-polyfill/jsdom'],
+  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
+  testMatch: [
+    '<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}',
+    '<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}',
+  ],
+  testEnvironment: 'jest-environment-jsdom-fourteen',
+  transform: {
+    '^.+\\.(js|jsx|ts|tsx)$': '<rootDir>/node_modules/babel-jest',
+    '^.+\\.css$': '<rootDir>/config/jest/cssTransform.js',
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)':
+      '<rootDir>/config/jest/fileTransform.js',
   },
+  testPathIgnorePatterns: ['/node_modules/', '/src/api_tests/'],
+  transformIgnorePatterns: [
+    '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$',
+    '^.+\\.module\\.(css|sass|scss)$',
+  ],
+  moduleFileExtensions: [
+    'web.js',
+    'js',
+    'web.ts',
+    'ts',
+    'web.tsx',
+    'tsx',
+    'json',
+    'web.jsx',
+    'jsx',
+    'node',
+  ],
+  watchPlugins: [
+    'jest-watch-typeahead/filename',
+    'jest-watch-typeahead/testname',
+  ],
 };

package.json

@@ -4,82 +4,115 @@
   "version": "1.0.0",
   "author": "Dessalines",
   "license": "AGPL-3.0-or-later",
-  "main": "index.js",
   "scripts": {
     "api-test": "jest src/api_tests/api.spec.ts",
-    "build": "node fuse prod",
+    "test": "jest",
+    "build": "node generate_translations.js && tsc --noEmit && NODE_ENV=production vite build --base=/static/",
     "lint": "tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx src",
-    "prebuild": "node generate_translations.js",
-    "prestart": "node generate_translations.js",
-    "start": "node fuse dev"
+    "start": "node generate_translations.js && vite --port 4444 --open",
+    "storybook": "start-storybook -p 9009"
   },
   "keywords": [],
   "dependencies": {
-    "@joeattardi/emoji-button": "^3.1.1",
-    "@types/autosize": "^3.0.6",
+    "@pika/react": "^16.13.1",
+    "@pika/react-dom": "^16.13.1",
+    "@reach/combobox": "^0.10.5",
+    "@reach/menu-button": "^0.10.5",
+    "@theme-ui/color": "^0.3.1",
+    "@theme-ui/presets": "^0.3.0",
+    "@types/autosize": "^3.0.7",
     "@types/js-cookie": "^2.2.6",
     "@types/jwt-decode": "^2.2.1",
-    "@types/markdown-it": "^0.0.9",
-    "@types/markdown-it-container": "^2.0.2",
-    "@types/node": "^13.11.1",
+    "@types/markdown-it": "^10.0.1",
+    "@types/markdown-it-container": "^2.0.3",
+    "@types/node": "^14.0.27",
+    "@types/qs": "^6.9.4",
+    "@types/react": "^16.9.44",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-router-dom": "^5.1.5",
+    "@types/testing-library__jest-dom": "^5.9.2",
+    "@types/theme-ui": "^0.3.6",
     "autosize": "^4.0.2",
     "body-scroll-lock": "^3.0.3",
-    "bootswatch": "^4.3.1",
-    "browser-sync": "^2.26.12",
+    "bootswatch": "^4.5.0",
     "choices.js": "^9.0.1",
-    "classcat": "^4.0.2",
+    "classcat": "^4.1.0",
+    "emoji-mart": "^3.0.0",
     "emoji-short-name": "^1.0.0",
     "husky": "^4.2.5",
-    "i18next": "^19.4.1",
-    "inferno": "^7.4.2",
-    "inferno-i18next": "nimbusec-oss/inferno-i18next",
-    "inferno-router": "^7.4.2",
-    "js-cookie": "^2.2.0",
+    "i18next": "^19.6.3",
+    "js-cookie": "^2.2.1",
     "jwt-decode": "^2.2.0",
-    "markdown-it": "^10.0.0",
-    "markdown-it-container": "^2.0.0",
+    "lodash.isequal": "^4.5.0",
+    "markdown-it": "^11.0.0",
+    "markdown-it-container": "^3.0.0",
     "markdown-it-emoji": "^1.4.0",
     "markdown-it-for-inline": "^0.1.1",
-    "moment": "^2.24.0",
-    "node-fetch": "^2.6.0",
+    "match-sorter": "^4.2.0",
+    "moment": "^2.27.0",
     "parse-domain": "^3.0.2",
-    "prettier": "^2.0.4",
+    "prettier": "^2.0.5",
     "psl": "^1.8.0",
     "qs": "^6.9.4",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-i18next": "^11.7.0",
+    "react-router-dom": "^5.2.0",
     "reconnecting-websocket": "^4.4.0",
     "register-service-worker": "^1.7.1",
-    "rxjs": "^6.5.5",
-    "terser": "^4.6.11",
-    "tippy.js": "^6.1.1",
-    "toastify-js": "^1.7.0",
+    "rxjs": "^6.6.2",
+    "terser": "^5.0.0",
+    "theme-ui": "^0.3.1",
+    "tippy.js": "^6.2.6",
+    "toastify-js": "^1.9.0",
     "tributejs": "^5.1.3",
-    "twemoji": "^12.1.2",
+    "twemoji": "^13.0.1",
     "url": "^0.11.0",
-    "ws": "^7.2.3"
+    "ws": "^7.3.1"
   },
   "devDependencies": {
-    "@types/jest": "^25.2.1",
-    "@types/node-fetch": "^2.5.6",
-    "eslint": "^6.5.1",
-    "eslint-plugin-inferno": "^7.14.3",
-    "eslint-plugin-jane": "^7.2.1",
-    "fuse-box": "^3.1.3",
-    "jest": "^25.4.0",
-    "lint-staged": "^10.1.3",
-    "sortpack": "^2.1.4",
-    "ts-jest": "^25.4.0",
-    "ts-node": "^8.8.2",
+    "@babel/core": "^7.11.1",
+    "@storybook/addon-info": "^5.3.19",
+    "@storybook/react": "^6.0.12",
+    "@testing-library/jest-dom": "^5.11.3",
+    "@testing-library/react": "^10.4.8",
+    "@testing-library/user-event": "^12.1.1",
+    "@types/jest": "^26.0.10",
+    "@types/node-fetch": "^2.5.7",
+    "@typescript-eslint/eslint-plugin": "^3.9.0",
+    "babel-jest": "^26.3.0",
+    "babel-loader": "^8.1.0",
+    "babel-preset-react-app": "^9.1.2",
+    "cssnano": "^4.1.10",
+    "eslint": "^7.6.0",
+    "eslint-plugin-inferno": "^7.20.1",
+    "eslint-plugin-jane": "^8.0.5",
+    "jest": "^26.4.0",
+    "jest-environment-jsdom-fourteen": "^1.0.1",
+    "jest-watch-typeahead": "^0.6.0",
+    "lint-staged": "^10.2.11",
+    "node-fetch": "^2.6.0",
+    "react-app-polyfill": "^1.0.6",
+    "react-docgen-typescript-loader": "^3.7.2",
+    "sortpack": "^2.1.6",
+    "source-map-loader": "^1.0.1",
+    "ts-jest": "^26.1.4",
+    "ts-loader": "^8.0.2",
+    "ts-node": "^8.10.2",
     "ts-transform-classcat": "^1.0.0",
     "ts-transform-inferno": "^4.0.3",
-    "typescript": "^3.8.3"
+    "typescript": "^3.9.7",
+    "vite": "^1.0.0-rc.4",
+    "vite-plugin-react": "^3.0.2"
   },
+  "extends": "@parcel/config-default",
   "engines": {
     "node": ">=8.9.0"
   },
   "engineStrict": true,
   "husky": {
     "hooks": {
-      "pre-commit": "cargo clippy --manifest-path ../server/Cargo.toml --all-targets --workspace -- -D warnings && lint-staged"
+      "pre-commit": "cargo clippy --manifest-path ../server/Cargo.toml --all-targets --workspace -- -D warnings && tsc --noEmit && lint-staged"
     }
   },
   "lint-staged": {
@@ -93,5 +126,10 @@
     "package.json": [
       "sortpack"
     ]
+  },
+  "babel": {
+    "presets": [
+      "react-app"
+    ]
   }
 }