feat: build governance UI

Chia-Network · Jun 10, 2022 · 8e15fc8 · 8e15fc8
1 parent 0e1eff2
commit 8e15fc8
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 74 deletions.
diff --git a/src/components/blocks/LeftNav.js b/src/components/blocks/LeftNav.js
@@ -73,6 +73,7 @@ const LeftNav = withTheme(({ children }) => {
   const [createOrgIsVisible, setCreateOrgIsVisible] = useState(false);
   const intl = useIntl();
   const { readOnlyMode } = useSelector(state => state.app);
+  const { isGovernance } = useSelector(state => state.climateWarehouse);
   const dispatch = useDispatch();
   const [myOrgUid, isMyOrgPending] = useSelector(store => getHomeOrg(store));
 
@@ -173,14 +174,14 @@ const LeftNav = withTheme(({ children }) => {
               </ButtonText>
             </StyledTitleContainer>
             {!myOrgIsNotCreated && !isMyOrgPending && (
-              <>
-                <MenuItem selected={isOrganizationPage} to="/organization">
-                  <FormattedMessage id="my-organization" />
-                </MenuItem>
-                <MenuItem selected={isGovernancePage} to="/governance">
-                  <FormattedMessage id="governance" />
-                </MenuItem>
-              </>
+              <MenuItem selected={isOrganizationPage} to="/organization">
+                <FormattedMessage id="my-organization" />
+              </MenuItem>
+            )}
+            {!myOrgIsNotCreated && !isMyOrgPending && isGovernance && (
+              <MenuItem selected={isGovernancePage} to="/governance">
+                <FormattedMessage id="governance" />
+              </MenuItem>
             )}
             {myOrgIsNotCreated && (
               <MenuItem

diff --git a/src/pages/Governance/index.js b/src/pages/Governance/index.js
@@ -50,9 +50,9 @@ const StyledButtonContainer = styled.div`
 const Governance = () => {
   const intl = useIntl();
   const [picklistsTextarea, setPicklistsTextarea] = useState(
-    JSON.stringify('{}'),
+    JSON.stringify({}),
   );
-  const [orgListTextarea, setOrgListTextarea] = useState(JSON.stringify('[]'));
+  const [orgListTextarea, setOrgListTextarea] = useState(JSON.stringify([]));
   const { pickLists, governanceOrgList } = useSelector(
     store => store.climateWarehouse,
   );
@@ -109,77 +109,87 @@ const Governance = () => {
     }
   };
 
+  const isSendButtonDisabled = !arePickListsValid || !isOrgListValid;
+  const isGovernanceInitiated = false;
+  const isGovernancePending = false;
+
   return (
     <StyledGovernanceContainer>
       <H2>
         <FormattedMessage id="governance" />
       </H2>
-      <StyledJSONSectionContainer>
-        <StyledJSONContainer>
-          <div>
-            <H4>
-              <FormattedMessage id="picklists" />
-            </H4>
-            {arePickListsValid && (
-              <Body size="Small" color="green">
-                <FormattedMessage id="json-is-valid" />
-              </Body>
-            )}
-            {!arePickListsValid && (
-              <Body size="Small" color="red">
-                <FormattedMessage id="json-not-valid" />
-              </Body>
-            )}
-          </div>
-          <Textarea
-            size={TextareaSizeEnum.large}
-            placeholder={intl.formatMessage({
-              id: 'picklists',
-            })}
-            value={prettyfiedPicklists}
-            onChange={e => setPicklistsTextarea(e.target.value)}
-            state={TextareaStateEnum.default}
+      {isGovernanceInitiated && !isGovernancePending && (
+        <StyledJSONSectionContainer>
+          <StyledJSONContainer>
+            <div>
+              <H4>
+                <FormattedMessage id="picklists" />
+              </H4>
+              {arePickListsValid && (
+                <Body size="Small" color="green">
+                  <FormattedMessage id="json-is-valid" />
+                </Body>
+              )}
+              {!arePickListsValid && (
+                <Body size="Small" color="red">
+                  <FormattedMessage id="json-not-valid" />
+                </Body>
+              )}
+            </div>
+            <Textarea
+              size={TextareaSizeEnum.large}
+              placeholder={intl.formatMessage({
+                id: 'picklists',
+              })}
+              value={prettyfiedPicklists}
+              onChange={e => setPicklistsTextarea(e.target.value)}
+              state={TextareaStateEnum.default}
+            />
+          </StyledJSONContainer>
+          <StyledJSONContainer>
+            <div>
+              <H4>
+                <FormattedMessage id="all-organizations" />
+              </H4>
+              {isOrgListValid && (
+                <Body size="Small" color="green">
+                  <FormattedMessage id="json-is-valid" />
+                </Body>
+              )}
+              {!isOrgListValid && (
+                <Body size="Small" color="red">
+                  <FormattedMessage id="json-not-valid" />
+                </Body>
+              )}
+            </div>
+            <Textarea
+              size={TextareaSizeEnum.large}
+              placeholder={intl.formatMessage({
+                id: 'all-organizations',
+              })}
+              value={prettyfiedOrgList}
+              onChange={e => setOrgListTextarea(e.target.value)}
+              state={TextareaStateEnum.default}
+            />
+          </StyledJSONContainer>
+        </StyledJSONSectionContainer>
+      )}
+      <StyledButtonContainer>
+        {!isGovernanceInitiated && (
+          <PrimaryButton
+            label={intl.formatMessage({ id: 'initiate-governance' })}
+            size="large"
+            onClick={() => console.log('pac pac')}
           />
-        </StyledJSONContainer>
-        <StyledJSONContainer>
-          <div>
-            <H4>
-              <FormattedMessage id="all-organizations" />
-            </H4>
-            {isOrgListValid && (
-              <Body size="Small" color="green">
-                <FormattedMessage id="json-is-valid" />
-              </Body>
-            )}
-            {!isOrgListValid && (
-              <Body size="Small" color="red">
-                <FormattedMessage id="json-not-valid" />
-              </Body>
-            )}
-          </div>
-          <Textarea
-            size={TextareaSizeEnum.large}
-            placeholder={intl.formatMessage({
-              id: 'all-organizations',
-            })}
-            value={prettyfiedOrgList}
-            onChange={e => setOrgListTextarea(e.target.value)}
-            state={TextareaStateEnum.default}
+        )}
+        {isGovernanceInitiated && !isGovernancePending && (
+          <PrimaryButton
+            label={intl.formatMessage({ id: 'send' })}
+            size="large"
+            onClick={handleOnSend}
+            disabled={isSendButtonDisabled}
           />
-        </StyledJSONContainer>
-      </StyledJSONSectionContainer>
-      <StyledButtonContainer>
-        {/* <PrimaryButton
-          label={intl.formatMessage({ id: 'initiate-governance' })}
-          size="large"
-          onClick={() => console.log('pac pac')}
-        /> */}
-        <PrimaryButton
-          disabled={!isOrgListValid && !arePickListsValid}
-          label={intl.formatMessage({ id: 'Send' })}
-          size="large"
-          onClick={handleOnSend}
-        />
+        )}
       </StyledButtonContainer>
     </StyledGovernanceContainer>
   );

diff --git a/src/store/actions/climateWarehouseActions.js b/src/store/actions/climateWarehouseActions.js
@@ -54,6 +54,7 @@ export const actions = keyMirror(
   'GET_MY_PROJECTS',
   'SET_MY_ORG_UID',
   'GET_GOVERNANCE_ORG_LIST',
+  'SET_IS_GOVERNANCE',
 );
 
 const getClimateWarehouseTable = (
@@ -160,6 +161,9 @@ export const getOrganizationData = () => {
         const results = await response.json();
 
         dispatch(setReadOnly(response.headers.get('cw-read-only') === 'true'));
+        dispatch(
+          setIsGovernance(response.headers.get('x-governance-body') === 'true'),
+        );
 
         const myOrgUid = getMyOrgUid(results);
         dispatch(setMyOrgUid(myOrgUid));
@@ -179,6 +183,11 @@ export const getOrganizationData = () => {
   };
 };
 
+export const setIsGovernance = isGovernance => ({
+  type: actions.SET_IS_GOVERNANCE,
+  payload: isGovernance,
+});
+
 export const getConflictsData = () => {
   return async dispatch => {
     dispatch(activateProgressIndicator);

diff --git a/src/store/reducers/climateWarehouseReducer.js b/src/store/reducers/climateWarehouseReducer.js
@@ -27,13 +27,17 @@ const initialState = {
   totalUnitsPages: null,
   myOrgUid: null,
   governanceOrgList: null,
+  isGovernance: null,
 };
 
 const climateWarehouseReducer = (state = initialState, action) => {
   switch (action.type) {
     case climateWarehouseActions.GET_ORGANIZATIONS:
       return u({ organizations: action.payload }, state);
 
+    case climateWarehouseActions.SET_IS_GOVERNANCE:
+      return u({ isGovernance: action.payload }, state);
+
     case climateWarehouseActions.GET_GOVERNANCE_ORG_LIST:
       return u({ governanceOrgList: action.payload }, state);