diff --git a/docs/developer/apps/1-introduction.md b/docs/developer/apps/1-general-concepts.md similarity index 98% rename from docs/developer/apps/1-introduction.md rename to docs/developer/apps/1-general-concepts.md index eaab324c..0154dde4 100644 --- a/docs/developer/apps/1-introduction.md +++ b/docs/developer/apps/1-general-concepts.md @@ -1,6 +1,5 @@ --- title: General concepts -slug: general-concepts --- diff --git a/docs/developer/apps/15-communication.md b/docs/developer/apps/15-communication.md index 1307e2ec..3de2348b 100644 --- a/docs/developer/apps/15-communication.md +++ b/docs/developer/apps/15-communication.md @@ -43,6 +43,6 @@ port.postMessage( The response will contain `token` you will be using to request your app's data. -3. **Use the API**: From now on you can freely use your token to access the API and fetch various data. See the [API Documentation](20-api-reference). +3. **Use the API**: From now on you can freely use your token to access the API and fetch various data. See the [API Documentation](./api-reference). 4. **Refetch the token**: The token might expire. In this case, redo step 2. diff --git a/docs/developer/apps/20-api-reference.md b/docs/developer/apps/20-api-reference.md index b45cfc96..f78f7a24 100644 --- a/docs/developer/apps/20-api-reference.md +++ b/docs/developer/apps/20-api-reference.md @@ -4,11 +4,11 @@ slug: api-reference --- -All following requests need an authentication token received as described in the [guide](15-communication). +All following requests need an authentication token received as described in the [guide](./communication). Therefore, don't forget to use `Authorization: Bearer ` in your request's headers. -Please refer to [Introduction](1-introduction)'s vocabulary to understand the concepts. +Please refer to [the General Concepts](./general-concepts)'s vocabulary to understand the concepts. ### Query strings @@ -184,7 +184,7 @@ Within Graasp, the apps are given some information by query string: ## Parent Window -Since apps are embedded in Graasp with an iframe, it is possible to communicate with the parent window using both regular `window.postMessage` and `MessageChannel`. One should first use `window.postMessage` to get the context, as well as the `MessageChannel`'s port to continue the process (see [guide](15-communcation)). +Since apps are embedded in Graasp with an iframe, it is possible to communicate with the parent window using both regular `window.postMessage` and `MessageChannel`. One should first use `window.postMessage` to get the context, as well as the `MessageChannel`'s port to continue the process (see [guide](./communication)). ### `window.postMessage` diff --git a/docs/developer/apps/30-deployement.md b/docs/developer/apps/30-deployement.md index 5d7720f6..5e499a82 100644 --- a/docs/developer/apps/30-deployement.md +++ b/docs/developer/apps/30-deployement.md @@ -1 +1,5 @@ +:::warning +Doc under construction. +::: + Add instructions on how we deploy apps with S3 release-please and the workflows diff --git a/docs/developer/apps/5-app-template.md b/docs/developer/apps/5-app-template.md index f441eafc..6ebe0db1 100644 --- a/docs/developer/apps/5-app-template.md +++ b/docs/developer/apps/5-app-template.md @@ -5,7 +5,7 @@ slug: app-template # Graasp App Template -We provide a template to quickly start a new app for Graasp with the [React framework](https://react.dev/) and our [query client](./7-apps-query-client.md). +We provide a template to quickly start a new app for Graasp with the [React framework](https://react.dev/) and our [query client](./apps-query-client). You can find the rest of the instructions on how to use the template in the [README of the template](https://github.com/graasp/graasp-app-starter-ts-vite/blob/main/README.md). diff --git a/docs/developer/apps/7-apps-query-client.md b/docs/developer/apps/7-apps-query-client.md index ed7699c8..0f194e34 100644 --- a/docs/developer/apps/7-apps-query-client.md +++ b/docs/developer/apps/7-apps-query-client.md @@ -5,7 +5,7 @@ slug: apps-query-client # Query client for apps -As you start to build your app from [the template](./5-app-template.md), you will see that it comes with a pre-configured query client. This configuration is located in `src/config/queryClient.ts` and contains everything you need to configure the apps query client. +As you start to build your app from [the template](./app-template), you will see that it comes with a pre-configured query client. This configuration is located in `src/config/queryClient.ts` and contains everything you need to configure the apps query client. More informations on how to use the query client can be found in [its repo](https://github.com/graasp/graasp-apps-query-client). @@ -84,9 +84,11 @@ configureQueryClient({ After configuration, the query client returns multiple objects that you can use throughout your app. #### `queryClient` + This object represents the query client. You mostly need to passe it to the `QueryClientProvider`. #### `QueryClientProvider` + This is the context in which you can put all the logic that requires the query client. Usually, you will encapsulate most of your app in this context to allow your components to use the configured query client. In the template app, this context is setup in the **Root** component. @@ -155,11 +157,13 @@ Hooks are available for the three data domains, [app data](./1-introduction.md#a For app data: ##### `useAppData` + ##### `useAppDataFile` For app settings: ##### `useAppSettings` + ##### `useAppSettingFile` For app actions: @@ -167,6 +171,7 @@ For app actions: ##### `useAppActions` #### `mutations` + - `API_ROUTES` - `ReactQueryDevtools` - `QUERY_KEYS` diff --git a/docs/developer/getting-started.md b/docs/developer/getting-started.md index c9b2198f..1ab13a3f 100644 --- a/docs/developer/getting-started.md +++ b/docs/developer/getting-started.md @@ -9,7 +9,7 @@ By the end of this guide you should have a working version of the Graasp platfor :::tip If you want to develop a Graasp app, you don't need the full setup. -You can head over to [the Graasp App Development section](/developer/apps/intro). +You can head over to [the Graasp App Development section](/developer/apps). ::: :::important @@ -141,7 +141,7 @@ Wait a moment, for the server to build, will see the `[Node] [nodemon] restartin If everything went well, opening [`http://localhost:3000/status`](http://localhost:3000/status) in your browser should greet you with "OK". -If you are facing an error, check [the Troubleshooting page](./trouble-shooting) to see if your issue is mentioned there. +If you are facing an error, check [the Troubleshooting page](./troubleshooting) to see if your issue is mentioned there. :::tip Your browser might not be able to resolve the `localstack` domain when uploading and viewing files. To use localstack with the Docker installation, it is necessary to edit your `/etc/hosts` with the following line `127.0.0.1 localstack`. This is necessary because the backend creates signed urls with the localstack container hostname. Without changing the hosts, the development machine cannot resolve the `http://localstack` hostname.