Merge pull request #168 from Prodeko/main

Add some debugging changes

.devcontainer/devcontainer.json

@@ -1,33 +1,33 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
 // https://github.com/microsoft/vscode-dev-containers/tree/v0.245.2/containers/javascript-node
 {
-	"name": "Node.js",
-	"dockerComposeFile": "../docker-compose.dev.yml",
-	"service": "next",
-	"workspaceFolder": "/usr/src/app",
-	// Configure tool-specific properties.
-	"customizations": {
-		"vscode": {
-			"extensions": [
-				"humao.rest-client",
-				"eamodio.gitlens",
-				"esbenp.prettier-vscode",
-				"biomejs.biome",
+  "name": "Node.js",
+  "dockerComposeFile": "../docker-compose.dev.yml",
+  "service": "next",
+  "workspaceFolder": "/usr/src/app",
+  // Configure tool-specific properties.
+  "customizations": {
+    "vscode": {
+      "extensions": [
+        "humao.rest-client",
+        "eamodio.gitlens",
+        "esbenp.prettier-vscode",
+        "biomejs.biome",
         "bradlc.vscode-tailwindcss",
-				"qufiwefefwoyn.inline-sql-syntax"
-			]
-		}
-	},
-	"hostRequirements": {
-		"memory": "3gb"
-	},
-
-	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	// "forwardPorts": [],
+        "qufiwefefwoyn.inline-sql-syntax"
+      ]
+    }
+  },
+  "hostRequirements": {
+    "memory": "3gb"
+  },
 
-	// Use 'postCreateCommand' to run commands after the container is created.
-	"postCreateCommand": "yarn install"
-	// Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-	//"remoteUser": "node",
-	//"postCreateCommand": "sudo chown node node_modules"
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  // "forwardPorts": [],
+
+  // Use 'postCreateCommand' to run commands after the container is created.
+  "postCreateCommand": "yarn install"
+  // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+  //"remoteUser": "node",
+  //"postCreateCommand": "sudo chown node node_modules"
 }

.env.template

@@ -1,10 +1,10 @@
-NEXT_PUBLIC_API_URL = "http://localhost:3000/api"
+NEXT_PUBLIC_API_URL=http://localhost:3000/api
 SSH_KEY_PATH=~/.ssh/id_rsa
 
-POSTGRES_USER=
-POSTGRES_DB=
-POSTGRES_PASSWORD=
-POSTGRES_HOST=
-POSTGRES_PORT=
+POSTGRES_USER=bilis
+POSTGRES_DB=bilis
+POSTGRES_PASSWORD=postgres
+POSTGRES_HOST=db
+POSTGRES_PORT=5432
 
 NODE_ENV=development

.github/workflows/deploy.yml

@@ -1,44 +1,44 @@
-name: Build and deploy
-
-on:
-  push:
-    branches:
-      - production
-  workflow_dispatch:
-
-jobs:
-  build-and-deploy:
-    runs-on: ubuntu-latest
-    environment:
-      name: 'Production'
-      url: 'http://bilis2.prodeko.org'
-
-    steps:
-      - uses: actions/checkout@v2
-
-      - name: Login via Azure CLI
-        uses: azure/login@v1
-        with:
-          creds: ${{ secrets.AZURE_CREDENTIALS }}
-
-      - name: Docker login to ACR
-        uses: azure/docker-login@v1
-        with:
-          login-server: ${{ secrets.REGISTRY_LOGIN_SERVER }}
-          username: ${{ secrets.REGISTRY_USERNAME }}
-          password: ${{ secrets.REGISTRY_PASSWORD }}
-
-      - name: Build and push
-        run: |
-          docker build -f Dockerfile.prod . -t ${{ secrets.REGISTRY_LOGIN_SERVER }}/bilis/bilis
-          docker push ${{ secrets.REGISTRY_LOGIN_SERVER }}/bilis/bilis
-
-      - name: Deploy from ACR
-        uses: azure/webapps-deploy@v2
-        with:
-          app-name: 'bilis2'
-          images: ${{ secrets.REGISTRY_LOGIN_SERVER }}/bilis/bilis
-    
-      - name: Azure logout
-        run: |
-          az logout
+name: Build and deploy
+
+on:
+  push:
+    branches:
+      - production
+  workflow_dispatch:
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: "Production"
+      url: "http://bilis2.prodeko.org"
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Login via Azure CLI
+        uses: azure/login@v1
+        with:
+          creds: ${{ secrets.AZURE_CREDENTIALS }}
+
+      - name: Docker login to ACR
+        uses: azure/docker-login@v1
+        with:
+          login-server: ${{ secrets.REGISTRY_LOGIN_SERVER }}
+          username: ${{ secrets.REGISTRY_USERNAME }}
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+
+      - name: Build and push
+        run: |
+          docker build -f Dockerfile.prod . -t ${{ secrets.REGISTRY_LOGIN_SERVER }}/bilis/bilis
+          docker push ${{ secrets.REGISTRY_LOGIN_SERVER }}/bilis/bilis
+
+      - name: Deploy from ACR
+        uses: azure/webapps-deploy@v2
+        with:
+          app-name: "bilis2"
+          images: ${{ secrets.REGISTRY_LOGIN_SERVER }}/bilis/bilis
+
+      - name: Azure logout
+        run: |
+          az logout

