From b82091d4fd91a3df56a5ae558f109e2017fbe6e2 Mon Sep 17 00:00:00 2001 From: Julien MAIRE Date: Thu, 30 Jan 2025 10:53:36 +0100 Subject: [PATCH 1/8] (feature): Added first ressources lists user and game. (conf): fixed docker-compose network. Added postgrest connector package. (misc): improved env.sample description. Fixed db script typo. --- .env.sample | 9 +++-- .gitignore | 1 + docker-compose.yml | 13 +++++- package-lock.json | 87 +++++++++++++++++----------------------- package.json | 1 + scripts/create_model.sql | 2 +- src/App.tsx | 35 +++++++++++----- src/games/games.tsx | 34 ++++++++++++++++ src/index.tsx | 2 +- 9 files changed, 115 insertions(+), 69 deletions(-) create mode 100644 src/games/games.tsx diff --git a/.env.sample b/.env.sample index 718f1e4..2051511 100644 --- a/.env.sample +++ b/.env.sample @@ -1,7 +1,8 @@ # Configure your dev environment -DATABASE_PORT= -DATABASE_USER= -DATABASE_PASSWORD= +DATABASE_PORT= +DATABASE_USER= +DATABASE_PASSWORD= + DATABASE_NAME=connect_four_reboot_admin PGRST_DB_ANON_ROLE=web_anon -PGRST_DB_SCHEMA=api \ No newline at end of file +PGRST_DB_SCHEMA=public \ No newline at end of file diff --git a/.gitignore b/.gitignore index 4427f8c..942c69f 100644 --- a/.gitignore +++ b/.gitignore @@ -5,6 +5,7 @@ build coverage/ .vscode .env +.vite/ # React Router /.react-router/ diff --git a/docker-compose.yml b/docker-compose.yml index 75e8203..e17f0b4 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -6,14 +6,16 @@ services: depends_on: - database-postgres environment: - - PGRST_DB_URI=postgres://${DATABASE_USER}:${DATABASE_PASSWORD}@postgres:${DATABASE_PORT}/${DATABASE_NAME} + - PGRST_DB_URI=postgres://${DATABASE_USER}:${DATABASE_PASSWORD}@database-postgres:${DATABASE_PORT}/${DATABASE_NAME} - PGRST_DB_SCHEMA=${PGRST_DB_SCHEMA} - PGRST_DB_ANON_ROLE=${PGRST_DB_ANON_ROLE} + networks: + - your_network database-postgres: image: postgres:14 ports: - - "${DATABASE_PORT}:${DATABASE_PORT}" + - "${DATABASE_PORT}:5432" environment: - POSTGRES_USER=${DATABASE_USER} - POSTGRES_PASSWORD=${DATABASE_PASSWORD} @@ -21,6 +23,13 @@ services: volumes: - pgdata:/var/lib/postgresql/data - ./scripts:/scripts:ro + networks: + - your_network + healthcheck: + test: ["CMD", "pg_isready", "-U", "${DATABASE_USER}"] + interval: 10s + timeout: 5s + retries: 5 networks: your_network: diff --git a/package-lock.json b/package-lock.json index 0c3d26d..9608aa3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@emotion/styled": "^11.14.0", "@mui/icons-material": "^6.4.0", "@mui/material": "^6.4.0", + "@raphiniert/ra-data-postgrest": "^2.4.1", "@types/pg": "^8.11.11", "dotenv": "^16.4.7", "faker": "^6.6.6", @@ -1355,6 +1356,19 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@raphiniert/ra-data-postgrest": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@raphiniert/ra-data-postgrest/-/ra-data-postgrest-2.4.1.tgz", + "integrity": "sha512-2v4XE/9wy7dTfafJuDFDb3u0ZvyBpURZ0hNv3uc0TcnxLR+sXHYeOv3WNzIMKLKN2dsDllU3qytQE63/Z8SmLA==", + "license": "MIT", + "dependencies": { + "lodash.isequal": "^4.5.0", + "qs": "^6.12.1" + }, + "peerDependencies": { + "ra-core": "^3.0.0 || ^4.1.0 || ^5.0.1" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.32.1", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.32.1.tgz", @@ -2444,7 +2458,6 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.3.tgz", "integrity": "sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==", - "dev": true, "license": "MIT", "dependencies": { "call-bind-apply-helpers": "^1.0.1", @@ -3343,10 +3356,7 @@ "version": "6.6.6", "resolved": "https://registry.npmjs.org/faker/-/faker-6.6.6.tgz", "integrity": "sha512-9tCqYEDHI5RYFQigXFwF1hnCwcWCOJl/hmll0lr5D2Ljjb0o4wphb69wikeJDz5qCEzXCoPvG6ss5SDP6IfOdg==", -<<<<<<< HEAD -======= "dev": true, ->>>>>>> b03213c (dev: added sql script to create the tables. Added script to populate the db with fake data.) "license": "MIT" }, "node_modules/fast-deep-equal": { @@ -4504,6 +4514,13 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "license": "MIT" }, + "node_modules/lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==", + "deprecated": "This package is deprecated. Use require('node:util').isDeepStrictEqual instead.", + "license": "MIT" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -4652,7 +4669,6 @@ "version": "1.13.3", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.3.tgz", "integrity": "sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==", - "dev": true, "license": "MIT", "engines": { "node": ">= 0.4" @@ -4907,10 +4923,7 @@ "version": "8.13.1", "resolved": "https://registry.npmjs.org/pg/-/pg-8.13.1.tgz", "integrity": "sha512-OUir1A0rPNZlX//c7ksiu7crsGZTKSOXJPgtNiHGIlC9H0lO+NC6ZDYksSgBYY/thSWhnSRBv8w1lieNNGATNQ==", -<<<<<<< HEAD -======= "dev": true, ->>>>>>> b03213c (dev: added sql script to create the tables. Added script to populate the db with fake data.) "license": "MIT", "dependencies": { "pg-connection-string": "^2.7.0", @@ -4938,10 +4951,7 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/pg-cloudflare/-/pg-cloudflare-1.1.1.tgz", "integrity": "sha512-xWPagP/4B6BgFO+EKz3JONXv3YDgvkbVrGw2mTo3D6tVDQRh1e7cqVGvyR3BE+eQgAvx1XhW/iEASj4/jCWl3Q==", -<<<<<<< HEAD -======= "dev": true, ->>>>>>> b03213c (dev: added sql script to create the tables. Added script to populate the db with fake data.) "license": "MIT", "optional": true }, @@ -4949,20 +4959,14 @@ "version": "2.7.0", "resolved": "https://registry.npmjs.org/pg-connection-string/-/pg-connection-string-2.7.0.tgz", "integrity": "sha512-PI2W9mv53rXJQEOb8xNR8lH7Hr+EKa6oJa38zsK0S/ky2er16ios1wLKhZyxzD7jUReiWokc9WK5nxSnC7W1TA==", -<<<<<<< HEAD -======= "dev": true, ->>>>>>> b03213c (dev: added sql script to create the tables. Added script to populate the db with fake data.) "license": "MIT" }, "node_modules/pg-int8": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz", "integrity": "sha512-WCtabS6t3c8SkpDBUlb1kjOs7l66xsGdKpIPZsg4wR+B3+u9UAum2odSsF9tnvxg80h4ZxLWMy4pRjOsFIqQpw==", -<<<<<<< HEAD -======= "dev": true, ->>>>>>> b03213c (dev: added sql script to create the tables. Added script to populate the db with fake data.) "license": "ISC", "engines": { "node": ">=4.0.0" @@ -4982,10 +4986,7 @@ "version": "3.7.0", "resolved": "https://registry.npmjs.org/pg-pool/-/pg-pool-3.7.0.tgz", "integrity": "sha512-ZOBQForurqh4zZWjrgSwwAtzJ7QiRX0ovFkZr2klsen3Nm0aoh33Ls0fzfv3imeH/nw/O27cjdz5kzYJfeGp/g==", -<<<<<<< HEAD -======= "dev": true, ->>>>>>> b03213c (dev: added sql script to create the tables. Added script to populate the db with fake data.) "license": "MIT", "peerDependencies": { "pg": ">=8.0" @@ -4995,20 +4996,14 @@ "version": "1.7.0", "resolved": "https://registry.npmjs.org/pg-protocol/-/pg-protocol-1.7.0.tgz", "integrity": "sha512-hTK/mE36i8fDDhgDFjy6xNOG+LCorxLG3WO17tku+ij6sVHXh1jQUJ8hYAnRhNla4QVD2H8er/FOjc/+EgC6yQ==", -<<<<<<< HEAD -======= "dev": true, ->>>>>>> b03213c (dev: added sql script to create the tables. Added script to populate the db with fake data.) "license": "MIT" }, "node_modules/pg-types": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/pg-types/-/pg-types-2.2.0.tgz", "integrity": "sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==", -<<<<<<< HEAD -======= "dev": true, ->>>>>>> b03213c (dev: added sql script to create the tables. Added script to populate the db with fake data.) "license": "MIT", "dependencies": { "pg-int8": "1.0.1", @@ -5025,10 +5020,7 @@ "version": "1.0.5", "resolved": "https://registry.npmjs.org/pgpass/-/pgpass-1.0.5.tgz", "integrity": "sha512-FdW9r/jQZhSeohs1Z3sI1yxFQNFvMcnmfuj4WBMUTxOrAyLMaTcE1aAMBiTlbMNaXvBCQuVi0R7hd8udDSP7ug==", -<<<<<<< HEAD -======= "dev": true, ->>>>>>> b03213c (dev: added sql script to create the tables. Added script to populate the db with fake data.) "license": "MIT", "dependencies": { "split2": "^4.1.0" @@ -5096,10 +5088,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz", "integrity": "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==", -<<<<<<< HEAD -======= "dev": true, ->>>>>>> b03213c (dev: added sql script to create the tables. Added script to populate the db with fake data.) "license": "MIT", "engines": { "node": ">=4" @@ -5109,10 +5098,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/postgres-bytea/-/postgres-bytea-1.0.0.tgz", "integrity": "sha512-xy3pmLuQqRBZBXDULy7KbaitYqLcmxigw14Q5sj8QBVLqEwXfeybIKVWiqAXTlcvdvb0+xkOtDbfQMOf4lST1w==", -<<<<<<< HEAD -======= "dev": true, ->>>>>>> b03213c (dev: added sql script to create the tables. Added script to populate the db with fake data.) "license": "MIT", "engines": { "node": ">=0.10.0" @@ -5122,10 +5108,7 @@ "version": "1.0.7", "resolved": "https://registry.npmjs.org/postgres-date/-/postgres-date-1.0.7.tgz", "integrity": "sha512-suDmjLVQg78nMK2UZ454hAG+OAW+HQPZ6n++TNDUX+L0+uUlLywnoxJKDou51Zm+zTCjrCl0Nq6J9C5hP9vK/Q==", -<<<<<<< HEAD -======= "dev": true, ->>>>>>> b03213c (dev: added sql script to create the tables. Added script to populate the db with fake data.) "license": "MIT", "engines": { "node": ">=0.10.0" @@ -5135,10 +5118,7 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/postgres-interval/-/postgres-interval-1.2.0.tgz", "integrity": "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ==", -<<<<<<< HEAD -======= "dev": true, ->>>>>>> b03213c (dev: added sql script to create the tables. Added script to populate the db with fake data.) "license": "MIT", "dependencies": { "xtend": "^4.0.0" @@ -5207,6 +5187,21 @@ "node": ">=6" } }, + "node_modules/qs": { + "version": "6.14.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz", + "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==", + "license": "BSD-3-Clause", + "dependencies": { + "side-channel": "^1.1.0" + }, + "engines": { + "node": ">=0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/query-string": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.3.tgz", @@ -5814,7 +5809,6 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz", "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==", - "dev": true, "license": "MIT", "dependencies": { "es-errors": "^1.3.0", @@ -5834,7 +5828,6 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz", "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==", - "dev": true, "license": "MIT", "dependencies": { "es-errors": "^1.3.0", @@ -5851,7 +5844,6 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz", "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==", - "dev": true, "license": "MIT", "dependencies": { "call-bound": "^1.0.2", @@ -5870,7 +5862,6 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz", "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==", - "dev": true, "license": "MIT", "dependencies": { "call-bound": "^1.0.2", @@ -5928,10 +5919,7 @@ "version": "4.2.0", "resolved": "https://registry.npmjs.org/split2/-/split2-4.2.0.tgz", "integrity": "sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==", -<<<<<<< HEAD -======= "dev": true, ->>>>>>> b03213c (dev: added sql script to create the tables. Added script to populate the db with fake data.) "license": "ISC", "engines": { "node": ">= 10.x" @@ -6535,10 +6523,7 @@ "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==", -<<<<<<< HEAD -======= "dev": true, ->>>>>>> b03213c (dev: added sql script to create the tables. Added script to populate the db with fake data.) "license": "MIT", "engines": { "node": ">=0.4" diff --git a/package.json b/package.json index aa68514..1f459a6 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@emotion/styled": "^11.14.0", "@mui/icons-material": "^6.4.0", "@mui/material": "^6.4.0", + "@raphiniert/ra-data-postgrest": "^2.4.1", "@types/pg": "^8.11.11", "dotenv": "^16.4.7", "faker": "^6.6.6", diff --git a/scripts/create_model.sql b/scripts/create_model.sql index 4121480..d51b914 100644 --- a/scripts/create_model.sql +++ b/scripts/create_model.sql @@ -2,7 +2,7 @@ CREATE ROLE web_anon NOLOGIN; GRANT USAGE ON SCHEMA public TO web_anon; ALTER DEFAULT PRIVILEGES IN SCHEMA public -GRANT SELECT, INSERT, UPDATE, DELETE ON tables TO web_anon; +GRANT SELECT, INSERT, UPDATE, DELETE ON TABLES TO web_anon; CREATE TABLE IF NOT EXISTS leagues ( id SERIAL PRIMARY KEY, diff --git a/src/App.tsx b/src/App.tsx index 8da1820..94c547b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,25 @@ -import { - Admin, - Resource, - ListGuesser, - EditGuesser, - ShowGuesser, -} from "react-admin"; -import { Layout } from "./Layout"; - -export const App = () => ; +import { Admin, Resource, ListGuesser, fetchUtils } from "react-admin"; + +import postgrestRestProvider, { + IDataProviderConfig, + defaultPrimaryKeys, + defaultSchema, +} from "@raphiniert/ra-data-postgrest"; +import { GameList } from "./games/games"; + +const config: IDataProviderConfig = { + apiUrl: "http://localhost:3000", + httpClient: fetchUtils.fetchJson, + defaultListOp: "eq", + primaryKeys: defaultPrimaryKeys, + schema: defaultSchema, +}; + +const App = () => ( + + + + +); + +export default App; diff --git a/src/games/games.tsx b/src/games/games.tsx new file mode 100644 index 0000000..2428511 --- /dev/null +++ b/src/games/games.tsx @@ -0,0 +1,34 @@ +import { + Datagrid, + FunctionField, + List, + ReferenceField, + TextField, +} from "react-admin"; + +enum GameStatus { + Ongoing = "Ongoing", + Finished = "Finished", +} + +const computeGameStatus = (game: { game_state: string }): string => { + const gameState = JSON.parse(game.game_state); + return gameState.victoryState.player != null || gameState.victoryState?.isDraw + ? GameStatus.Finished + : GameStatus.Ongoing; +}; + +export const GameList = () => ( + + + + + + + + + + + + +); diff --git a/src/index.tsx b/src/index.tsx index d985c30..3d57d26 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -2,7 +2,7 @@ import React from "react"; import ReactDOM from "react-dom/client"; import { RouterProvider } from "react-router"; import { createHashRouter } from "react-router-dom"; -import { App } from "./App"; +import App from "./App"; const router = createHashRouter([ { From c0e4d8d04a8dd57684d118d17db5b6a5e3dea2be Mon Sep 17 00:00:00 2001 From: Julien MAIRE Date: Thu, 30 Jan 2025 11:18:09 +0100 Subject: [PATCH 2/8] (feature): Added lastUpdated. (conf): added run and stop gaols to makefile. --- makefile | 9 ++++++++- src/games/games.tsx | 2 ++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/makefile b/makefile index c24f539..f4fece7 100644 --- a/makefile +++ b/makefile @@ -39,7 +39,8 @@ create-db: ## initialize an empty ready to use db inside the docker - use it onl docker exec -i connect-four-reboot-admin-database-postgres-1 sh -c 'psql -U $(DATABASE_USER) -c "CREATE DATABASE $(DATABASE_NAME);"' drop-db: ## drop the postgres db inside the docker. - docker exec -i connect-four-reboot-admin-database-postgres-1 sh -c 'psql -U $(DATABASE_USER) -c "DROP DATABASE IF EXISTS $(DATABASE_NAME);"' + docker exec -i connect-four-reboot-admin-database-postgres-1 sh -c \ +'psql -U postgres -c "SELECT pg_terminate_backend(pid) FROM pg_stat_activity WHERE datname = '\''connect_four_reboot_admin'\'';"' && docker exec -i connect-four-reboot-admin-database-postgres-1 sh -c 'psql -U $(DATABASE_USER) -c "DROP DATABASE IF EXISTS $(DATABASE_NAME);"' create-model: ## create the connect-four-reboot-admin tables. docker exec connect-four-reboot-admin-database-postgres-1 sh -c 'psql -U $(DATABASE_USER) -d $(DATABASE_NAME) -f /scripts/create_model.sql' @@ -58,3 +59,9 @@ lint: ## run linter format: ## run prettier npm run format + +run: + make stop-postgrest-docker && make run-postgrest-docker && make drop-db && make create-db && make create-model && make populate-db && make run-ra-dev + +stop: + make stop-postgrest-docker diff --git a/src/games/games.tsx b/src/games/games.tsx index 2428511..35e89d3 100644 --- a/src/games/games.tsx +++ b/src/games/games.tsx @@ -1,5 +1,6 @@ import { Datagrid, + DateField, FunctionField, List, ReferenceField, @@ -29,6 +30,7 @@ export const GameList = () => ( + ); From 8fd89fa4c672f04bc412ee6575b5cf2f26b58eed Mon Sep 17 00:00:00 2001 From: Julien MAIRE Date: Thu, 30 Jan 2025 11:24:57 +0100 Subject: [PATCH 3/8] (conf): updated Readme and makefile. --- README.md | 8 ++++++++ makefile | 14 +++++++++----- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index eeffde6..46fde9c 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,14 @@ database with: make create-db ``` +tips: + +```sh +make run +``` + +this goal do all for you. + ## Installation connect-four-reboot-admin frontend Install the react-admin application dependencies by running: diff --git a/makefile b/makefile index f4fece7..bbc0a09 100644 --- a/makefile +++ b/makefile @@ -20,6 +20,15 @@ build : ## build the react-admin server. run-ra-dev: ## run the react-admin server. npm run dev +## Run +######## + +run: ## fresh run of all you need to use the app + make stop-postgrest-docker && make run-postgrest-docker && make drop-db && make create-db && make create-model && make populate-db && make run-ra-dev + +stop: ## stop the docker + make stop-postgrest-docker + ## Docker - postrgrest / postgres ################################# @@ -60,8 +69,3 @@ lint: ## run linter format: ## run prettier npm run format -run: - make stop-postgrest-docker && make run-postgrest-docker && make drop-db && make create-db && make create-model && make populate-db && make run-ra-dev - -stop: - make stop-postgrest-docker From 92d2238c9ebf7a62eba27c6602f6c53ec6faaf9c Mon Sep 17 00:00:00 2001 From: Julien MAIRE Date: Thu, 30 Jan 2025 11:27:26 +0100 Subject: [PATCH 4/8] (conf): added github test workflow. --- .github/workflows/test.yml | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 .github/workflows/test.yml diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml new file mode 100644 index 0000000..103b1e9 --- /dev/null +++ b/.github/workflows/test.yml @@ -0,0 +1,31 @@ +name: CI + +on: + push: + branches: + - main + pull_request: + branches: + - main + +jobs: + build-and-test: + runs-on: ubuntu-latest + + steps: + - name: Checkout repository + uses: actions/checkout@v2 + + - name: Set up Node.js + uses: actions/setup-node@v3 + with: + node-version: "20" + + - name: Install dependencies + run: npm install + + - name: Check TypeScript types + run: npm run type-check + + # - name: Run tests + # run: npm test From 80fc39f55c8029d43b6d3e94693d43462bcdfa1c Mon Sep 17 00:00:00 2001 From: Julien MAIRE Date: Thu, 30 Jan 2025 14:19:07 +0100 Subject: [PATCH 5/8] (fix): removed undesired user list. Renamed Game to GameList component. (feature): added GameStatuscomponent. (conf): improve makefile. --- makefile | 6 ++++- src/App.tsx | 5 ++-- src/games/{games.tsx => GameList.tsx} | 16 ++---------- src/games/GameStatus.tsx | 35 +++++++++++++++++++++++++++ 4 files changed, 44 insertions(+), 18 deletions(-) rename src/games/{games.tsx => GameList.tsx} (55%) create mode 100644 src/games/GameStatus.tsx diff --git a/makefile b/makefile index bbc0a09..a1ac2de 100644 --- a/makefile +++ b/makefile @@ -24,7 +24,7 @@ run-ra-dev: ## run the react-admin server. ######## run: ## fresh run of all you need to use the app - make stop-postgrest-docker && make run-postgrest-docker && make drop-db && make create-db && make create-model && make populate-db && make run-ra-dev + make make run-postgrest-docker && make create-model && make populate-db && make run-ra-dev stop: ## stop the docker make stop-postgrest-docker @@ -57,6 +57,10 @@ create-model: ## create the connect-four-reboot-admin tables. populate-db: ## populate database with fake values npx tsx tools/populateDbWithFakeData.ts +reset-db: + make drop-db && make create-db && make create-model && make populate-db + + ## Dev quality ############## diff --git a/src/App.tsx b/src/App.tsx index 94c547b..8f6243a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,11 +1,11 @@ -import { Admin, Resource, ListGuesser, fetchUtils } from "react-admin"; +import { Admin, Resource, fetchUtils } from "react-admin"; import postgrestRestProvider, { IDataProviderConfig, defaultPrimaryKeys, defaultSchema, } from "@raphiniert/ra-data-postgrest"; -import { GameList } from "./games/games"; +import { GameList } from "./games/GameList"; const config: IDataProviderConfig = { apiUrl: "http://localhost:3000", @@ -17,7 +17,6 @@ const config: IDataProviderConfig = { const App = () => ( - ); diff --git a/src/games/games.tsx b/src/games/GameList.tsx similarity index 55% rename from src/games/games.tsx rename to src/games/GameList.tsx index 35e89d3..af3a6a8 100644 --- a/src/games/games.tsx +++ b/src/games/GameList.tsx @@ -1,23 +1,11 @@ import { Datagrid, DateField, - FunctionField, List, ReferenceField, TextField, } from "react-admin"; - -enum GameStatus { - Ongoing = "Ongoing", - Finished = "Finished", -} - -const computeGameStatus = (game: { game_state: string }): string => { - const gameState = JSON.parse(game.game_state); - return gameState.victoryState.player != null || gameState.victoryState?.isDraw - ? GameStatus.Finished - : GameStatus.Ongoing; -}; +import { GameStatus } from "./GameStatus"; export const GameList = () => ( @@ -29,7 +17,7 @@ export const GameList = () => ( - + diff --git a/src/games/GameStatus.tsx b/src/games/GameStatus.tsx new file mode 100644 index 0000000..7d1a32d --- /dev/null +++ b/src/games/GameStatus.tsx @@ -0,0 +1,35 @@ +import { Box, Tooltip, Typography } from "@mui/material"; +import { useFieldValue } from "react-admin"; + +const Status = { + Ongoing: { label: "Ongoing", color: "green" }, + Finished: { label: "Finished", color: "red" }, +} as const; + +export const GameStatus = () => { + const gameState = useFieldValue({ source: "game_state" }); + + const gameStateVal = JSON.parse(gameState); + const status = + gameStateVal.victoryState.player != null || + gameStateVal.victoryState?.isDraw + ? Status.Finished + : Status.Ongoing; + + return ( + <> + + + + {status.label} + + + + ); +}; From a0cb034a2a8d3237688c2401ffc0bea35e0002cf Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Kaiser Date: Thu, 30 Jan 2025 10:22:22 +0100 Subject: [PATCH 6/8] fix run-ra-dev cmd in Readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 46fde9c..4851dac 100644 --- a/README.md +++ b/README.md @@ -77,7 +77,7 @@ make install Start the react-admin application in development mode by running: ```sh -make dev-ra +make run-ra-dev ``` ## Production connect-four-reboot-admin frontend From 0880c0f94377a17524e0d1f8f6f1ed3b7bc9063c Mon Sep 17 00:00:00 2001 From: Julien MAIRE Date: Thu, 30 Jan 2025 10:53:36 +0100 Subject: [PATCH 7/8] (feature): Added first ressources lists user and game. (conf): fixed docker-compose network. Added postgrest connector package. (misc): improved env.sample description. Fixed db script typo. --- src/games/games.tsx | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 src/games/games.tsx diff --git a/src/games/games.tsx b/src/games/games.tsx new file mode 100644 index 0000000..2428511 --- /dev/null +++ b/src/games/games.tsx @@ -0,0 +1,34 @@ +import { + Datagrid, + FunctionField, + List, + ReferenceField, + TextField, +} from "react-admin"; + +enum GameStatus { + Ongoing = "Ongoing", + Finished = "Finished", +} + +const computeGameStatus = (game: { game_state: string }): string => { + const gameState = JSON.parse(game.game_state); + return gameState.victoryState.player != null || gameState.victoryState?.isDraw + ? GameStatus.Finished + : GameStatus.Ongoing; +}; + +export const GameList = () => ( + + + + + + + + + + + + +); From 7b97cc4896ba051709a919cab2d7c4283b4fc5f6 Mon Sep 17 00:00:00 2001 From: Julien MAIRE Date: Thu, 30 Jan 2025 14:45:37 +0100 Subject: [PATCH 8/8] fix: removed old unused file. Fix makefile error. style: used wrapper for GameStatus column to name it with a label. Changed GameStatus colors. --- makefile | 2 +- src/games/GameList.tsx | 5 ++++- src/games/GameStatus.tsx | 4 ++-- src/games/games.tsx | 34 ---------------------------------- 4 files changed, 7 insertions(+), 38 deletions(-) delete mode 100644 src/games/games.tsx diff --git a/makefile b/makefile index a1ac2de..3ee5a44 100644 --- a/makefile +++ b/makefile @@ -24,7 +24,7 @@ run-ra-dev: ## run the react-admin server. ######## run: ## fresh run of all you need to use the app - make make run-postgrest-docker && make create-model && make populate-db && make run-ra-dev + make run-postgrest-docker && make create-model && make populate-db && make run-ra-dev stop: ## stop the docker make stop-postgrest-docker diff --git a/src/games/GameList.tsx b/src/games/GameList.tsx index af3a6a8..c24e2b2 100644 --- a/src/games/GameList.tsx +++ b/src/games/GameList.tsx @@ -4,6 +4,7 @@ import { List, ReferenceField, TextField, + WrapperField, } from "react-admin"; import { GameStatus } from "./GameStatus"; @@ -17,7 +18,9 @@ export const GameList = () => ( - + + + diff --git a/src/games/GameStatus.tsx b/src/games/GameStatus.tsx index 7d1a32d..03a2197 100644 --- a/src/games/GameStatus.tsx +++ b/src/games/GameStatus.tsx @@ -2,8 +2,8 @@ import { Box, Tooltip, Typography } from "@mui/material"; import { useFieldValue } from "react-admin"; const Status = { - Ongoing: { label: "Ongoing", color: "green" }, - Finished: { label: "Finished", color: "red" }, + Ongoing: { label: "Ongoing", color: "#4CAF50" }, + Finished: { label: "Finished", color: "#9E9E9E" }, } as const; export const GameStatus = () => { diff --git a/src/games/games.tsx b/src/games/games.tsx deleted file mode 100644 index 2428511..0000000 --- a/src/games/games.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { - Datagrid, - FunctionField, - List, - ReferenceField, - TextField, -} from "react-admin"; - -enum GameStatus { - Ongoing = "Ongoing", - Finished = "Finished", -} - -const computeGameStatus = (game: { game_state: string }): string => { - const gameState = JSON.parse(game.game_state); - return gameState.victoryState.player != null || gameState.victoryState?.isDraw - ? GameStatus.Finished - : GameStatus.Ongoing; -}; - -export const GameList = () => ( - - - - - - - - - - - - -);