Merge remote-tracking branch 'origin/develop'

Author: typeofweb

.env-sample

@@ -1,9 +1,7 @@
-DATABASE_URL="postgres://postgres:postgres@localhost:5438/postgres"
-DATABASE_POOL_URL="postgres://postgres:postgres@localhost:5438/postgres"
-NEXT_PUBLIC_SUPABASE_URL="http://localhost:8765"
-NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJzdXBhYmFzZSIsImlhdCI6MTYwMzk2ODgzNCwiZXhwIjoyNTUwNjUzNjM0LCJyb2xlIjoiYW5vbiJ9.36fUebxgx1mcBo4s19v0SzqmzunP--hm_hep0uLX0ew"
-# Supabase Key (service_role, private): eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJzdXBhYmFzZSIsImlhdCI6MTYwMzk2ODgzNCwiZXhwIjoyNTUwNjUzNjM0LCJyb2xlIjoic2VydmljZV9yb2xlIn0.necIJaiP7X2T2QjGeV-FhpkizcNTX8HjDDBAxpgQTEI
-# Email testing interface URL: http://localhost:9000
+DATABASE_URL="postgres://postgres:postgres@localhost:54322/postgres"
+DATABASE_POOL_URL="postgres://postgres:postgres@localhost:54322/postgres"
+NEXT_PUBLIC_SUPABASE_URL="http://localhost:54321"
+NEXT_PUBLIC_SUPABASE_ANON_KEY=""
 
 YOUTUBE_API_KEY=""
 CLOUDINARY_URL=""

.eslintignore

@@ -25,8 +25,6 @@ dist
 logs
 *.log
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 
 # Runtime data
 pids
@@ -74,8 +72,6 @@ jspm_packages/
 # Output of 'npm pack'
 *.tgz
 
-# Yarn Integrity file
-.yarn-integrity
 
 # dotenv environment variables file
 .env
@@ -116,8 +112,6 @@ dist
 logs
 *.log
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 
 # Runtime data
 pids
@@ -165,8 +159,6 @@ jspm_packages/
 # Output of 'npm pack'
 *.tgz
 
-# Yarn Integrity file
-.yarn-integrity
 
 # dotenv environment variables file
 .env

.github/workflows/test-pr.yml

@@ -10,38 +10,40 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 100
 
-      - name: Read .nvmrc
-        run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
-        id: nvm
-      - name: Use Node.js
-        uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
         with:
-          node-version: '${{ steps.nvm.outputs.NVMRC }}'
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
+          node-version-file: '.nvmrc'
 
-      - uses: actions/cache@v2
-        id: yarn-cache
+      - uses: pnpm/action-setup@v2
         with:
