Merge pull request #138 from svsticky/refactor/function-components

refactor: convert remaining class components into function components

.github/workflows/projects.yml

@@ -23,4 +23,3 @@ jobs:
           # labeled: # optional
           # The behavior of the labels filter, AND to match all labels, OR to match any label, NOT to exclude any listed label (default is OR)
           # label-operator: # optional
-

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.lintstagedrc.json

@@ -0,0 +1,4 @@
+{
+  "**/*.{js,jsx,ts,tsx}": ["prettier . --write", "eslint . --fix", "eslint ."],
+  "**/*.{json,css,md}": ["prettier . --write"]
+}

.prettierignore

@@ -0,0 +1,3 @@
+node_modules
+package-lock.json
+src/snow

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "printWidth": 80,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2
+}

CONTRIBUTING.md

@@ -22,7 +22,6 @@ To contribute to our projects, please follow these steps:
 git clone https://github.com/svsticky/radio.git
 ```
 
-
 2. **Switch to a New Branch**: Create a new branch for your work and switch to it.
 
 ```shell

README.md

@@ -8,7 +8,7 @@ and contains things like upcoming activities and peculiar quotes.
 
 ## Installation
 
-### Prequisites
+### Prerequisites
 
 We recommend installing the LTS version of [node.js](https://nodejs.org/), which includes [corepack](https://github.com/nodejs/corepack) which can install the correct package manager for this project.
 
@@ -19,21 +19,22 @@ We recommend installing the LTS version of [node.js](https://nodejs.org/), which
    in there, as long as you have a command-line open in the folder of your clone of radio.
 3. In the terminal, run the following commands:
 
-  ```bash
-  corepack enable # Install the package manager
-  npm i           # Install the dependencies
-  ```
+```bash
+corepack enable # Install the package manager
+npm i           # Install the dependencies
+```
 
 4. Finally, you need to provide your local installation of radio with some secrets.
-    1. Copy `sample.env` to `.env`.
-    2. Fill in all the missing secrets in `.env`.
 
-       If you do not have access to them, feel free to ask for them! However, you might not need them.
-       The secrets are only required to fetch content for the 'internal' pages, meant only for inside
-       the Sticky room: those visible only when you add `?internal=true` to the URL.
+   1. Copy `sample.env` to `.env`.
+   2. Fill in all the missing secrets in `.env`.
+
+      If you do not have access to them, feel free to ask for them! However, you might not need them.
+      The secrets are only required to fetch content for the 'internal' pages, meant only for inside
+      the Sticky room: those visible only when you add `?internal=true` to the URL.
 
-       If, at the moment, you are not interested in those pages, you can just provide gibberish
-       secrets everywhere, and radio will work!
+      If, at the moment, you are not interested in those pages, you can just provide gibberish
+      secrets everywhere, and radio will work!
 
 ## Usage
 
@@ -83,7 +84,7 @@ npm run preview
 ### Distribution
 
 There are many ways one can replace the contents of the `dist` folder on the server
-with your local `dist` folder's contents.  For instance, you could travel to germany,
+with your local `dist` folder's contents. For instance, you could travel to germany,
 ask the server maintainers kindly to plug in your USB stick and copy over your files.
 However, you could of course also do the following (on linux/WSL):
 

eslint.config.js

@@ -0,0 +1,37 @@
+import globals from 'globals';
+import pluginJs from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import pluginReact from 'eslint-plugin-react';
+
+export default [
+  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
+  { ignores: ['node_modules', 'dist'] },
+  { languageOptions: { globals: globals.browser } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    ...pluginReact.configs.flat.recommended,
+    settings: {
+      react: {
+        version: '18.3',
+      },
+    },
+  },
+  pluginReact.configs.flat['jsx-runtime'],
+  {
+    rules: {
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          args: 'all',
+          argsIgnorePattern: '^_',
+          caughtErrors: 'all',
+          caughtErrorsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
+      ],
+    },
+  },
+];

index.html

@@ -1,18 +1,15 @@
 <!doctype html>
 <html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Radio</title>
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.jsx"></script>
-  <script src="src/snow/snow.js" type="module"></script>
-</body>
-
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Radio</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="src/snow/snow.ts"></script>
+  </body>
 </html>
-