.github/workflows/test.yml

@@ -2,7 +2,7 @@ name: CI tests
 
 on:
   pull_request:
-    branches: '*'
+    branches: "*"
 
 jobs:
   test:
@@ -13,7 +13,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '20.x'
+          node-version: "20.x"
       - name: Install dependencies
         run: yarn --frozen-lockfile
       - name: Run tests

.vscode/extensions.json

@@ -1,3 +1,3 @@
 {
-    "recommendations": ["esbenp.prettier-vscode"]
-}
+  "recommendations": ["esbenp.prettier-vscode"]
+}

.vscode/launch.json

@@ -1,12 +1,11 @@
 {
-    "version": "0.2.0",
-    "configurations": [
-      {
-        "name": "yarn dev",
-        "type": "node-terminal",
-        "request": "launch",
-        "command": "yarn dev"
-      },
-    ]
-  }
-
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "yarn dev",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "yarn dev"
+    }
+  ]
+}

.vscode/settings.json

@@ -28,5 +28,8 @@
   "[json]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true
-  }
+  },
+  "cSpell.words": [
+    "bilis"
+  ]
 }

README.md

@@ -3,91 +3,111 @@
 ## Käynnistys ja kehittäminen
 
 ### Setup
+
 Varmista, että seuraavat asiat on tehtynä:
+
 - SSH-avain on luotu paikallisesti ja linkattu Githubiin
 - Asenna Docker Desktop (Mac, Windows) ja docker-compose (https://www.docker.com/products/docker-desktop/)
 - Asenna VSCodessa seuraavat extensionit
   - Docker
   - Dev Containers
 
 ---
-1. Kloonaa repositorio `git clone [email protected]:Prodeko/Bilis-2.git`. 
+
+1. Kloonaa repositorio `git clone [email protected]:Prodeko/Bilis-2.git`.
 2. (Käynnistä Docker ja varmista, että docker-compose on myös asennettuna).
 3. Luo .env file kopioimalla /app kansion .env.template tiedosto ja päivittämällä muuttujien arvot.
 4. Avaa VS Code dev container app/-hakemistossa (F1 ja Open folder in container). Samalla asentuvat yarn paketit.
 5. Käynnistä kehitysympäristö käskyllä `yarn dev` devikontissa.
 6. Testit (jest ja cypress) ajetaan käskyllä `yarn test`.
 7. Käskyllä `yarn build` voi buildata projektin tuotantoversion.
-8. Käskyillä `yarn start` ja `yarn dev:start` voi käynnistää tuotantoversion NODE_ENV:in vastaavilla arvoilla _production_ ja _development_.
+8. Käskyillä `yarn start` ja `yarn dev:start` voi käynnistää tuotantoversion NODE*ENV:in vastaavilla arvoilla \_production* ja _development_.
 
 Rebuildaus onnistuu painamalla F1 ja valitsemalla Rebuild container.
 
 Sovellus käynnistyy porttiin 3000. Siirry siis selaimella [http://localhost:3000](http://localhost:3000).
 
 ### Git devikontissa
-Jos git valittaa puuttuvasta avaimesta, laita .env tiedostoon SSH_KEY_PATH, jossa määrittelet polun hostikoneella sijaitsevan ssh avaimeen.
 
+Jos git valittaa puuttuvasta avaimesta, laita .env tiedostoon SSH_KEY_PATH, jossa määrittelet polun hostikoneella sijaitsevan ssh avaimeen.
 
 ## Tietokantakomennot
 
 ### Migraatiot
 
 #### `yarn dev:migrate:create`
+
 Luo uuden migraatiotiedoston kansioon `/app/server/migrations`, jonka nimi on hyvä viela vaihtaa kuvaavammaksi. Laittaa automaattisesti timestampin tiedostonimeen, jotta umzug tietää oikean migraatiojärjestyksen.
 
 #### `yarn dev:migrate:up`
+
 Ajaa kaikki ajamattomat migraatiot. Parametrejä on myös mahdollista lisätä perään [CLI-dokumentaation](https://github.com/sequelize/umzug#cli-usage) `up`-komennon mukaisesti.
 
 #### `yarn dev:migrate:down`
+
 Ottaa viimeisiimmän migraation alas. Parametrejä on myös mahdollista lisätä perään [CLI-dokumentaation](https://github.com/sequelize/umzug#cli-usage) `down`-komennon mukaisesti.
 
 #### `yarn dev:migrate:executed`
+
 Listaa ajetut migraatiot.
 
 #### `yarn dev:migrate:pending`
+
 Listaa ajamattomat migraatiot.
 
 ### Testidatan luominen
 
 #### `yarn dev:create-test-data`
-Generoi testidataa databaseen. Generoi 200 pelaajaa ja 20000 peliä. 
+
+Generoi testidataa databaseen. Generoi 200 pelaajaa ja 20000 peliä.
 
 ## Debuggaus
-Voit myös debuggailla sovellusta käyttämällä VS Coden Run and debug -välilehteä. 
+
+Voit myös debuggailla sovellusta käyttämällä VS Coden Run and debug -välilehteä.
 Lisää breakpointeja ja tarkastele senhetkistä muuttujakontekstia sivuja ladatessa.
 
 ## Projektin erityisyyksiä
 
 ### Tärkeimmät kansiot
+
 #### Common
+
 **common**-kansion alla on yleishyödyllisiä funktiota, muuttujia ja tärkeimpänä **tyypit**. NextJS takia meillä on käytössä monorepo, eli backend ja frontend on samassa repossa, ja siksi voimme määrittää kerran tyypit yhteen kansioon ja käyttää niitä sekä frontissa että backissa.
 
 #### Components
+
 **components**-kansioon luodaan kaikki Reactista tutut komponentit. Komponentin järjestellään kansioihin seuraavien kriteereiden mukaan:
+
 - Yleisesti käytettävä komponentti --> **utility**
-- Sivukohtainen peruslayout --> **Layouts** (tämä siksi että haluamme pitää CSS:n pois pages-kansiosta). 
+- Sivukohtainen peruslayout --> **Layouts** (tämä siksi että haluamme pitää CSS:n pois pages-kansiosta).
 - Muut komponentit sivukohtaisesti ja käyttökohtaisesti: esim etusivun Leaderboard-komponentti menee **Homepage/Leaderboard**-kansion alle.
 
 #### Hooks
+
 **hooks**-kansion alle on määritetty kaikki yleisesti projektissa käytettävät custom React-hookit.
 
 #### Pages
+
 Tänne tulee kaikki sivut. Nextissä on käytössä ns. 'file-based routing', joka routtaa sivut suoraan **pages**-kansion alle olevien filujen mukaan. Esimerkiksi jos luot **pages**-directoryyn kansion **player** ja sen alle filun `edit.tsx`. löytää tämä selaimelta osoitteesta `localhost:3000/player/edit`. Nextissä index-filut on erikoisasemassa ja se ei lisää nimeä routeen. Eli vastaavasti **player**-kansion alle olevat `index.tsx` kansio luo routen, joka löytyy selaimesta osoitteesta `localhost:3000/player`
 
 #### State
+
 Jos haluat käyttää projektissa global statea, määrittele uusi provider **state**-kansion alle. Pyri pitämään provider niin pienenä ja alhaalla HTML-puussa kuin mahdollista. Esimerkiksi, jos globaalia state käytetään vain Queue-komponentissa etusivulla, silloin sen voi antaa vain Queue-komponentille eikä koko etusivulle. Muiden komponenttien ei tarvitse tietää tästä komponentista.
 
 #### Styles
+
 Meillä on tehty designia varten Figma. Oikeuksia Figmaan voit kysyä esimerkiksi nykyiseltä CTO:lta.
 
 Tätä Figmaa vastaa melko yksi-yhteen meidän **styles**-kansion alla oleva tyylisysteemi. Tähän on ajan myötä tullut muutamia lisäyksiä mutta näitä muuttujia/mixinejä/placeholdereita tulisi hyödyntää, kun tyylittelee CSS:ää.
 
 CSS-framworkkina käytämme Tailwindia, josta voi lukea lisää...
+
 - virallisesta dokumentaatiosta (https://tailwindcss.com/docs/utility-first)
 
 ### Dokumentaatio
 
 #### TSDoc
+
 Virallinen TSDoc dokumentointi: https://tsdoc.org/
 
 TSDoc:n avulla voidaan dokumentoidaan suoraan koodiin funktioiden, mitä kukin funktio tekee. TSDoc-koodipätkä kirjoitetaan `/** */`-merkkien väliin ja syntaksiin löytyy hyvät ohjeet dokumentaation omilta sivuilta ja esimerkkejä löytää myös projektin funktioista.
@@ -102,5 +122,3 @@ Hyödyllisiä ovat myös:
 [`@link`](https://tsdoc.org/pages/tags/link/): Linkki repon muihin osioihin tai URL jollekin ulkoiselle internet-sivulle.
 [`@remarks`](https://tsdoc.org/pages/tags/remarks/): Anna lisähuomioita funktion toiminnasta. Tätä ei tarvitse käyttää peruskuvailun tekemiseen, sen voi kirjoittaa suoraan TSDoc:n yläosaan.
 [`@typeParam`](https://tsdoc.org/pages/tags/typeparam/): Kuvaile geneeristä tyyppiä.
-
-

cypress/integration/example/example.spec.js

@@ -11,25 +11,25 @@
 // please read our getting started guide:
 // https://on.cypress.io/introduction-to-cypress
 
-describe('Example', () => {
+describe("Example", () => {
   beforeEach(() => {
     // Cypress starts out with a blank slate for each test
     // so we must tell it to visit our website with the `cy.visit()` command.
     // Since we want to visit the same URL at the start of all our tests,
     // we include it in our beforeEach function so that it runs before each test
-    cy.visit('http://localhost:3000')
-  })
+    cy.visit("http://localhost:3000");
+  });
 
-  it('displays example text', () => {
+  it("displays example text", () => {
     // We use the `cy.get()` command to get all elements that match the selector.
     // Then, we use `should` to assert that there are two matched items,
     // which are the two default items.
-    cy.get('h1').should('have.length', 1)
+    cy.get("h1").should("have.length", 1);
 
     // We can go even further and check that the default todos each contain
     // the correct text. We use the `first` and `last` functions
     // to get just the first and last matched elements individually,
     // and then perform an assertion with `should`.
-    cy.get('h1').first().should('have.text', 'Tailwind pelittää!')
-  })
-})
+    cy.get("h1").first().should("have.text", "Tailwind pelittää!");
+  });
+});

cypress/plugins/index.js

@@ -19,4 +19,4 @@
 module.exports = (_on, _config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
-}
+};

cypress/support/index.js

@@ -13,7 +13,7 @@
 // https://on.cypress.io/configuration
 // ***********************************************************
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')