-          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          run_install: false
+
+      - name: Get pnpm store directory
+        id: pnpm-cache
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
+          key: node-cache-${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
           restore-keys: |
-            ${{ runner.os }}-yarn-
-            ${{ runner.os }}-
+            node-cache-${{ runner.os }}-pnpm-
 
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: pnpm --version && pnpm install --frozen-lockfile
 
       - name: Copy .env
         run: cp .env-sample .env
 
       - name: Run tests
         run: |
-          yarn tsc
-          yarn eslint
-          yarn test:ci
+          pnpm tsc
+          pnpm eslint
+          pnpm test:ci

.gitignore

@@ -12,7 +12,6 @@
 .pnp.js
 .tmp
 .version
-.yarn-integrity
 *.log
 *.pid
 *.pid.lock
@@ -39,8 +38,6 @@ npm-debug.log*
 package-lock.json
 pids
 test-results.xml
-yarn-error.log*
-yarn.lock
 
 key
 key.pub

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint-staged
+pnpm lint-staged

.nvmrc

@@ -1 +1 @@
-14
+18

.vscode/settings.json

@@ -2,7 +2,7 @@
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "typescript.tsdk": "node_modules/typescript/lib",
-  "eslint.packageManager": "yarn",
+  "eslint.packageManager": "pnpm",
   "eslint.run": "onSave",
   "editor.codeActionsOnSave": {
     "source.fixAll": true

CONTRIBUTING.md

@@ -15,40 +15,33 @@ Zachęcamy do otwierania Issues ze znalezionymi bugami i z sugestiami tego, co m
 
 ## Wymagania
 
-- `yarn` w wersji co najmniej 1.22.x, ale mniejszej niż 2.x.x
-- Docker i polecenie `docker-compose`
+- `pnpm` w wersji co najmniej 7.17.0
+- Docker i polecenie `docker compose`
 
 ## Praca lokalna
 
 Przed przystąpieniem do pracy należy skopiować plik `.env-sample` do `.env`.
-Projekt uruchamiamy jednym poleceniem `yarn dev`. Spowoduje ono instalację wszystkich potrzebnych zależności, uruchomienie kontenera w Dockerze oraz naszej aplikacji.
+Projekt uruchamiamy jednym poleceniem `pnpm dev`. Spowoduje ono instalację wszystkich potrzebnych zależności, uruchomienie kontenera w Dockerze oraz naszej aplikacji.
 Po chwili powinna być gotowa pod adresem http://localhost:3000/
 
 ### Uwaga co do Supabase
 
-Przy pierwszym uruchomieniu, możesz zobaczyć komunikat mówiąc o braku Supabase. W takim przypadku uruchom polecenie `yarn supabase init` i zatwierdź domyślne opcje wciskając 3xenter. Po dłuższej chwili na ekranie zobaczysz 5 wartości:
+Przy pierwszym uruchomieniu, możesz zobaczyć komunikat mówiąc o braku Supabase. W takim przypadku uruchom polecenie `pnpm supabase init`. Następnie uruchom `pnpm supabase start`.
 
-- Supabase URL
-- Supabase Key (anon, public)
-- Supabase Key (service_role, private)
-- Database URL
-- Email testing interface URL
+Użyj komendy `pnpm supabase status`, aby uzyskać dostęp do wartości, które następnie musisz skopiować do swojego pliku `.env`. Odpowiednio:
 
-Koniecznie skopiuj je do swojego pliku `.env` odpowiednio:
+- `API URL` jako `NEXT_PUBLIC_SUPABASE_URL`
+- `anon key` jako `NEXT_PUBLIC_SUPABASE_ANON_KEY`
+- `DB URL` jako `DATABASE_URL` oraz `DATABASE_POOL_URL`
 
-- Supabase URL jako `NEXT_PUBLIC_SUPABASE_URL`
-- Supabase Key (anon, public) jako `NEXT_PUBLIC_SUPABASE_ANON_KEY`
-- Database URL jako `DATABASE_URL` i `DATABASE_POOL_URL`
-- Supabase Key (service_role, private) oraz Email testing interface URL nie będą potrzebne
-
-Następnie ponownie odpal `yarn dev`.
+Następnie odpal `pnpm dev`.
 
 ## Przywracanie danych z DUMP.sql
 
 Gdy wszystko będzie już gotowe, to w drugim oknie terminala należy wpisać polecenie:
 
 ```bash
-docker exec -i supabase-db psql postgres -U postgres < DUMP.sql
+docker exec -i supabase_db_polskifrontend psql postgres -U postgres < DUMP.sql
 ```
 
 Spowoduje to załadowanie danych do bazy z pliku DUMP.sql.
@@ -57,6 +50,6 @@ Spowoduje to załadowanie danych do bazy z pliku DUMP.sql.
 
 Większość konwencji w projekcie jest wymuszona przez `prettier` i/lub `eslint` oraz TypeScripta.
 
-Ważna uwaga odnośnie tworzenia Pull Requestów: Od 29. grudnia korzystamy z "Conventional Commits", aby łatwiej nam było generować CHANGELOG. **Nazwy commitów mogą być dowolne**, ale **tytuł samego PR-a musi spełniać określone wymagania**! Więcej informacji oraz przykłady można znaleźć tutaj: https://highlab.pl/conventional-commits/
+Ważna uwaga odnośnie tworzenia Pull Requestów: korzystamy z "Conventional Commits", aby łatwiej nam było generować CHANGELOG. **Nazwy commitów mogą być dowolne**, ale **tytuł samego PR-a musi spełniać określone wymagania**! Więcej informacji oraz przykłady można znaleźć tutaj: https://highlab.pl/conventional-commits/
 
 **Tytuły i opisy PR-ów piszemy w języku polskim!**

api-helpers/api-hofs.ts

@@ -1,15 +1,14 @@
 /* eslint-disable @typescript-eslint/consistent-type-assertions -- this is, in principle, unsafe */
 import Boom from '@hapi/boom';
+import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs';
 import { object } from 'yup';
 
-import { supabase } from '../utils/api/initSupabase';
-
 import { logger } from './logger';
 import { closeConnection, openConnection } from './prisma/db';
 import { handlePrismaError, isPrismaError } from './prisma/prisma-helper';
 
 import type { Member, PrismaClient, UserRole } from '@prisma/client';
-import type { User } from '@supabase/gotrue-js';
+import type { User } from '@supabase/auth-helpers-nextjs';
 import type { IncomingMessage } from 'http';
 import type { NextApiResponse, NextApiRequest } from 'next';
 import type { AnySchema, ObjectSchema, InferType } from 'yup';
@@ -143,18 +142,28 @@ export function withAuth(role?: UserRole) {
     ) => unknown,
   ) =>
     withDb<R>(async (req, res) => {
-      const session = await supabase.auth.api.getUserByCookie(req);
+      const supabase = createServerSupabaseClient({ req, res } as unknown as {
+        readonly req: NextApiRequest;
+        readonly res: NextApiResponse;
+      });
+      const session = await supabase.auth.getSession();
+
+      if (session.error) {
+        throw Boom.unauthorized();
+      }
 
-      if (!session?.user) {
+      if (!session.data.session?.user) {
         throw Boom.unauthorized();
       }
 
-      const member = await req.db.member.findUnique({ where: { id: session.user.id } });
+      const member = await req.db.member.findUnique({
+        where: { id: session.data.session.user.id },
+      });
       if (!member || (role && member.role !== role)) {
         throw Boom.unauthorized();
       }
 
-      return handler(unsafe__set(req, 'session', { user: session.user, member }), res);
+      return handler(unsafe__set(req, 'session', { user: session.data.session.user, member }), res);
     });
 }
 

components/AboutSection/AboutSection.tsx

@@ -1,16 +1,16 @@
 import Link from 'next/link';
 
-import { Button } from '../Button/Button';
+import { ButtonAsLink } from '../ButtonAsLink/ButtonAsLink';
 
 import Styles from './aboutSection.module.scss';
 
 export const AboutSection = () => (
   <section className={Styles.section}>
     <h2 className={Styles.heading}>O serwisie</h2>
     <div className={Styles.buttons}>
-      <Link href="/" passHref>
-        <Button icon="icon-arrow-left2">Strona Główna</Button>
-      </Link>
+      <ButtonAsLink href="/" icon="icon-arrow-left2">
+        Strona Główna
+      </ButtonAsLink>
     </div>
     <article className={Styles.note}>
       <h3>Po co jest ten serwis?</h3>
@@ -33,11 +33,8 @@ export const AboutSection = () => (
         Jeżeli więc znasz (lub sam prowadzisz) jakiś blog, serwis lub stronę{' '}
         <strong>w języku polskim</strong>, której tutaj nie ma, a uważasz, że powinna się tu znaleźć
         - zapraszam do zgłoszenia go przez specjalnie do tego celu{' '}
-        <Link href="/zglos-serwis">
-          <a>przygotowany formularz</a>
-        </Link>
-        . Obiecuję, że przejrzę każde zgłoszenie i jeśli uznam, że dana strona się nadaje - dodam ją
-        do serwisu!
+        <Link href="/zglos-serwis">przygotowany formularz</Link>. Obiecuję, że przejrzę każde
+        zgłoszenie i jeśli uznam, że dana strona się nadaje - dodam ją do serwisu!
       </p>
       <p>
         A jeśli podoba Ci się moja idea i sam prowadzisz bloga o frontendzie, to oprócz zgłoszenia