| {group.name} |
-
+
Edit
diff --git a/ui/src/app/admin/container/NewGroup.js b/ui/src/app/admin/container/NewGroup.js
index ab5e7d3ee..1fabd0508 100644
--- a/ui/src/app/admin/container/NewGroup.js
+++ b/ui/src/app/admin/container/NewGroup.js
@@ -4,7 +4,7 @@ import { Prompt, useHistory } from 'react-router';
import Translate from '../../i18n/components/translate';
import { useGroups } from '../hooks';
import { Schema } from '../../form/Schema';
-
+import { FormManager } from '../../form/FormManager';
import { GroupForm } from '../component/GroupForm';
export function NewGroup() {
@@ -14,8 +14,8 @@ export function NewGroup() {
const [blocking, setBlocking] = React.useState(false);
- async function save(metadata) {
- await post(``, metadata);
+ async function save(group) {
+ await post(``, group);
if (response.ok) {
gotoDetail({ refresh: true });
}
@@ -30,8 +30,6 @@ export function NewGroup() {
history.push(`/groups`, state);
};
- const [group, setGroup] = React.useState({});
-
return (
- {(schema) => }
+ {(schema) =>
+
+ {(data, errors) =>
+ save(data)}
+ onCancel={() => cancel()} />}
+ }
diff --git a/ui/src/app/admin/hoc/GroupProvider.js b/ui/src/app/admin/hoc/GroupProvider.js
new file mode 100644
index 000000000..83674e51e
--- /dev/null
+++ b/ui/src/app/admin/hoc/GroupProvider.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { useGroup } from '../hooks';
+
+export function GroupProvider({ id, children }) {
+
+ const [group, setGroup] = React.useState();
+
+
+ const { get, response } = useGroup({
+ cachePolicy: 'no-cache'
+ });
+
+ async function loadGroup() {
+ const group = await get(``);
+ if (response.ok) {
+ setGroup(group);
+ }
+ }
+
+ /*eslint-disable react-hooks/exhaustive-deps*/
+ React.useEffect(() => { loadGroup() }, []);
+
+ return (<>{children(group)});
+}
\ No newline at end of file
diff --git a/ui/src/app/admin/hooks.js b/ui/src/app/admin/hooks.js
index d071fb5e4..96a391944 100644
--- a/ui/src/app/admin/hooks.js
+++ b/ui/src/app/admin/hooks.js
@@ -6,9 +6,13 @@ export function useGroups () {
}
export function useGroup() {
- return useFetch(`${API_BASE_PATH}/group`);
+ return useFetch(`/group.json`);
}
+/*export function useGroup() {
+ return useFetch(`${API_BASE_PATH}/group`);
+}*/
+
export function useGroupUiSchema () {
return {
diff --git a/ui/src/app/form/FormManager.js b/ui/src/app/form/FormManager.js
new file mode 100644
index 000000000..17691970c
--- /dev/null
+++ b/ui/src/app/form/FormManager.js
@@ -0,0 +1,107 @@
+import React from 'react';
+
+const initialState = {
+ data: {},
+ errors: []
+};
+
+const FormContext = React.createContext();
+
+const { Provider, Consumer } = FormContext;
+
+export const FormActions = {
+ SET_FORM_ERROR: 'set form error',
+ SET_FORM_DATA: 'set form data'
+};
+
+export const setFormDataAction = (payload) => {
+ return {
+ type: FormActions.SET_FORM_DATA,
+ payload
+ }
+}
+
+export const setFormErrorAction = (errors) => {
+ return {
+ type: FormActions.SET_FORM_ERROR,
+ payload: errors
+ }
+}
+
+function reducer(state, action) {
+ switch (action.type) {
+
+ case FormActions.SET_FORM_ERROR:
+ return {
+ ...state,
+ errors: action.payload
+ };
+ case FormActions.SET_FORM_DATA:
+ return {
+ ...state,
+ data: action.payload
+ };
+ default:
+ return state;
+ }
+}
+
+/*eslint-disable react-hooks/exhaustive-deps*/
+function FormManager({ children, initial = {} }) {
+
+ const data = {
+ ...initial
+ };
+
+ const [state, dispatch] = React.useReducer(reducer, {
+ ...initialState,
+ data
+ });
+
+
+ const contextValue = React.useMemo(() => ({ state, dispatch }), [state, dispatch]);
+
+ return (
+
+ {children(state.data, state.errors)}
+
+ );
+}
+
+function useFormErrors() {
+ const { state } = React.useContext(FormContext);
+ const { errors } = state;
+
+ return errors;
+}
+
+function useFormContext() {
+ return React.useContext(FormContext);
+}
+
+function useFormDispatcher() {
+ const { dispatch } = useFormContext();
+ return dispatch;
+}
+
+function useFormState() {
+ const { state } = useFormContext();
+ return state;
+}
+
+function useFormData() {
+ const { data } = useFormContext();
+ return data;
+}
+
+export {
+ useFormErrors,
+ useFormContext,
+ useFormDispatcher,
+ useFormState,
+ useFormData,
+ FormManager,
+ FormContext,
+ Provider as FormProvider,
+ Consumer as FormConsumer
+};
\ No newline at end of file
diff --git a/ui/src/app/metadata/editor/MetadataEditorNav.js b/ui/src/app/metadata/editor/MetadataEditorNav.js
index bfae1bb73..61a67a510 100644
--- a/ui/src/app/metadata/editor/MetadataEditorNav.js
+++ b/ui/src/app/metadata/editor/MetadataEditorNav.js
@@ -5,15 +5,12 @@ import Dropdown from 'react-bootstrap/Dropdown';
import Button from 'react-bootstrap/Button';
import Translate from '../../i18n/components/translate';
-// import { usePagesWithErrors } from '../hoc/MetadataFormContext';
export function MetadataEditorNav ({ definition, current, children, format = 'tabs', onNavigate }) {
const [routes, setRoutes] = React.useState([]);
const [active, setActive] = React.useState(null);
- // const errors = usePagesWithErrors(definition);
-
React.useEffect(() => {
setRoutes(definition ? definition.steps.map(step => ({ path: step.id, label: step.label })) : [])
}, [definition]);
|