From 2943eceee7f61e02216fe5de802f2fde47005162 Mon Sep 17 00:00:00 2001 From: HijabH Date: Tue, 16 Apr 2024 11:33:04 +0000 Subject: [PATCH 1/4] chore: update README --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index ab8a87d..6eb44cd 100644 --- a/README.md +++ b/README.md @@ -4,4 +4,6 @@ This is the repo that you will use during the Web Academy exercises. Please fork Before participating, make sure you have gone through [the pre-requisites](https://dhis2.github.io/academy-web-app-dev/docs/before-academy/) for the academy. -For more information about the academy and the topics taught, check the website: https://dhis2.github.io/academy-web-app-dev/ \ No newline at end of file +For more information about the academy and the topics taught, check the website: https://dhis2.github.io/academy-web-app-dev/ + +Hi My name is Hijab Hassan \ No newline at end of file From 2a4435d5beb55624f3af155260482b6fbf093f32 Mon Sep 17 00:00:00 2001 From: HijabH Date: Tue, 16 Apr 2024 12:09:50 +0000 Subject: [PATCH 2/4] chore: completed Task1 --- package.json | 2 +- src/navigation/Navigation.js | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 0c33cfc..d6cc739 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "private": true, "scripts": { "build": "d2-app-scripts build", - "start": "d2-app-scripts start", + "start": "d2-app-scripts start --proxy https://dev.im.dhis2.org/academy-web --proxyPort 8082", "test": "d2-app-scripts test", "deploy": "d2-app-scripts deploy", "lint": "d2-style check", diff --git a/src/navigation/Navigation.js b/src/navigation/Navigation.js index 38b5781..d25e063 100644 --- a/src/navigation/Navigation.js +++ b/src/navigation/Navigation.js @@ -1,3 +1,4 @@ +import {Menu, MenuItem} from '@dhis2/ui' import PropTypes from 'prop-types' import React from 'react' // @TODO: Import the `Menu` and `MenuItem` components @@ -17,7 +18,7 @@ const NavigationItem = ({ path, label }) => { const onClick = () => navigate(path) // @TODO: Use the `MenuItem` component instead of the `div` - return
{label}
+ return < MenuItem label={label} active={isActive} onClick={onClick}/> } NavigationItem.propTypes = { @@ -27,8 +28,8 @@ NavigationItem.propTypes = { export const Navigation = () => ( // @TODO: Use the `Menu` components instead of the `div` -
- + ( label="Form" path="/form" /> -
+ ) From 8526259300b0f986a37ff54e7cadcaa95badea3f Mon Sep 17 00:00:00 2001 From: HijabH Date: Wed, 17 Apr 2024 10:29:31 +0000 Subject: [PATCH 3/4] chore: completed Day3-Task1 --- i18n/en.pot | 12 +++++++++ src/views/Attributes.js | 58 ++++++++++++++++++++++++++++++++++------- src/views/Home.js | 20 +++++++++----- 3 files changed, 74 insertions(+), 16 deletions(-) create mode 100644 i18n/en.pot diff --git a/i18n/en.pot b/i18n/en.pot new file mode 100644 index 0000000..fa06773 --- /dev/null +++ b/i18n/en.pot @@ -0,0 +1,12 @@ +msgid "" +msgstr "" +"Project-Id-Version: i18next-conv\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=utf-8\n" +"Content-Transfer-Encoding: 8bit\n" +"Plural-Forms: nplurals=2; plural=(n != 1)\n" +"POT-Creation-Date: 2024-04-17T09:23:05.587Z\n" +"PO-Revision-Date: 2024-04-17T09:23:05.587Z\n" + +msgid "Home" +msgstr "Home" diff --git a/src/views/Attributes.js b/src/views/Attributes.js index 87b6a40..a5c35b3 100644 --- a/src/views/Attributes.js +++ b/src/views/Attributes.js @@ -1,3 +1,14 @@ +import { + CenteredContent, + CircularLoader, + NoticeBox} from '@dhis2/ui' +import { + DataTable, + DataTableBody, + DataTableCell, + DataTableColumnHeader, + DataTableHead, + DataTableRow} from '@dhis2-ui/table' import React from 'react' import { useGetAttributes } from '../hooks/index.js' @@ -6,19 +17,46 @@ export const Attributes = () => { // we will update this implementation after learning about app-runtime const { loading, error, data } = useGetAttributes() + if (loading) { + return ( + + + + ) + } + + if (error) { + return {error?.message} + } + return (

Attributes

-

loading: {JSON.stringify(loading)}

-

error message: {error?.message}

- { - // if there is any data available - data?.attributes?.attributes && ( - 
-                        {JSON.stringify(data.attributes.attributes, null, 4)}
-
- ) - } + + + + + Name + + + Unique + + + + + {data.attributes.attributes.map( + ({id, displayName, unique}) => ( + + {displayName} + { + unique ? 'Yes' : 'No' + + } + + ) + )} + +
) } diff --git a/src/views/Home.js b/src/views/Home.js index 76ef507..a38e490 100644 --- a/src/views/Home.js +++ b/src/views/Home.js @@ -1,9 +1,17 @@ +import {useConfig} from '@dhis2/app-runtime' +import i18n from '@dhis2/d2-i18n' +import {Tag} from '@dhis2/ui' import React from 'react' -export const Home = () => ( -
-

Home

+export const Home = () => { + const config = useConfig() + return ( +
+

{i18n.t("Home")}

-

DHIS2 Web App Academy 2024

-
-) +

{i18n.t("DHIS2 Web App Academy 2024")}

+ + {i18n.t("Running on DHIS2 API version")} {config.apiVersion} +
+ ) +} From 01381f750f53ecfa7e9ab8d4a6d48e5beffe789e Mon Sep 17 00:00:00 2001 From: HijabH Date: Wed, 17 Apr 2024 14:31:26 +0000 Subject: [PATCH 4/4] chore: completed Day3-Task2 --- i18n/en.pot | 10 ++- src/views/Attributes.js | 18 ++++- src/views/Form.js | 168 +++++++++++++++++++++++++++++++++------- 3 files changed, 165 insertions(+), 31 deletions(-) diff --git a/i18n/en.pot b/i18n/en.pot index fa06773..5e4e380 100644 --- a/i18n/en.pot +++ b/i18n/en.pot @@ -5,8 +5,14 @@ msgstr "" "Content-Type: text/plain; charset=utf-8\n" "Content-Transfer-Encoding: 8bit\n" "Plural-Forms: nplurals=2; plural=(n != 1)\n" -"POT-Creation-Date: 2024-04-17T09:23:05.587Z\n" -"PO-Revision-Date: 2024-04-17T09:23:05.587Z\n" +"POT-Creation-Date: 2024-04-17T11:02:09.401Z\n" +"PO-Revision-Date: 2024-04-17T11:02:09.401Z\n" msgid "Home" msgstr "Home" + +msgid "DHIS2 Web App Academy 2024" +msgstr "DHIS2 Web App Academy 2024" + +msgid "Running on DHIS2 API version" +msgstr "Running on DHIS2 API version" diff --git a/src/views/Attributes.js b/src/views/Attributes.js index a5c35b3..711b5b1 100644 --- a/src/views/Attributes.js +++ b/src/views/Attributes.js @@ -1,3 +1,4 @@ +import {useDataQuery} from '@dhis2/app-runtime' import { CenteredContent, CircularLoader, @@ -10,12 +11,23 @@ import { DataTableHead, DataTableRow} from '@dhis2-ui/table' import React from 'react' -import { useGetAttributes } from '../hooks/index.js' +//import { useGetAttributes } from '../hooks/index.js' +//tested query in the playground +const query= { + "attributesList": { + "resource": "attributes", + "params": { + "pageSize": 5, + "fields": ["displayName", "code", "unique"], + "order": "displayName:desc", + }, + }, +} export const Attributes = () => { // we get the data using a custom hook // we will update this implementation after learning about app-runtime - const { loading, error, data } = useGetAttributes() + const { loading, error, data} = useDataQuery(query) if (loading) { return ( @@ -44,7 +56,7 @@ export const Attributes = () => { - {data.attributes.attributes.map( + {data?.attributesList?.attributes.map( ({id, displayName, unique}) => ( {displayName} diff --git a/src/views/Form.js b/src/views/Form.js index 1713331..d20ab35 100644 --- a/src/views/Form.js +++ b/src/views/Form.js @@ -1,4 +1,17 @@ -import { ReactFinalForm } from '@dhis2/ui' +import { useAlert } from '@dhis2/app-runtime' +import { + Button, + InputFieldFF, + SingleSelectFieldFF, + SwitchFieldFF, + composeValidators, + createEqualTo, + email, + hasValue, + dhis2Password, + dhis2Username, + ReactFinalForm, +} from '@dhis2/ui' import React from 'react' import styles from './Form.module.css' @@ -15,31 +28,134 @@ import styles from './Form.module.css' * @param {string} values.email-confirmation * @param {bool} values.newsletter */ -const alertValues = (values) => { - const formattedValuesString = JSON.stringify(values, null, 2) - alert(formattedValuesString) -} +//const alertValues = (values) => { +// const formattedValuesString = JSON.stringify(values, null, 2) +// alert(formattedValuesString) +//} const { Field, Form: RFForm } = ReactFinalForm -export const Form = () => ( -
-

Form

- - - {({ handleSubmit }) => ( -
-
- -
-
- )} - -
-) +export const Form = () => { + const { show } = useAlert((values) => { + if(values.title === 'prof') { + return `All good ${values.firstname}` + } + return 'All is goods' + }, (values) => { + if(values.title !== 'prof') { + return { + warning: true + } + } + return { + critical: true + } + }) + + const alertValues = (values) => { + show(values) + } + + return ( +
+

Form

+ + + {({ handleSubmit }) => ( +
+
+ +
+ +
+ + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ )} + +
+ ) +}