From fad5206bbbe183d8ee27963412bd06095dec58d5 Mon Sep 17 00:00:00 2001 From: mattae Date: Tue, 16 Apr 2024 10:36:16 +0100 Subject: [PATCH 01/11] Test edit --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index ab8a87d..b5b8356 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/ + +Edited by Matthew Edor From 95967bee35fe2ee01e6106c1d6fb77a7a85b6040 Mon Sep 17 00:00:00 2001 From: mattae Date: Tue, 16 Apr 2024 12:42:17 +0100 Subject: [PATCH 02/11] Add navigation --- src/navigation/Navigation.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/navigation/Navigation.js b/src/navigation/Navigation.js index 38b5781..092a6ab 100644 --- a/src/navigation/Navigation.js +++ b/src/navigation/Navigation.js @@ -1,7 +1,7 @@ +import { Menu, MenuItem } from '@dhis2/ui' import PropTypes from 'prop-types' import React from 'react' -// @TODO: Import the `Menu` and `MenuItem` components -import { useNavigate, useMatch } from 'react-router-dom' +import { useMatch, useNavigate } from 'react-router-dom' const NavigationItem = ({ path, label }) => { // function to navigate to different route @@ -16,8 +16,7 @@ const NavigationItem = ({ path, label }) => { // eslint-disable-next-line no-unused-vars const onClick = () => navigate(path) - // @TODO: Use the `MenuItem` component instead of the `div` - return
{label}
+ return } NavigationItem.propTypes = { @@ -26,8 +25,7 @@ NavigationItem.propTypes = { } export const Navigation = () => ( - // @TODO: Use the `Menu` components instead of the `div` -
+ ( label="Form" path="/form" /> -
+ ) From 2b013d0e22055b0e7aa616ca023e0d9012af48ee Mon Sep 17 00:00:00 2001 From: mattae Date: Tue, 16 Apr 2024 14:40:05 +0100 Subject: [PATCH 03/11] - Task 2 --- src/views/Attributes.js | 52 +++++++++++++++++++++++++++++++---------- 1 file changed, 40 insertions(+), 12 deletions(-) diff --git a/src/views/Attributes.js b/src/views/Attributes.js index 87b6a40..52e2f3d 100644 --- a/src/views/Attributes.js +++ b/src/views/Attributes.js @@ -1,24 +1,52 @@ +import { + CenteredContent, + CircularLoader, + DataTable, + DataTableCell, + DataTableColumnHeader, + DataTableRow, + NoticeBox, + TableBody, + TableHead +} from '@dhis2/ui' import React from 'react' import { useGetAttributes } from '../hooks/index.js' 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} = useGetAttributes() + if (loading) { + return + + + } + if (error) { + return {error} + } 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)}
-
- ) - } + {data?.attributes?.attributes && ( + + + + Name + + + Unique + + + + {data.attributes.attributes.map((attr) => { + return + {attr.displayName} + {attr.unique ? 'Yes' : 'No'} + + })} + + + )}
) } From 47b7449f61d3385c0f1c1daf5008f6719f1207cf Mon Sep 17 00:00:00 2001 From: mattae Date: Wed, 17 Apr 2024 10:29:04 +0100 Subject: [PATCH 04/11] Implement form --- src/views/Form.js | 126 +++++++++++++++++++++++++++++++++++--- src/views/Form.module.css | 9 +++ 2 files changed, 127 insertions(+), 8 deletions(-) diff --git a/src/views/Form.js b/src/views/Form.js index 1713331..219b08a 100644 --- a/src/views/Form.js +++ b/src/views/Form.js @@ -1,7 +1,19 @@ -import { ReactFinalForm } from '@dhis2/ui' +import { + createEqualTo, + composeValidators, + email, + Button, + InputFieldFF, + ReactFinalForm, + SingleSelectFieldFF, + SwitchFieldFF, + hasValue, + dhis2Username +} from '@dhis2/ui' import React from 'react' import styles from './Form.module.css' + /** * This is just a function to demonstrate the values when the form is submitted * It takes the form's values (which is an object), transforms it into readable JSON, @@ -20,24 +32,122 @@ const alertValues = (values) => { alert(formattedValuesString) } -const { Field, Form: RFForm } = ReactFinalForm +const {Field, Form: RFForm} = ReactFinalForm export const Form = () => (

Form

- {({ handleSubmit }) => ( + {({handleSubmit}) => (
+ +
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+ +
+ +
)}
diff --git a/src/views/Form.module.css b/src/views/Form.module.css index e2b6665..3e36386 100644 --- a/src/views/Form.module.css +++ b/src/views/Form.module.css @@ -22,3 +22,12 @@ .email { flex-grow: 1; } + +.half { + width: 50% !important; +} + +.full { + width: 100% !important; + padding: 2px; +} From 96ede2553ac0e7a6eaa6cb35704f1a8bfcb6721a Mon Sep 17 00:00:00 2001 From: mattae Date: Wed, 17 Apr 2024 10:48:39 +0100 Subject: [PATCH 05/11] Implement i18n --- i18n/en.pot | 12 ++++++++++++ i18n/fr.po | 12 ++++++++++++ src/App.js | 1 + src/views/Home.js | 3 ++- 4 files changed, 27 insertions(+), 1 deletion(-) create mode 100644 i18n/en.pot create mode 100644 i18n/fr.po diff --git a/i18n/en.pot b/i18n/en.pot new file mode 100644 index 0000000..82b23a9 --- /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:33:24.538Z\n" +"PO-Revision-Date: 2024-04-17T09:33:24.538Z\n" + +msgid "Home" +msgstr "Home" diff --git a/i18n/fr.po b/i18n/fr.po new file mode 100644 index 0000000..c30ae2d --- /dev/null +++ b/i18n/fr.po @@ -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:33:24.538Z\n" +"PO-Revision-Date: 2024-04-17T09:33:24.538Z\n" + +msgid "Home" +msgstr "Maison" diff --git a/src/App.js b/src/App.js index be72803..e8be8c0 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import { HashRouter, Navigate, Route, Routes } from 'react-router-dom' import styles from './App.module.css' import { Navigation } from './navigation/index.js' import { Form, Home, Attributes } from './views/index.js' +import './locales/index.js'; const MyApp = () => ( (
-

Home

+

{i18n.t('Home')}

DHIS2 Web App Academy 2024

From f24ce6d1f1d08b9d55e665a98661eb857d1e7470 Mon Sep 17 00:00:00 2001 From: mattae Date: Wed, 17 Apr 2024 11:05:41 +0100 Subject: [PATCH 06/11] Implement Runtime useConfig --- i18n/en.pot | 7 +++++-- i18n/fr.po | 2 ++ src/views/Home.js | 18 ++++++++++++------ 3 files changed, 19 insertions(+), 8 deletions(-) diff --git a/i18n/en.pot b/i18n/en.pot index 82b23a9..5d6c998 100644 --- a/i18n/en.pot +++ b/i18n/en.pot @@ -5,8 +5,11 @@ 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:33:24.538Z\n" -"PO-Revision-Date: 2024-04-17T09:33:24.538Z\n" +"POT-Creation-Date: 2024-04-17T09:59:53.448Z\n" +"PO-Revision-Date: 2024-04-17T09:59:53.448Z\n" msgid "Home" msgstr "Home" + +msgid "API_VERSION" +msgstr "Running on API Version {{apiVersion}}" diff --git a/i18n/fr.po b/i18n/fr.po index c30ae2d..fc18ff8 100644 --- a/i18n/fr.po +++ b/i18n/fr.po @@ -10,3 +10,5 @@ msgstr "" msgid "Home" msgstr "Maison" +msgid "API_VERSION" +msgstr "Exécution sur la version API {{apiVersion}}" diff --git a/src/views/Home.js b/src/views/Home.js index c73cf04..69c58fb 100644 --- a/src/views/Home.js +++ b/src/views/Home.js @@ -1,10 +1,16 @@ +import { useConfig } from '@dhis2/app-runtime'; import i18n from '@dhis2/d2-i18n' import React from 'react' -export const Home = () => ( -
-

{i18n.t('Home')}

+export const Home = () => { + const { apiVersion } = useConfig(); + return ( +
+

{i18n.t('Home')}

-

DHIS2 Web App Academy 2024

-
-) +

DHIS2 Web App Academy 2024

+ +

{i18n.t('API_VERSION', {apiVersion})}

+
+ ) +} From d805d67768aece7a655149ea2316399fdcda3d73 Mon Sep 17 00:00:00 2001 From: mattae Date: Wed, 17 Apr 2024 11:12:14 +0100 Subject: [PATCH 07/11] Fix tag --- src/views/Home.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/views/Home.js b/src/views/Home.js index 69c58fb..970559d 100644 --- a/src/views/Home.js +++ b/src/views/Home.js @@ -1,16 +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 = () => { - const { apiVersion } = useConfig(); + const {apiVersion} = useConfig(); return (

{i18n.t('Home')}

DHIS2 Web App Academy 2024

-

{i18n.t('API_VERSION', {apiVersion})}

+ {i18n.t('API_VERSION', {apiVersion})}
) } From febcfa21e2d4ad4e44440f54a2029b1748ab4073 Mon Sep 17 00:00:00 2001 From: mattae Date: Wed, 17 Apr 2024 12:34:00 +0100 Subject: [PATCH 08/11] Implement alerts --- src/views/Form.js | 224 ++++++++++++++++++++++++---------------------- 1 file changed, 119 insertions(+), 105 deletions(-) diff --git a/src/views/Form.js b/src/views/Form.js index 219b08a..e23c5a8 100644 --- a/src/views/Form.js +++ b/src/views/Form.js @@ -1,3 +1,4 @@ +import { useAlert } from '@dhis2/app-runtime'; import { createEqualTo, composeValidators, @@ -27,129 +28,142 @@ 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 {Field, Form: RFForm} = ReactFinalForm -export const Form = () => ( -
-

Form

+export const Form = () => { + const {show} = useAlert( + ({message}) => message, + ({type}) => + type === 'error' ? {critical: true} : {success: true} + ) - - {({handleSubmit}) => ( -
-
- -
-
-
+ const alertValues = (values) => { + const value = JSON.stringify(values, null, 2) + let type = 'info'; + if (values.title === 'Professor') { + type = 'error' + } + show({message: value, type}) + } + + return ( +
+

Form

+ + + {({handleSubmit}) => ( + +
+ +
+
+
+ +
+
+ +
+
+
-
+
-
-
- -
-
- -
-
- -
-
+
+ +
+
+ +
-
- -
- -
- - )} - -
-) +
+ +
+ + )} + +
+ ) +} From 09e9d4524ee2c51c7a5f0270c21987aed90714c7 Mon Sep 17 00:00:00 2001 From: mattae Date: Wed, 17 Apr 2024 14:54:04 +0100 Subject: [PATCH 09/11] Implement Runtime useDataQuery --- i18n/en.pot | 9 +++++++-- i18n/fr.po | 2 ++ src/views/Attributes.js | 24 ++++++++++++++++++++++-- 3 files changed, 31 insertions(+), 4 deletions(-) diff --git a/i18n/en.pot b/i18n/en.pot index 5d6c998..b80c433 100644 --- a/i18n/en.pot +++ b/i18n/en.pot @@ -5,8 +5,13 @@ 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:59:53.448Z\n" -"PO-Revision-Date: 2024-04-17T09:59:53.448Z\n" +"POT-Creation-Date: 2024-04-17T12:51:20.728Z\n" +"PO-Revision-Date: 2024-04-17T12:51:20.729Z\n" + +msgctxt "INFO" + +msgid "ATTR_INFO" +msgstr "Attributes visible to {{name}} ({{email}})" msgid "Home" msgstr "Home" diff --git a/i18n/fr.po b/i18n/fr.po index fc18ff8..44fa3a4 100644 --- a/i18n/fr.po +++ b/i18n/fr.po @@ -12,3 +12,5 @@ msgid "Home" msgstr "Maison" msgid "API_VERSION" msgstr "Exécution sur la version API {{apiVersion}}" +msgid "ATTR_INFO" +msgstr "Attributs visibles par {{name}} ({{email}})" diff --git a/src/views/Attributes.js b/src/views/Attributes.js index 52e2f3d..43e5d93 100644 --- a/src/views/Attributes.js +++ b/src/views/Attributes.js @@ -1,3 +1,5 @@ +import { useDataQuery } from '@dhis2/app-runtime' +import i18n from '@dhis2/d2-i18n' import { CenteredContent, CircularLoader, @@ -10,12 +12,25 @@ import { TableHead } from '@dhis2/ui' import React from 'react' -import { useGetAttributes } from '../hooks/index.js' + +const PAGE_SIZE = 5 +const query = { + attributes: { + resource: 'attributes', + params: { + order: 'displayName:desc', + pageSize: PAGE_SIZE, + }, + }, + users: { + resource: 'me' + } +} 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 @@ -24,9 +39,14 @@ export const Attributes = () => { if (error) { return {error} } + console.log('Users', data?.users) + const name = data?.users?.name; + const email = data?.users?.email; + return (

Attributes

+

{i18n.t('ATTR_INFO', {name, email})}

{data?.attributes?.attributes && ( From 4d1f4c2781498004bbdb314bdfec413debc638df Mon Sep 17 00:00:00 2001 From: mattae Date: Wed, 17 Apr 2024 15:50:35 +0100 Subject: [PATCH 10/11] Update translations and fixes --- i18n/en.pot | 12 ++++++++---- i18n/fr.po | 5 +++++ package.json | 2 +- src/views/Attributes.js | 23 ++++++++++++++--------- 4 files changed, 28 insertions(+), 14 deletions(-) diff --git a/i18n/en.pot b/i18n/en.pot index b80c433..614c656 100644 --- a/i18n/en.pot +++ b/i18n/en.pot @@ -5,14 +5,18 @@ 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-17T12:51:20.728Z\n" -"PO-Revision-Date: 2024-04-17T12:51:20.729Z\n" - -msgctxt "INFO" +"POT-Creation-Date: 2024-04-17T14:30:40.931Z\n" +"PO-Revision-Date: 2024-04-17T14:30:40.931Z\n" msgid "ATTR_INFO" msgstr "Attributes visible to {{name}} ({{email}})" +msgid "YES" +msgstr "Yes" + +msgid "NO" +msgstr "No" + msgid "Home" msgstr "Home" diff --git a/i18n/fr.po b/i18n/fr.po index 44fa3a4..583e9f2 100644 --- a/i18n/fr.po +++ b/i18n/fr.po @@ -14,3 +14,8 @@ msgid "API_VERSION" msgstr "Exécution sur la version API {{apiVersion}}" msgid "ATTR_INFO" msgstr "Attributs visibles par {{name}} ({{email}})" +msgid "YES" +msgstr "Oui" + +msgid "NO" +msgstr "Non" 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/views/Attributes.js b/src/views/Attributes.js index 43e5d93..9828846 100644 --- a/src/views/Attributes.js +++ b/src/views/Attributes.js @@ -20,17 +20,21 @@ const query = { params: { order: 'displayName:desc', pageSize: PAGE_SIZE, + fields: ['displayName', 'unique', 'id'] }, }, users: { - resource: 'me' + resource: 'me', + params: { + fields: ['name', 'email'] + } } } 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 } = useDataQuery(query) + const {loading, error, data} = useDataQuery(query) if (loading) { return @@ -39,9 +43,9 @@ export const Attributes = () => { if (error) { return {error} } - console.log('Users', data?.users) - const name = data?.users?.name; - const email = data?.users?.email; + const user = data?.users; + const name = user?.name; + const email = user?.email; return (
@@ -58,10 +62,11 @@ export const Attributes = () => { - {data.attributes.attributes.map((attr) => { - return - {attr.displayName} - {attr.unique ? 'Yes' : 'No'} + {data.attributes.attributes.map((attribute) => { + const {id, displayName, unique} = attribute; + return + {displayName} + {unique ? i18n.t('YES') : i18n.t('NO')} })} From 2d93291ade83679b828762825a7d24b3a5b489af Mon Sep 17 00:00:00 2001 From: mattae Date: Thu, 18 Apr 2024 10:30:10 +0100 Subject: [PATCH 11/11] Update attributes implementation --- i18n/en.pot | 48 ++++++++++--- i18n/fr.po | 31 +++++++++ src/views/Attributes.js | 150 ++++++++++++++++++++++++++++++++++------ 3 files changed, 199 insertions(+), 30 deletions(-) diff --git a/i18n/en.pot b/i18n/en.pot index 614c656..4050eb5 100644 --- a/i18n/en.pot +++ b/i18n/en.pot @@ -5,20 +5,48 @@ 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-17T14:30:40.931Z\n" -"PO-Revision-Date: 2024-04-17T14:30:40.931Z\n" +"POT-Creation-Date: 2024-04-17T09:33:24.538Z\n" +"PO-Revision-Date: 2024-04-17T09:33:24.538Z\n" +msgid "Home" +msgstr "Maison" +msgid "API_VERSION" +msgstr "Exécution sur la version API {{apiVersion}}" msgid "ATTR_INFO" -msgstr "Attributes visible to {{name}} ({{email}})" - +msgstr "Attributs visibles par {{name}} ({{email}})" msgid "YES" -msgstr "Yes" +msgstr "Oui" msgid "NO" -msgstr "No" +msgstr "Non" -msgid "Home" -msgstr "Home" +msgid "ADD_ATTRIBUTE" +msgstr "Ajouter un attribut" + +msgid "ATTR_TYPE" +msgstr "Type de valeur" + +msgid "ATTR_NAME" +msgstr "Nom d'attribut" + +msgid "ATTR_NAME_SHORT" +msgstr "Nom" + +msgid "ATTR_UNIQUE" +msgstr "Unique" + +msgid "ATTR_TYPE_TEXT" +msgstr "Texte" + +msgid "ATTR_TYPE_NUMBER" +msgstr "Nombre" + +msgid "ATTR_CREATED" +msgstr "Un attribut avec l'ID {{ID}} a été créé" + +msgid "SAVE" +msgstr "Sauvegarder" + +msgid "ATTR_ACTIONS" +msgstr "Actions" -msgid "API_VERSION" -msgstr "Running on API Version {{apiVersion}}" diff --git a/i18n/fr.po b/i18n/fr.po index 583e9f2..4050eb5 100644 --- a/i18n/fr.po +++ b/i18n/fr.po @@ -19,3 +19,34 @@ msgstr "Oui" msgid "NO" msgstr "Non" + +msgid "ADD_ATTRIBUTE" +msgstr "Ajouter un attribut" + +msgid "ATTR_TYPE" +msgstr "Type de valeur" + +msgid "ATTR_NAME" +msgstr "Nom d'attribut" + +msgid "ATTR_NAME_SHORT" +msgstr "Nom" + +msgid "ATTR_UNIQUE" +msgstr "Unique" + +msgid "ATTR_TYPE_TEXT" +msgstr "Texte" + +msgid "ATTR_TYPE_NUMBER" +msgstr "Nombre" + +msgid "ATTR_CREATED" +msgstr "Un attribut avec l'ID {{ID}} a été créé" + +msgid "SAVE" +msgstr "Sauvegarder" + +msgid "ATTR_ACTIONS" +msgstr "Actions" + diff --git a/src/views/Attributes.js b/src/views/Attributes.js index 9828846..d0bef98 100644 --- a/src/views/Attributes.js +++ b/src/views/Attributes.js @@ -1,26 +1,32 @@ -import { useDataQuery } from '@dhis2/app-runtime' +import { useAlert, useDataMutation, useDataQuery } from '@dhis2/app-runtime' import i18n from '@dhis2/d2-i18n' import { + Button, CenteredContent, CircularLoader, DataTable, DataTableCell, DataTableColumnHeader, DataTableRow, + hasValue, + InputFieldFF, NoticeBox, + ReactFinalForm, + SingleSelectFieldFF, TableBody, - TableHead + TableHead, + Pagination } from '@dhis2/ui' import React from 'react' +import styles from './Form.module.css' -const PAGE_SIZE = 5 const query = { attributes: { resource: 'attributes', params: { - order: 'displayName:desc', - pageSize: PAGE_SIZE, - fields: ['displayName', 'unique', 'id'] + order: 'created:desc', + pageSize: 5, + fields: ['displayName', 'unique', 'id', 'valueType'] }, }, users: { @@ -31,10 +37,53 @@ const query = { } } +const mutation = { + resource: 'attributes', + type: 'create', + data: ({value}) => value +} + +const deleteMutation = { + resource: 'attributes', + type: 'delete', + id: ({id}) => id +} + +const {Field, Form: RFForm} = ReactFinalForm + export const Attributes = () => { + + const [mutate, {loading: saving, error: mutateError, data: response}] = useDataMutation(mutation) + const [delMutation, {loading: deleteLoading}] = useDataMutation(deleteMutation, { + onComplete: () => refetch() + }) + + const {show} = useAlert( + ({message}) => message, + ({type = 'info'}) => + type === 'error' ? {critical: true} : {success: true} + ) + + const deleteAttribute = (id) => { + delMutation({id}) + } + + const saveAttribute = (value) => { + console.log('Response', mutateError, response) + mutate({value}) + let type = 'info'; + let message = i18n.t('ATTR_CREATED', {ID: response?.uid}) + if (mutateError) { + type = 'error'; + message = mutateError + } + + show({message, type}) + refetch() + } // we get the data using a custom hook // we will update this implementation after learning about app-runtime - const {loading, error, data} = useDataQuery(query) + const {loading, error, data, refetch} = useDataQuery(query) if (loading) { return @@ -46,32 +95,93 @@ export const Attributes = () => { const user = data?.users; const name = user?.name; const email = user?.email; - return (

Attributes

{i18n.t('ATTR_INFO', {name, email})}

- {data?.attributes?.attributes && ( - - - - Name - - - Unique - - + + + + {i18n.t('ATTR_NAME_SHORT')} + + + {i18n.t('ATTR_UNIQUE')} + + + {i18n.t('ATTR_TYPE')} + + + {i18n.t('ATTR_ACTIONS')} + + + {data?.attributes?.attributes && ( {data.attributes.attributes.map((attribute) => { - const {id, displayName, unique} = attribute; + const {id, displayName, unique, valueType} = attribute; return {displayName} {unique ? i18n.t('YES') : i18n.t('NO')} + {valueType} + + + })} - + )} + +
+
+

{i18n.t('ADD_ATTRIBUTE')}

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