chore: update README

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/
+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 

i18n/en.pot

@@ -0,0 +1,18 @@
+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-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"

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",

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 <div>{label}</div>
+    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`
-    <div>
-        <NavigationItem
+    <Menu>
+        <NavigationItem 
             // Menu item for the home page
             label="Home"
             path="/"
@@ -45,5 +46,5 @@ export const Navigation = () => (
             label="Form"
             path="/form"
         />
-    </div>
+    </Menu>
 )

src/views/Attributes.js

@@ -1,24 +1,74 @@
+import {useDataQuery} from '@dhis2/app-runtime'
+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'
+//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 (
+            <CenteredContent>
+                <CircularLoader />
+            </CenteredContent>
+        )
+    }
+
+    if (error) {
+        return <NoticeBox error>{error?.message}</NoticeBox>
+    }
 
     return (
         <div>
             <h1>Attributes</h1>
-            <p>loading: {JSON.stringify(loading)}</p>
-            <p>error message: {error?.message}</p>
-            {
-                // if there is any data available
-                data?.attributes?.attributes && (
-                    <pre>
-                        {JSON.stringify(data.attributes.attributes, null, 4)}
-                    </pre>
-                )
-            }
+            <DataTable>
+                <DataTableHead>
+                    <DataTableRow>
+                        <DataTableColumnHeader>
+                            Name
+                        </DataTableColumnHeader>
+                        <DataTableColumnHeader>
+                            Unique
+                        </DataTableColumnHeader>
+                    </DataTableRow>
+                </DataTableHead>
+                <DataTableBody>
+                    {data?.attributesList?.attributes.map(
+                        ({id, displayName, unique}) => (
+                            <DataTableRow key={id}>
+                                <DataTableCell>{displayName}</DataTableCell>
+                                <DataTableCell>{
+                                    unique ? 'Yes' : 'No'
+
+                                }</DataTableCell>
+                            </DataTableRow>
+                        )
+                    )}
+                </DataTableBody>
+            </DataTable>
         </div>
     )
 }

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 = () => (
-    <div>
-        <h1>Form</h1>
-
-        <RFForm onSubmit={alertValues}>
-            {({ handleSubmit }) => (
-                <form onSubmit={handleSubmit}>
-                    <div className={styles.row}>
-                        <Field
-                            name="surname"
-                            label="Surname"
-                            component={'input'}
-                            className={styles.surname}
-                            initialValue={'Traore'}
-                        />
-                    </div>
-                </form>
-            )}
-        </RFForm>
-    </div>
-)
+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 (
+        <div>
+            <h1>Form</h1>
+
+            <RFForm onSubmit={alertValues}>
+                {({ handleSubmit }) => (
+                    <form onSubmit={handleSubmit}>
+                        <div className={styles.row}>
+                            <Field
+                                name="title"
+                                label="Title"
+                                component={SingleSelectFieldFF}
+                                className={styles.title}
+                                initialValue="none"
+                                options={[
+                                    { label: 'Professor', value: 'prof' },
+                                    { label: 'Doctor', value: 'doc' },
+                                    { label: 'None', value: 'none' },
+                                ]}
+                            />
+                        </div>
+
+                        <div className={styles.row}>
+                            <Field
+                                required
+                                name="surname"
+                                label="Surname"
+                                component={InputFieldFF}
+                                className={styles.surname}
+                            />
+
+                            <Field
+                                required
+                                name="firstname"
+                                label="First name"
+                                component={InputFieldFF}
+                                className={styles.firstname}
+                            />
+                        </div>
+
+                        <div className={styles.row}>
+                            <Field
+                                required
+                                name="username"
+                                label="Username"
+                                component={InputFieldFF}
+                                className={styles.email}
+                            />
+                        </div>
+
+                        <div className={styles.row}>
+                            <Field
+                                required
+                                name="password"
+                                label="Password"
+                                type="password"
+                                component={InputFieldFF}
+                                className={styles.password}
+                            />
+                        </div>
+
+                        <div className={styles.row}>
+                            <Field
+                                required
+                                name="email"
+                                label="E-mail address"
+                                component={InputFieldFF}
+                                className={styles.username}
+                            />
+                        </div>
+
+                        <div className={styles.row}>
+                            <Field
+                                required
+                                name="confirm_email"
+                                label="Confirm e-mail address"
+                                component={InputFieldFF}
+                                className={styles.email}
+                            />
+                        </div>
+
+                        <div className={styles.row}>
+                            <Field
+                                type="checkbox"
+                                name="newsletter"
+                                label="I want to receive the newsletter"
+                                component={SwitchFieldFF}
+                                className={styles.newsletters}
+                                initialValue={false}
+                            />
+                        </div>
+
+                        <div className={styles.row}>
+                            <Button type="submit" primary>
+                                Submit form
+                            </Button>
+                        </div>
+                    </form>
+                )}
+            </RFForm>
+        </div>
+    )
+}

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 = () => (
-    <div>
-        <h1>Home</h1>
+export const Home = () => {
+    const config = useConfig()
+    return (
+        <div>
+            <h1>{i18n.t("Home")}</h1>
 
-        <p>DHIS2 Web App Academy 2024</p>
-    </div>
-)
+            <p>{i18n.t("DHIS2 Web App Academy 2024")}</p>
+
+            <Tag positive>{i18n.t("Running on DHIS2 API  version")} {config.apiVersion}</Tag>
+        </div>
+    )
+}