Merge branch main into antti/add-tanstack-library

Author: anttiasmala

.env.example

@@ -12,6 +12,8 @@ GOOGLE_SERVICE_ACCOUNT_JSON_FILE="google_service_account-arctic-diode-438812-b5-
 
 
 # This variable is mostly used for deployable apps such as Vercel, Heroku app, etc
+# Note: Vercel env variables cannot contain newlines, so you need to remove them from the JSON object
+# Note: Vercel expects bare string without quotes around the string
 # If GOOGLE_SERVICE_ACCOUNT_JSON_FILE and GOOGLE_SERVICE_ACCOUNT_CREDENTIALS are defined, GOOGLE_SERVICE_ACCOUNT_CREDENTIALS will take the priority
 # Add into this variable the whole object inside Service Account's JSON file.
 # Should look something like this:
@@ -26,4 +28,9 @@ GOOGLE_SERVICE_ACCOUNT_CREDENTIALS=`{
   "token_uri": "https://accounts.google.com/o/oauth2/token",
   "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
   "client_x509_cert_url": "your-cert-url"
-}`
+}`
+
+# This is used in Vercel to secure the Cron Job API endpoint
+# Vercel recommends to have a password with at least 16 characters
+# More details: https://vercel.com/docs/cron-jobs/manage-cron-jobs#securing-cron-jobs
+CRON_SECRET="secretPasswordHere"

README.md

@@ -128,7 +128,7 @@ After making these changes, save the `.env` file.
 
 ## Troubleshooting Errors
 
-**Error: `dotenv: not found`**
+### Error: `dotenv: not found`
 
 - Ensure you've installed the `dotenv-cli` package. It's usually installed with other dependencies when using `npm i`. If not, use:
 
@@ -143,3 +143,19 @@ npm install -g dotenv-cli
 ```
 
 **Note:** You might need root access for global installation on Linux.
+
+### Error while running SVGR (npm run svgr)
+
+If you get this following error while running `npm run svgr`:
+
+```
+Failed to handle file: public/images/icons/contact-details.svg # NOTE, this is just an example .svg file
+/lahjalista/node_modules/@svgr/cli/dist/index.js:435
+throw error;
+^
+
+Error [ERR_REQUIRE_ESM]: require() of ES Module /lahjalista/node_modules/prettier-plugin-tailwindcss/dist/index.mjs not supported.
+Instead change the require of /lahjalista/node_modules/prettier-plugin-tailwindcss/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.
+```
+
+Head to `.prettierrc`file and remove the following line:`"plugins": ["prettier-plugin-tailwindcss"]`. Save the `.prettierrc`and try to run`npm run svgr` again. Now it should work. Remember to add the removed line back.

TODO.md

@@ -4,10 +4,12 @@
 
 # jos: sähköposti ei ole sääntöjen mukainen && salasanan pituus <= 0 -> Kirjaudu-buttonin className="cursor-not-allowed hover:text-white"
 
-# Rekistöröidessä kun rekistöröidy-painike on painettu -> tee napista semmoinen ettei voi painaa uudelleen / tee jonkinlainen latausindikaattori jotta käyttäjä tietää, että jotain tapahtuu. Tämä "ongelma" näkyy parhaiten Vercelin tarjoamassa testiympäristössä, jossa nopeudet eivät ole localhostin kaltaiset
-
 # Ehkä jonkinlainen kysymys, että haluaako pysyä kirjautuneena kun session on loppumassa? Kuten julkisissapalveluissa (Kela, OmaKanta, Suomi.fi yms)
 
+# Jokin sivu (esimerkiksi asetuksiin), joka näyttää kaikki aktiiviset (miksei epäaktiiviset) Sessionit. Myöskin Sessionin poistomahdollisuus voitaisiin lisätä
+
+# Enter-näppäimellä EditModalin ja DeleteModalin hyväksyminen
+
 ### </IDEOITA>
 
 TODO:

components/Modal.tsx

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom';
 import { twMerge } from 'tailwind-merge';
 import { TitleText } from './TitleText';
 import SvgXClose from '~/icons/x_close';
-import { useKeyPress } from '~/utils/hooks/useKeyPress';
+import { useKeyPress } from '~/hooks/useKeyPress';
 
 export function Modal({
   children,

utils/hooks/useKeyPress.ts renamed to hooks/useKeyPress.ts

@@ -0,0 +1,29 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import { lucia } from '~/backend/auth';
+import { handleError } from '~/backend/handleError';
+import { HttpError } from '~/backend/HttpError';
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
+  try {
+    if (req.method !== 'GET') {
+      throw new HttpError('Invalid HTTP request method!', 405);
+    }
+
+    const authHeader = req.headers.authorization;
+
+    if (authHeader !== `Bearer ${process.env.CRON_SECRET}`) {
+      throw new HttpError('Unauthorized!', 401);
+    }
+
+    // if authHeader was correct we can delete expired sessions
+
+    console.log('Cron job activated! Deleting expired sessions...');
+    await lucia.deleteExpiredSessions();
+    res.status(200).end();
+  } catch (e) {
+    return handleError(res, e);
+  }
+}

pages/api/cron/index.ts

@@ -2,13 +2,22 @@ import { toast } from 'react-toastify';
 
 export function handleErrorToast(errorText: string) {
   try {
-    const toastId = toast(errorText, {
+    const toastId = `toast-${errorText}`;
+    const toastExists = document.getElementById(toastId);
+
+    // if toast exists, reset timer
+    if (toastExists) {
+      toast.update(errorText, { progress: 0 });
+      return;
+    }
+
+    toast(errorText, {
       type: 'error',
-      toastId: window.crypto.randomUUID(),
+      toastId: toastId,
     });
 
     const observer = new MutationObserver(() => {
-      const addedToast = document.getElementById(toastId.toString());
+      const addedToast = document.getElementById(toastId);
       if (addedToast) {
         addedToast.addEventListener('mouseenter', () => {
           toast.update(toastId, { progress: 1 });

utils/handleToasts.ts

@@ -0,0 +1,8 @@
+{
+    "crons": [
+        {
+            "path": "/api/cron",
+            "schedule": "0 0 * * *"
+        }
+    ]
+}