fix: update day 2 appruntime tasks and agenda

dhis2 · Apr 5, 2024 · 348b83f · 348b83f
1 parent e211423
commit 348b83f
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 66 deletions.
diff --git a/instructions/docs/agenda/02-day-2.md b/instructions/docs/agenda/02-day-2.md
@@ -5,7 +5,7 @@ sidebar_position: 15
 # Day 2 (Tuesday)
 | Time | Topic | |
 | --- | --- | --- |
-| 09:00 - 10:30 | Opening Workshop | UI Fundamentals: Task 1 (Routing and navigation) |
+| 09:00 - 10:30 | Opening Workshop | UI Fundamentals: Intro & Task 1 (Menu) |
 | 10:30 - 11:00 | _coffee break_ | |
 | 11:00 - 12:30 | Workshop | UI Fundamentals: Task 2 (Table component) |
 | 12:30 - 13:30 | _lunch break_ | |
@@ -19,4 +19,11 @@ sidebar_position: 15
 - Introduction to UI library, Integrated design system and UI docs
     - will this be covered in first day common session?
 - [https://developers.dhis2.org/events/academy-workshops-2022](https://developers.dhis2.org/events/academy-workshops-2022)
+:::
+
+:::danger[Possible bonus tasks]
+- Add tests to the components
+- Setup CI
+- Implement with TypeScript
+@todo
 :::
diff --git a/instructions/docs/agenda/03-day-3.md b/instructions/docs/agenda/03-day-3.md
@@ -5,16 +5,12 @@ sidebar_position: 20
 # Day 3 (Wednesday)
 | Time | Topic | |
 | --- | --- | --- |
-| 09:00 - 10:30 | Opening Workshop | App Runtime: Data Queries |
+| 09:00 - 10:30 | Opening Workshop | Overview and Basic Hooks (`useConfig` and `useAlert`) |
 | 10:30 - 11:00 | _coffee break_ | |
-| 11:00 - 12:30 | Workshop | App Runtime: Mutations |
+| 11:00 - 12:30 | Workshop | App Runtime: API overview, Query Playground and Data Queries |
 | 12:30 - 13:30 | _lunch break_ | |
-| 13:30 - 15:00 | Workshop | App Runtime: Alerts |
+| 13:30 - 15:00 | Workshop | App Runtime: Mutations |
 | 15:00 - 15:30 | _cofee break_ | |
-| 15:30 - 16:30 | Workshop | App Runtime: Advanced (paging?) |
+| 15:30 - 16:30 | Workshop | App Runtime: Advanced Data Queries |
 | 16:30 - 16:45 | Closing | |
-| 16:45 - 17:00 | Q&A (with French support) | |
-
-:::warning[to discuss]
-- could cover PWAs here?
-:::
+| 16:45 - 17:00 | Q&A (with French support) | |
diff --git a/instructions/docs/web-academy/04-appruntime.md b/instructions/docs/web-academy/04-appruntime.md
@@ -3,93 +3,97 @@ title: Day 3 | App Runtime
 sidebar_position: 50
 ---
 
-:::danger[work in progress]
-Owned and will be updated by **Mozafar**
-
-Content here is draft copy from 2022 workshop: https://github.com/dhis2/academy-web-app-dev-2022/tree/main/workshop/04-app-runtime
+:::tip[What you will learn]
+- [ ] An overview of the the App Platform and App Runtime toolset
+- [ ] The philoshopy behind AppRuntime hooks (imperative vs declarative)
+- [ ] Use Alerts and Config service
+- [ ] Use Data Service: Lookup specific APIs and convert the API requests into queries and mutations
+- [ ] Test queries and mutations in the playground
+- [ ] Use `useDataQuery` and `useDataMutation` hooks
+- [ ] Other advanced use cases for the Data Service hooks (dynamic queries, refetching, lazy mode etc..)
 :::
 
-## Workshop - App Runtime Task 1
 
-### Tasks
+## Presentation
 
-* Here you would need to write a query and define some parameters
+> _**instructor note**: We will go through the presentation in four parts: the AppRuntime overview and basic hooks, data queries, data mutations, advanced data queries._
 
-```js
-const query = {
-    results: {
-        // @TODO: Writa a query to show 5 indicators with their name and description
-    },
-}
-```
-* Finally, you would need to use that query defined above to render your data 👇
+<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vSdtSEOUIBoql2XTrjEQPndvb6BAjnqcGiqhk841tZRivnTMNpn0PSFUEMElj1TK83hNsgGe811Qgjw/embed?start=false&loop=false&delayms=3000" frameborder="0" width="100%" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>
 
-```js
-export const IndicatorsList = () => {
-    // @TODO: Replace this line with a hook to perform the above query!
-    const { loading, error, data } = { loading: false, error: 'Unimplemented', data: undefined }
-}
-```
-### Solution:
 
-* After you've completed these tasks, your application should look like this:
+## Overview and Basic hooks
 
-![](../assets/indicators.png)
+### Task 1.1 - useAlert
+:::info[Requirement]
+Replace the alert in the `Form` view with an [alert from the UI library](https://ui.dhis2.nu/components/alertbar) 
+::: 
 
-#### Submit your assignment
+### Task 1.2 - useConfig
+:::info[Requirement]
+Get the DHIS2 configuration using [useConfig hook](https://developers.dhis2.org/docs/app-runtime/hooks/useConfig) and show it at the bottom of the side bar.
+::: 
 
-When you're ready, please follow these [instructions](../resources/GET_STARTED.md#how-to-submit-assignments) to submit your assignment.
 
-### Workshop - App Runtime Task 2
+## Data Queries
 
-#### Fill in mutations
+> _**instructor note**:  Overview of the API and how to convert an API request to a query, and demonstrate the [Query playground](https://runtime.dhis2.nu/playground/)._
 
-This application uses mutations in 2 React components:
+### Task 2.1 - useDataQuery
 
-```
-- [DeleteVisualizationButton](./src/components/DeleteVisualizationButton.js)
-- [NewVisualizationButton](./src/components/NewVisualizationButton.js)
-```
+:::info[Requirement]
+Replace the _hardcoded_ list of attributes with the list of attributes from the API
+:::
 
-The application is almost complete, all you need to do is fill in the mutations in those two files.  You can use the [Data Query Playground](https://runtime.dhis2.nu/playground) to test different mutations.
+### Task 2.2 - parallel queries
 
-### OPTIONAL BONUS
 
-If you've completed everything and want a challenge, you can **add a new feature to this application**.  This is **completely optional**, so don't worry about it if you haven't completed all the other tasks yet.
+:::info[Requirement]
+Add a query to get the current logged in user info, and show their name and email. 
+:::
 
-#### The Bonus Feature
+:::danger
+@todo: update screenshot
+@todo: clarify partial updates with PATCH
+@todo: is there a more suitable (less contrived) query to run in parallel?
+:::
+![](../assets/indicators.png)
 
-This application supports **creating** and **deleting** visualizations, but it doesn't support **renaming** them.  This is your task:
 
-Add an `Rename` button to each row in `VisualizationsTable.js`.  This Edit button should open a `Dialog` component (from `@dhis2/ui`) which contains a form.  That form should allow the user to type a new name for the selected Visualization.  When submitted, the form should use a Data Mutation to send a POST request updating the visualization's name.  The dialog should then disappear and the table of visualizations should refresh to show the updated name.  Good luck!
+## Mutations
 
+> _**instructor note**:  Show examples of create, update, and delete mutations in the [Query playground](https://runtime.dhis2.nu/playground/)._
 
-## Advanced Application Runtime and Data Queries
 
-Some handy links:
+### Task 3.1 - useDataMutation
 
-- [REST API Documentation](https://docs.dhis2.org/2.34/en/dhis2_developer_manual/web-api.html)
-- [App Runtime Docs](https://runtime.dhis2.nu)
-- [Data Query Playground](https://runtime.dhis2.nu/playground)
-- [App Runtime Example App](https://github.com/dhis2/app-runtime/tree/master/examples/cra)
+:::info[Requirement]
+- Update the form to create a mutation to create a new entity when submitting the form.
+- Add a delete icon in the tables' rows to delete an entity using a Delete mutation.
+:::
 
-### Tasks intructions
+### Task 3.2 (optional bonus)
 
-1. There are three simple tasks to be completed. The comments that are important are the ones containing `@TODO` in `src/ProgramsList.js` and `src/DeleteProgram.js`
-2. After you've completed these tasks, please follow these [instructions](../resources/GET_STARTED.md#how-to-submit-assignments) for submitting your assignment.
+:::info[Requirement]
+This application supports **creating** and **deleting** visualizations, but it doesn't support **renaming** them.  This is your task:
 
-#### TASK 1 - Using Dynamic queries and variables
+Add an `Rename` button to each row in `VisualizationsTable.js`.  This Edit button should open a `Dialog` component (from `@dhis2/ui`) which contains a form.  That form should allow the user to type a new name for the selected Visualization.  When submitted, the form should use a Data Mutation to send a POST request updating the visualization's name.  The dialog should then disappear and the table of visualizations should refresh to show the updated name.
+:::
 
-In this task you will convert a static query into a dynamic one. You will be working in the `src/ProgramsList.js` component (check first comments `@TODO-1`)
 
-#### TASK 2 - Using `Alerts`
+## Task 4 - Advanced use cases (dynamic queries)
 
-Check the comments in the `src/ProgramList.js` component starting with `@TODO-3`.
+> _**instructor note**:  Live code the advanced query options._
 
-In this task you will use a simple `useAlert` to show alerts when a program has been created
 
-#### TASK 3 - Define a dynamic delete mutation
+:::info[Requirements]
+- Add paging to go through the different pages of the list.
+- Add a refresh button to reload the table list.
+:::
+
 
-Here you will be working mostly in the `src/DeleteProgram.js` component. Check for comments starting with `@TODO-2`. The goal of this task is to make the Delete button work.
+## Resources
 
-You will implement a delete mutation using dynamic query techniques.
+- [REST API Documentation](https://docs.dhis2.org/en/develop/using-the-api/dhis-core-version-master/introduction.html)
+- [App Runtime Docs](https://developers.dhis2.org/docs/app-runtime/getting-started/)
+- [Data Query Playground](https://runtime.dhis2.nu/playground)
+- [App Runtime Example App](https://github.com/dhis2/app-runtime/tree/master/examples/cra)