diff --git a/.gitignore b/.gitignore
index df06164..2c31e0c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,8 @@ data/
backend/.sobelow
node_modules/
+/frontend/build/
+/frontend/dist/
# Environments
.env
diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.cjs
similarity index 53%
rename from frontend/.eslintrc.js
rename to frontend/.eslintrc.cjs
index 56ee49e..9a099f0 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.cjs
@@ -5,20 +5,29 @@ module.exports = {
tsconfigRootDir: __dirname,
project: ["./tsconfig.json"],
},
- plugins: ["@typescript-eslint", "prettier"],
+ plugins: ["@typescript-eslint"],
extends: [
"plugin:@typescript-eslint/recommended-requiring-type-checking",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
- "prettier/@typescript-eslint",
- "prettier",
],
rules: {
"@typescript-eslint/no-explicit-any": 0,
"@typescript-eslint/explicit-function-return-type": 0,
"react/prop-types": 0,
- "@typescript-eslint/no-non-null-assertion": 0
+ "@typescript-eslint/no-non-null-assertion": 0,
+ "@typescript-eslint/no-unsafe-assignment": ["off"],
+ "@typescript-eslint/no-unsafe-argument": ["off"],
+ "@typescript-eslint/no-unsafe-call": ["off"],
+ "@typescript-eslint/no-unsafe-member-access": ["off"],
+ "@typescript-eslint/no-unsafe-return": ["off"],
+ "@typescript-eslint/restrict-template-expressions": ["off"],
+ },
+ settings: {
+ react: {
+ version: "detect",
+ },
},
};
diff --git a/frontend/README.md b/frontend/README.md
index 64c27a2..bb62f9e 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -2,7 +2,7 @@
The React frontend for [fediverse.space](https://fediverse.space). Written in Typescript.
-- Set the environment variable `REACT_APP_STAGING=true` when building to use the staging backend.
+- Set the environment variable `VITE_STAGING=true` when building to use the staging backend.
- React components are organized into atoms, molecules, organisms, and screens according to [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/).
# Default README
@@ -116,8 +116,8 @@ You can find the most recent version of this guide [here](https://github.com/fac
Create React App is divided into two packages:
-* `create-react-app` is a global command-line utility that you use to create new projects.
-* `react-scripts` is a development dependency in the generated projects (including this one).
+- `create-react-app` is a global command-line utility that you use to create new projects.
+- `react-scripts` is a development dependency in the generated projects (including this one).
You almost never need to update `create-react-app` itself: it delegates all the setup to `react-scripts`.
@@ -156,8 +156,8 @@ my-app/
For the project to build, **these files must exist with exact filenames**:
-* `public/index.html` is the page template;
-* `src/index.js` is the JavaScript entry point.
+- `public/index.html` is the page template;
+- `src/index.js` is the JavaScript entry point.
You can delete or rename the other files.
@@ -218,12 +218,12 @@ You can refer [to the React documentation](https://reactjs.org/docs/react-dom.ht
This project supports a superset of the latest JavaScript standard.
In addition to [ES6](https://github.com/lukehoban/es6features) syntax features, it also supports:
-* [Exponentiation Operator](https://github.com/rwaldron/exponentiation-operator) (ES2016).
-* [Async/await](https://github.com/tc39/ecmascript-asyncawait) (ES2017).
-* [Object Rest/Spread Properties](https://github.com/sebmarkbage/ecmascript-rest-spread) (stage 3 proposal).
-* [Dynamic import()](https://github.com/tc39/proposal-dynamic-import) (stage 3 proposal)
-* [Class Fields and Static Properties](https://github.com/tc39/proposal-class-public-fields) (stage 2 proposal).
-* [JSX](https://facebook.github.io/react/docs/introducing-jsx.html) and [Flow](https://flowtype.org/) syntax.
+- [Exponentiation Operator](https://github.com/rwaldron/exponentiation-operator) (ES2016).
+- [Async/await](https://github.com/tc39/ecmascript-asyncawait) (ES2017).
+- [Object Rest/Spread Properties](https://github.com/sebmarkbage/ecmascript-rest-spread) (stage 3 proposal).
+- [Dynamic import()](https://github.com/tc39/proposal-dynamic-import) (stage 3 proposal)
+- [Class Fields and Static Properties](https://github.com/tc39/proposal-class-public-fields) (stage 2 proposal).
+- [JSX](https://facebook.github.io/react/docs/introducing-jsx.html) and [Flow](https://flowtype.org/) syntax.
Learn more about [different proposal stages](https://babeljs.io/docs/plugins/#presets-stage-x-experimental-presets-).
@@ -231,9 +231,9 @@ While we recommend to use experimental proposals with some caution, Facebook hea
Note that **the project only includes a few ES6 [polyfills](https://en.wikipedia.org/wiki/Polyfill)**:
-* [`Object.assign()`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) via [`object-assign`](https://github.com/sindresorhus/object-assign).
-* [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) via [`promise`](https://github.com/then/promise).
-* [`fetch()`](https://developer.mozilla.org/en/docs/Web/API/Fetch_API) via [`whatwg-fetch`](https://github.com/github/fetch).
+- [`Object.assign()`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) via [`object-assign`](https://github.com/sindresorhus/object-assign).
+- [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) via [`promise`](https://github.com/then/promise).
+- [`fetch()`](https://developer.mozilla.org/en/docs/Web/API/Fetch_API) via [`whatwg-fetch`](https://github.com/github/fetch).
If you use any other ES6+ features that need **runtime support** (such as `Array.from()` or `Symbol`), make sure you are including the appropriate polyfills manually, or that the browsers you are targeting already support them.
@@ -245,8 +245,8 @@ To configure the syntax highlighting in your favorite text editor, head to the [
## Displaying Lint Output in the Editor
->Note: this feature is available with `react-scripts@0.2.0` and higher.
->It also only works with npm 3 or higher.
+> Note: this feature is available with `react-scripts@0.2.0` and higher.
+> It also only works with npm 3 or higher.
Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint.
@@ -281,20 +281,23 @@ Then add the block below to your `launch.json` file and put it inside the `.vsco
```json
{
"version": "0.2.0",
- "configurations": [{
- "name": "Chrome",
- "type": "chrome",
- "request": "launch",
- "url": "http://localhost:3000",
- "webRoot": "${workspaceRoot}/src",
- "userDataDir": "${workspaceRoot}/.vscode/chrome",
- "sourceMapPathOverrides": {
- "webpack:///src/*": "${webRoot}/*"
+ "configurations": [
+ {
+ "name": "Chrome",
+ "type": "chrome",
+ "request": "launch",
+ "url": "http://localhost:3000",
+ "webRoot": "${workspaceRoot}/src",
+ "userDataDir": "${workspaceRoot}/.vscode/chrome",
+ "sourceMapPathOverrides": {
+ "webpack:///src/*": "${webRoot}/*"
+ }
}
- }]
+ ]
}
```
->Note: the URL may be different if you've made adjustments via the [HOST or PORT environment variables](#advanced-configuration).
+
+> Note: the URL may be different if you've made adjustments via the [HOST or PORT environment variables](#advanced-configuration).
Start your app by running `npm start`, and start debugging in VS Code by pressing `F5` or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor.
@@ -304,11 +307,11 @@ You would need to have [WebStorm](https://www.jetbrains.com/webstorm/) and [JetB
In the WebStorm menu `Run` select `Edit Configurations...`. Then click `+` and select `JavaScript Debug`. Paste `http://localhost:3000` into the URL field and save the configuration.
->Note: the URL may be different if you've made adjustments via the [HOST or PORT environment variables](#advanced-configuration).
+> Note: the URL may be different if you've made adjustments via the [HOST or PORT environment variables](#advanced-configuration).
Start your app by running `npm start`, then press `^D` on macOS or `F9` on Windows and Linux or click the green debug icon to start debugging in WebStorm.
-The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine.
+The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine.
## Formatting Code Automatically
@@ -326,9 +329,9 @@ Alternatively you may use `yarn`:
yarn add husky lint-staged prettier
```
-* `husky` makes it easy to use githooks as if they are npm scripts.
-* `lint-staged` allows us to run scripts on staged files in git. See this [blog post about lint-staged to learn more about it](https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8).
-* `prettier` is the JavaScript formatter we will run before commits.
+- `husky` makes it easy to use githooks as if they are npm scripts.
+- `lint-staged` allows us to run scripts on staged files in git. See this [blog post about lint-staged to learn more about it](https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8).
+- `prettier` is the JavaScript formatter we will run before commits.
Now we can make sure every file is formatted correctly by adding a few lines to the `package.json` in the project root.
@@ -396,7 +399,7 @@ For example:
### `Button.js`
```js
-import React, { Component } from 'react';
+import React, { Component } from "react";
class Button extends Component {
render() {
@@ -409,10 +412,9 @@ export default Button; // Don’t forget to use export default!
### `DangerButton.js`
-
```js
-import React, { Component } from 'react';
-import Button from './Button'; // Import a component from another file
+import React, { Component } from "react";
+import Button from "./Button"; // Import a component from another file
class DangerButton extends Component {
render() {
@@ -431,9 +433,9 @@ Named exports are useful for utility modules that export several functions. A mo
Learn more about ES6 modules:
-* [When to use the curly braces?](http://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281)
-* [Exploring ES6: Modules](http://exploringjs.com/es6/ch_modules.html)
-* [Understanding ES6: Modules](https://leanpub.com/understandinges6/read#leanpub-auto-encapsulating-code-with-modules)
+- [When to use the curly braces?](http://stackoverflow.com/questions/36795819/react-native-es-6-when-should-i-use-curly-braces-for-import/36796281#36796281)
+- [Exploring ES6: Modules](http://exploringjs.com/es6/ch_modules.html)
+- [Understanding ES6: Modules](https://leanpub.com/understandinges6/read#leanpub-auto-encapsulating-code-with-modules)
## Code Splitting
@@ -446,22 +448,23 @@ Here is an example:
### `moduleA.js`
```js
-const moduleA = 'Hello';
+const moduleA = "Hello";
export { moduleA };
```
+
### `App.js`
```js
-import React, { Component } from 'react';
+import React, { Component } from "react";
class App extends Component {
handleClick = () => {
- import('./moduleA')
+ import("./moduleA")
.then(({ moduleA }) => {
// Use moduleA
})
- .catch(err => {
+ .catch((err) => {
// Handle failure
});
};
@@ -503,8 +506,8 @@ This project setup uses [Webpack](https://webpack.js.org/) for handling all asse
### `Button.js`
```js
-import React, { Component } from 'react';
-import './Button.css'; // Tell Webpack that Button.js uses these styles
+import React, { Component } from "react";
+import "./Button.css"; // Tell Webpack that Button.js uses these styles
class Button extends Component {
render() {
@@ -543,11 +546,11 @@ becomes this:
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
-webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
+ -ms-flex-align: center;
+ align-items: center;
}
```
@@ -582,13 +585,13 @@ Then in `package.json`, add the following lines to `scripts`:
"test": "react-scripts test --env=jsdom",
```
->Note: To use a different preprocessor, replace `build-css` and `watch-css` commands according to your preprocessor’s documentation.
+> Note: To use a different preprocessor, replace `build-css` and `watch-css` commands according to your preprocessor’s documentation.
Now you can rename `src/App.css` to `src/App.scss` and run `npm run watch-css`. The watcher will find every Sass file in `src` subdirectories, and create a corresponding CSS file next to it, in our case overwriting `src/App.css`. Since `src/App.js` still imports `src/App.css`, the styles become a part of your application. You can now edit `src/App.scss`, and `src/App.css` will be regenerated.
To share variables between Sass files, you can use Sass imports. For example, `src/App.scss` and other component style files could include `@import "./shared.scss";` with variable definitions.
-To enable importing files without using relative paths, you can add the `--include-path` option to the command in `package.json`.
+To enable importing files without using relative paths, you can add the `--include-path` option to the command in `package.json`.
```
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
@@ -598,8 +601,8 @@ To enable importing files without using relative paths, you can add the `--incl
This will allow you to do imports like
```scss
-@import 'styles/_colors.scss'; // assuming a styles directory under src/
-@import 'nprogress/nprogress'; // importing a css file from the nprogress node module
+@import "styles/_colors.scss"; // assuming a styles directory under src/
+@import "nprogress/nprogress"; // importing a css file from the nprogress node module
```
At this point you might want to remove all CSS files from the source control, and add `src/**/*.css` to your `.gitignore` file. It is generally a good practice to keep the build products outside of the source control.
@@ -638,13 +641,13 @@ Now running `npm start` and `npm run build` also builds Sass files.
`node-sass` has been reported as having the following issues:
-- `node-sass --watch` has been reported to have *performance issues* in certain conditions when used in a virtual machine or with docker.
+- `node-sass --watch` has been reported to have _performance issues_ in certain conditions when used in a virtual machine or with docker.
- Infinite styles compiling [#1939](https://github.com/facebookincubator/create-react-app/issues/1939)
- `node-sass` has been reported as having issues with detecting new files in a directory [#1891](https://github.com/sass/node-sass/issues/1891)
- `node-sass-chokidar` is used here as it addresses these issues.
+`node-sass-chokidar` is used here as it addresses these issues.
## Adding Images, Fonts, and Files
@@ -656,7 +659,7 @@ To reduce the number of requests to the server, importing images that are less t
Before getting started, you must define each type of asset as a valid module format. Otherwise, the TypeScript compiler will generate an error like this:
->Cannot find module './logo.png'.
+> Cannot find module './logo.png'.
To import asset files in TypeScript, create a new type definition file in your project, and name it something like `assets.d.ts`. Then, add a line for each type of asset that you need to import:
@@ -667,6 +670,7 @@ declare module "*.jpeg";
declare module "*.png";
declare module "*.svg";
```
+
(you'll have to restart the compiler in order the changes to take place)
In this case, we've added several image file extensions as valid module formats.
@@ -674,8 +678,8 @@ In this case, we've added several image file extensions as valid module formats.
Now that the compiler is configured, here is an example of importing an image file:
```js
-import React from 'react';
-import logo from './logo.svg'; // Tell Webpack this JS file uses this image
+import React from "react";
+import logo from "./logo.svg"; // Tell Webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
@@ -706,7 +710,7 @@ An alternative way of handling static assets is described in the next section.
## Using the `public` Folder
->Note: this feature is available with `react-scripts@0.5.0` and higher.
+> Note: this feature is available with `react-scripts@0.5.0` and higher.
### Changing the HTML
@@ -721,13 +725,13 @@ Note that we normally encourage you to `import` assets in JavaScript files inste
For example, see the sections on [adding a stylesheet](#adding-a-stylesheet) and [adding images and fonts](#adding-images-fonts-and-files).
This mechanism provides a number of benefits:
-* Scripts and stylesheets get minified and bundled together to avoid extra network requests.
-* Missing files cause compilation errors instead of 404 errors for your users.
-* Result filenames include content hashes so you don’t need to worry about browsers caching their old versions.
+- Scripts and stylesheets get minified and bundled together to avoid extra network requests.
+- Missing files cause compilation errors instead of 404 errors for your users.
+- Result filenames include content hashes so you don’t need to worry about browsers caching their old versions.
However there is an **escape hatch** that you can use to add an asset outside of the module system.
-If you put a file into the `public` folder, it will **not** be processed by Webpack. Instead it will be copied into the build folder untouched. To reference assets in the `public` folder, you need to use a special variable called `PUBLIC_URL`.
+If you put a file into the `public` folder, it will **not** be processed by Webpack. Instead it will be copied into the build folder untouched. To reference assets in the `public` folder, you need to use a special variable called `PUBLIC_URL`.
Inside `index.html`, you can use it like this:
@@ -752,19 +756,19 @@ render() {
Keep in mind the downsides of this approach:
-* None of the files in `public` folder get post-processed or minified.
-* Missing files will not be called at compilation time, and will cause 404 errors for your users.
-* Result filenames won’t include content hashes so you’ll need to add query arguments or rename them every time they change.
+- None of the files in `public` folder get post-processed or minified.
+- Missing files will not be called at compilation time, and will cause 404 errors for your users.
+- Result filenames won’t include content hashes so you’ll need to add query arguments or rename them every time they change.
### When to Use the `public` Folder
Normally we recommend importing [stylesheets](#adding-a-stylesheet), [images, and fonts](#adding-images-fonts-and-files) from JavaScript.
The `public` folder is useful as a workaround for a number of less common cases:
-* You need a file with a specific name in the build output, such as [`manifest.webmanifest`](https://developer.mozilla.org/en-US/docs/Web/Manifest).
-* You have thousands of images and need to dynamically reference their paths.
-* You want to include a small script like [`pace.js`](http://github.hubspot.com/pace/docs/welcome/) outside of the bundled code.
-* Some library may be incompatible with Webpack and you have no other option but to include it as a `