From 4f37d63d64a8910cd8ff5dbe036b8b8dbc87b426 Mon Sep 17 00:00:00 2001
From: brunoravera <bruno@process.st>
Date: Sat, 2 Mar 2024 14:10:25 -0300
Subject: [PATCH] get patterns + rq + envs
---
.env.dev | 1 +
.env.example | 4 -
web/package.json | 11 +-
web/public/env.js | 1 +
web/scripts/copy-env.js | 38 +++++
web/src/App.tsx | 29 ++--
web/src/pages/Patterns/patterns.tsx | 7 +-
.../query-builder/get-patterns-query.ts | 27 ++++
web/src/pages/Patterns/query-builder/index.ts | 1 +
web/src/services/axios-service.ts | 7 +
yarn.lock | 151 ++++++++++++++++--
11 files changed, 242 insertions(+), 35 deletions(-)
create mode 100644 .env.dev
delete mode 100644 .env.example
create mode 100644 web/public/env.js
create mode 100644 web/scripts/copy-env.js
create mode 100644 web/src/pages/Patterns/query-builder/get-patterns-query.ts
create mode 100644 web/src/pages/Patterns/query-builder/index.ts
create mode 100644 web/src/services/axios-service.ts
diff --git a/.env.dev b/.env.dev
new file mode 100644
index 0000000..2ed15c3
--- /dev/null
+++ b/.env.dev
@@ -0,0 +1 @@
+REDWOOD_ENV_API_URL=https://localhost:8080
diff --git a/.env.example b/.env.example
deleted file mode 100644
index 2a2de6c..0000000
--- a/.env.example
+++ /dev/null
@@ -1,4 +0,0 @@
-# DATABASE_URL=file:./dev.db
-# TEST_DATABASE_URL=file:./.redwood/test.db
-# PRISMA_HIDE_UPDATE_MESSAGE=true
-# LOG_LEVEL=trace
diff --git a/web/package.json b/web/package.json
index b54fce1..4ec5c55 100644
--- a/web/package.json
+++ b/web/package.json
@@ -17,10 +17,12 @@
"@redwoodjs/forms": "6.5.1",
"@redwoodjs/router": "6.5.1",
"@redwoodjs/web": "6.5.1",
+ "axios": "^1.6.7",
"framer-motion": "^9",
"prop-types": "15.8.1",
"react": "18.2.0",
- "react-dom": "18.2.0"
+ "react-dom": "18.2.0",
+ "react-query": "^3.39.3"
},
"devDependencies": {
"@chakra-ui/storybook-addon": "^5.1.0",
@@ -29,10 +31,13 @@
"@types/react-dom": "18.2.15"
},
"scripts": {
- "start": "rw dev",
+ "start_new": "yarn run copy-env && rw dev",
+ "start_aux": "rw",
"test": "rw test a",
"test:watch": "rw test --watch",
"test-coverage": "rw test a --no-watch --collect-coverage",
- "storybook": "rw storybook"
+ "storybook": "rw storybook",
+ "build-storybook": "rw storybook --build",
+ "copy-env": "node -e 'require(\"./scripts/copy-env\").run(\"dev\")'"
}
}
diff --git a/web/public/env.js b/web/public/env.js
new file mode 100644
index 0000000..dae11de
--- /dev/null
+++ b/web/public/env.js
@@ -0,0 +1 @@
+window.env = {"REDWOOD_ENV_API_URL":"http://localhost:8080"};
\ No newline at end of file
diff --git a/web/scripts/copy-env.js b/web/scripts/copy-env.js
new file mode 100644
index 0000000..d1c276c
--- /dev/null
+++ b/web/scripts/copy-env.js
@@ -0,0 +1,38 @@
+const fs = require('fs')
+const dotenv = require('dotenv')
+
+const PREFIX = 'window.env = '
+const POSTFIX = ';'
+
+const convertFile = (source, destination) => {
+ const file = fs.readFileSync(source)
+
+ const config = dotenv.parse(file)
+ const configJsonString = JSON.stringify(config)
+ const output = PREFIX + configJsonString + POSTFIX
+
+ fs.writeFile(destination, output, (err) => {
+ if (err) {
+ throw err
+ }
+
+ // eslint-disable-next-line no-console
+ console.log(`Converted ${source} to ${destination}`)
+ })
+}
+
+const run = (stage) => {
+ switch (stage) {
+ case 'dev':
+ convertFile('../.env', 'public/env.js')
+ break
+ case 'prod':
+ convertFile('.env.staging', 'public/env.staging.js')
+ convertFile('.env.production', `public/env.${process.env.CIRCLE_SHA1}.js`)
+ break
+ default:
+ console.error('unknown stage', stage)
+ }
+}
+
+module.exports.run = run
diff --git a/web/src/App.tsx b/web/src/App.tsx
index 37c729c..170f0c3 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -2,24 +2,27 @@ import { ChakraProvider, ColorModeScript, extendTheme } from '@chakra-ui/react'
import * as theme from 'config/chakra.config'
import { FatalErrorBoundary, RedwoodProvider } from '@redwoodjs/web'
-import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
import { DevFatalError } from './pages/fatal-error'
import Routes from './Routes'
+import { QueryClient, QueryClientProvider } from 'react-query'
const extendedTheme = extendTheme(theme)
-const App = () => (
- <FatalErrorBoundary page={DevFatalError}>
- <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
- <ColorModeScript />
- <ChakraProvider theme={extendedTheme}>
- <RedwoodApolloProvider>
- <Routes />
- </RedwoodApolloProvider>
- </ChakraProvider>
- </RedwoodProvider>
- </FatalErrorBoundary>
-)
+const App = () => {
+ const queryClient = new QueryClient()
+ return (
+ <FatalErrorBoundary page={DevFatalError}>
+ <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
+ <ColorModeScript />
+ <QueryClientProvider client={queryClient}>
+ <ChakraProvider theme={extendedTheme}>
+ <Routes />
+ </ChakraProvider>
+ </QueryClientProvider>
+ </RedwoodProvider>
+ </FatalErrorBoundary>
+ )
+}
export default App
diff --git a/web/src/pages/Patterns/patterns.tsx b/web/src/pages/Patterns/patterns.tsx
index 8b490a1..1b019f8 100644
--- a/web/src/pages/Patterns/patterns.tsx
+++ b/web/src/pages/Patterns/patterns.tsx
@@ -21,10 +21,15 @@ import { FaEdit, FaEye, FaPlus, FaTrash } from 'react-icons/fa'
import { Link, routes } from '@redwoodjs/router'
import { patterns } from '.'
import { Pattern } from 'src/models'
+import { GetPatternsQuery } from './query-builder'
const tableHeaders = ['Titulo', 'Descripcion', '#Implementaciones', '']
-export const Patterns = () => {
+export const Patterns: React.FC = () => {
+ const patternsQuery = GetPatternsQuery.useQuery({})
+
+ console.log({ status: patternsQuery.status, data: patternsQuery.data })
+
return (
<VStack alignItems="flex-start" spacing="0">
<Heading as="h2" px="6">
diff --git a/web/src/pages/Patterns/query-builder/get-patterns-query.ts b/web/src/pages/Patterns/query-builder/get-patterns-query.ts
new file mode 100644
index 0000000..9604fad
--- /dev/null
+++ b/web/src/pages/Patterns/query-builder/get-patterns-query.ts
@@ -0,0 +1,27 @@
+import { AxiosError } from 'axios'
+import { useQuery as useRQ, UseQueryOptions } from 'react-query'
+
+import { Pattern } from 'src/models'
+import axiosService from 'src/services/axios-service'
+
+export namespace GetPatternsQuery {
+ export type Params = {}
+
+ export type Response = Pattern[]
+
+ export const key = ['patterns']
+
+ export const getKey = (params: Params) => [...key, params]
+
+ export const queryFn = (_params: Params) =>
+ axiosService.get<Response>(`/pattern/`).then((res) => res.data)
+
+ export const useQuery = <Select = Response>(
+ params: Params,
+ options: UseQueryOptions<Response, AxiosError, Select> = {}
+ ) => {
+ return useRQ(getKey(params), () => queryFn(params), {
+ ...options,
+ })
+ }
+}
diff --git a/web/src/pages/Patterns/query-builder/index.ts b/web/src/pages/Patterns/query-builder/index.ts
new file mode 100644
index 0000000..249cf9f
--- /dev/null
+++ b/web/src/pages/Patterns/query-builder/index.ts
@@ -0,0 +1 @@
+export * from './get-patterns-query'
diff --git a/web/src/services/axios-service.ts b/web/src/services/axios-service.ts
new file mode 100644
index 0000000..2b2a842
--- /dev/null
+++ b/web/src/services/axios-service.ts
@@ -0,0 +1,7 @@
+import axios from 'axios'
+
+const axiosService = axios.create({
+ baseURL: process.env.REDWOOD_ENV_API_URL || 'https://localhost:8080',
+})
+
+export default axiosService
diff --git a/yarn.lock b/yarn.lock
index 540f92d..06ce6d8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1683,6 +1683,15 @@ __metadata:
languageName: node
linkType: hard
+"@babel/runtime@npm:^7.23.8, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2":
+ version: 7.24.0
+ resolution: "@babel/runtime@npm:7.24.0"
+ dependencies:
+ regenerator-runtime: ^0.14.0
+ checksum: 3495eed727bf4a4f84c35bb51ab53317ae38f4bbc3b1d0a8303751f9dfa0ce6f5fb2afced72b76c3dd0d8bb2ccb84787559a4dee9886291a36b26f02f0f759b4
+ languageName: node
+ linkType: hard
+
"@babel/template@npm:^7.18.10, @babel/template@npm:^7.22.15, @babel/template@npm:^7.3.3":
version: 7.22.15
resolution: "@babel/template@npm:7.22.15"
@@ -10200,6 +10209,17 @@ __metadata:
languageName: node
linkType: hard
+"axios@npm:^1.6.7":
+ version: 1.6.7
+ resolution: "axios@npm:1.6.7"
+ dependencies:
+ follow-redirects: ^1.15.4
+ form-data: ^4.0.0
+ proxy-from-env: ^1.1.0
+ checksum: 131bf8e62eee48ca4bd84e6101f211961bf6a21a33b95e5dfb3983d5a2fe50d9fffde0b57668d7ce6f65063d3dc10f2212cbcb554f75cfca99da1c73b210358d
+ languageName: node
+ linkType: hard
+
"axobject-query@npm:^3.2.1":
version: 3.2.1
resolution: "axobject-query@npm:3.2.1"
@@ -10556,7 +10576,7 @@ __metadata:
languageName: node
linkType: hard
-"big-integer@npm:^1.6.44":
+"big-integer@npm:^1.6.16, big-integer@npm:^1.6.44":
version: 1.6.52
resolution: "big-integer@npm:1.6.52"
checksum: 9604224b4c2ab3c43c075d92da15863077a9f59e5d4205f4e7e76acd0cd47e8d469ec5e5dba8d9b32aa233951893b29329ca56ac80c20ce094b4a647a66abae0
@@ -10735,6 +10755,22 @@ __metadata:
languageName: node
linkType: hard
+"broadcast-channel@npm:^3.4.1":
+ version: 3.7.0
+ resolution: "broadcast-channel@npm:3.7.0"
+ dependencies:
+ "@babel/runtime": ^7.7.2
+ detect-node: ^2.1.0
+ js-sha3: 0.8.0
+ microseconds: 0.2.0
+ nano-time: 1.0.0
+ oblivious-set: 1.0.0
+ rimraf: 3.0.2
+ unload: 2.2.0
+ checksum: 95978446f24c685be666f5508a91350bcd4075c08feda929d26c0c678fb24bd421901f19fa8d36cb6f5ed480a334072f3bdce48fa177a8cb29793d88693911cc
+ languageName: node
+ linkType: hard
+
"brorand@npm:^1.0.1, brorand@npm:^1.1.0":
version: 1.1.0
resolution: "brorand@npm:1.1.0"
@@ -12729,7 +12765,7 @@ __metadata:
languageName: node
linkType: hard
-"detect-node@npm:^2.0.4":
+"detect-node@npm:^2.0.4, detect-node@npm:^2.1.0":
version: 2.1.0
resolution: "detect-node@npm:2.1.0"
checksum: f039f601790f2e9d4654e499913259a798b1f5246ae24f86ab5e8bd4aaf3bce50484234c494f11fb00aecb0c6e2733aa7b1cf3f530865640b65fbbd65b2c4e09
@@ -14652,6 +14688,16 @@ __metadata:
languageName: node
linkType: hard
+"follow-redirects@npm:^1.15.4":
+ version: 1.15.5
+ resolution: "follow-redirects@npm:1.15.5"
+ peerDependenciesMeta:
+ debug:
+ optional: true
+ checksum: 418d71688ceaf109dfd6f85f747a0c75de30afe43a294caa211def77f02ef19865b547dfb73fde82b751e1cc507c06c754120b848fe5a7400b0a669766df7615
+ languageName: node
+ linkType: hard
+
"for-each@npm:^0.3.3":
version: 0.3.3
resolution: "for-each@npm:0.3.3"
@@ -17303,6 +17349,13 @@ __metadata:
languageName: node
linkType: hard
+"js-sha3@npm:0.8.0":
+ version: 0.8.0
+ resolution: "js-sha3@npm:0.8.0"
+ checksum: 43a21dc7967c871bd2c46cb1c2ae97441a97169f324e509f382d43330d8f75cf2c96dba7c806ab08a425765a9c847efdd4bffbac2d99c3a4f3de6c0218f40533
+ languageName: node
+ linkType: hard
+
"js-tokens@npm:^3.0.0 || ^4.0.0, js-tokens@npm:^4.0.0":
version: 4.0.0
resolution: "js-tokens@npm:4.0.0"
@@ -18284,6 +18337,16 @@ __metadata:
languageName: node
linkType: hard
+"match-sorter@npm:^6.0.2":
+ version: 6.3.4
+ resolution: "match-sorter@npm:6.3.4"
+ dependencies:
+ "@babel/runtime": ^7.23.8
+ remove-accents: 0.5.0
+ checksum: 35d2a6b6df003c677d9ec87ecd4683657638f5bce856f43f9cf90b03e357ed2f09813ebbac759defa7e7438706936dd34dc2bfe1a18771f7d2541f14d639b4ad
+ languageName: node
+ linkType: hard
+
"md5.js@npm:^1.3.4":
version: 1.3.5
resolution: "md5.js@npm:1.3.5"
@@ -18448,6 +18511,13 @@ __metadata:
languageName: node
linkType: hard
+"microseconds@npm:0.2.0":
+ version: 0.2.0
+ resolution: "microseconds@npm:0.2.0"
+ checksum: 59dfae1c696c0bacd79603c4df7cd0dcc9e091b7c5556aaca9b0832017d3c0b40ad8f57ca25e0ee5709ef1973404448c4a2fea6c9c1fad7d9e197ff5c1c9c2d5
+ languageName: node
+ linkType: hard
+
"miller-rabin@npm:^4.0.0":
version: 4.0.1
resolution: "miller-rabin@npm:4.0.1"
@@ -18880,6 +18950,15 @@ __metadata:
languageName: node
linkType: hard
+"nano-time@npm:1.0.0":
+ version: 1.0.0
+ resolution: "nano-time@npm:1.0.0"
+ dependencies:
+ big-integer: ^1.6.16
+ checksum: 3bd12e0bcd30867178afdbe8053b3dde5fdd1c665ecd348bf879863049344fbaf05cbb1d7806a825b91efbca011ee115eee52e76fb38b7da9c97931cd9e61f15
+ languageName: node
+ linkType: hard
+
"nanoid@npm:^3.3.7":
version: 3.3.7
resolution: "nanoid@npm:3.3.7"
@@ -19319,6 +19398,13 @@ __metadata:
languageName: node
linkType: hard
+"oblivious-set@npm:1.0.0":
+ version: 1.0.0
+ resolution: "oblivious-set@npm:1.0.0"
+ checksum: ca8640474ea1e1feb3b5c98d42f5649f114ac4513ef84774e724f22fc7e529f1de3e7f26a0d9593097ab8942ca0bb8c241f7c1bd63c3e33047dd49de3aca9805
+ languageName: node
+ linkType: hard
+
"obuf@npm:^1.0.0, obuf@npm:^1.1.2":
version: 1.1.2
resolution: "obuf@npm:1.1.2"
@@ -20579,7 +20665,7 @@ __metadata:
languageName: node
linkType: hard
-"proxy-from-env@npm:^1.0.0":
+"proxy-from-env@npm:^1.0.0, proxy-from-env@npm:^1.1.0":
version: 1.1.0
resolution: "proxy-from-env@npm:1.1.0"
checksum: fe7dd8b1bdbbbea18d1459107729c3e4a2243ca870d26d34c2c1bcd3e4425b7bcc5112362df2d93cc7fb9746f6142b5e272fd1cc5c86ddf8580175186f6ad42b
@@ -21017,6 +21103,24 @@ __metadata:
languageName: node
linkType: hard
+"react-query@npm:^3.39.3":
+ version: 3.39.3
+ resolution: "react-query@npm:3.39.3"
+ dependencies:
+ "@babel/runtime": ^7.5.5
+ broadcast-channel: ^3.4.1
+ match-sorter: ^6.0.2
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+ peerDependenciesMeta:
+ react-dom:
+ optional: true
+ react-native:
+ optional: true
+ checksum: 319045ef31b9b02aa9b5446169a8c6f95cfe49406466b819cc85e41c29bfe5032d3732577efe56511278db41514772375d416a3e3976e8967c6e0972ff04dd2e
+ languageName: node
+ linkType: hard
+
"react-refresh@npm:0.14.0, react-refresh@npm:^0.14.0":
version: 0.14.0
resolution: "react-refresh@npm:0.14.0"
@@ -21407,6 +21511,13 @@ __metadata:
languageName: node
linkType: hard
+"remove-accents@npm:0.5.0":
+ version: 0.5.0
+ resolution: "remove-accents@npm:0.5.0"
+ checksum: a75321aa1b53d9abe82637115a492770bfe42bb38ed258be748bf6795871202bc8b4badff22013494a7029f5a241057ad8d3f72adf67884dbe15a9e37e87adc4
+ languageName: node
+ linkType: hard
+
"remove-trailing-separator@npm:^1.0.1":
version: 1.1.0
resolution: "remove-trailing-separator@npm:1.1.0"
@@ -21670,6 +21781,17 @@ __metadata:
languageName: node
linkType: hard
+"rimraf@npm:3.0.2, rimraf@npm:^3.0.2":
+ version: 3.0.2
+ resolution: "rimraf@npm:3.0.2"
+ dependencies:
+ glob: ^7.1.3
+ bin:
+ rimraf: bin.js
+ checksum: 9cb7757acb489bd83757ba1a274ab545eafd75598a9d817e0c3f8b164238dd90eba50d6b848bd4dcc5f3040912e882dc7ba71653e35af660d77b25c381d402e8
+ languageName: node
+ linkType: hard
+
"rimraf@npm:5.0.5":
version: 5.0.5
resolution: "rimraf@npm:5.0.5"
@@ -21692,17 +21814,6 @@ __metadata:
languageName: node
linkType: hard
-"rimraf@npm:^3.0.2":
- version: 3.0.2
- resolution: "rimraf@npm:3.0.2"
- dependencies:
- glob: ^7.1.3
- bin:
- rimraf: bin.js
- checksum: 9cb7757acb489bd83757ba1a274ab545eafd75598a9d817e0c3f8b164238dd90eba50d6b848bd4dcc5f3040912e882dc7ba71653e35af660d77b25c381d402e8
- languageName: node
- linkType: hard
-
"rimraf@npm:~2.6.2":
version: 2.6.3
resolution: "rimraf@npm:2.6.3"
@@ -24008,6 +24119,16 @@ __metadata:
languageName: node
linkType: hard
+"unload@npm:2.2.0":
+ version: 2.2.0
+ resolution: "unload@npm:2.2.0"
+ dependencies:
+ "@babel/runtime": ^7.6.2
+ detect-node: ^2.0.4
+ checksum: 0a4f86b502e7aa35d39c27373ebeaad4f2b7da793fb3d6308e5337aab541885cfe7b339ea4a1963477bf73fddabd5d69f4f47023dad71224b4b4a25611ef7dd8
+ languageName: node
+ linkType: hard
+
"unpipe@npm:1.0.0, unpipe@npm:~1.0.0":
version: 1.0.0
resolution: "unpipe@npm:1.0.0"
@@ -24523,10 +24644,12 @@ __metadata:
"@redwoodjs/web": 6.5.1
"@types/react": 18.2.37
"@types/react-dom": 18.2.15
+ axios: ^1.6.7
framer-motion: ^9
prop-types: 15.8.1
react: 18.2.0
react-dom: 18.2.0
+ react-query: ^3.39.3
languageName: unknown
linkType: soft
--
GitLab