feat: Build a container block that shows all the staging operations w…

…ith a commit button #116
Chia-Network · Dec 27, 2021 · a55f522 · a55f522
1 parent 3366efe
commit a55f522
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 8 deletions.
diff --git a/src/components/blocks/StagingDataTable.js b/src/components/blocks/StagingDataTable.js
@@ -76,7 +76,7 @@ const StagingDataTableContainer = styled('div')`
   overflow-x: scroll;
 `;
 
-const ChangeGroupHeader = ({ headings, appStore }) => {
+const ChangeGroupHeader = ({ headings, appStore, onClick }) => {
   return (
     <THead selectedTheme={appStore.theme}>
       <Tr color="gray">
@@ -90,7 +90,9 @@ const ChangeGroupHeader = ({ headings, appStore }) => {
           ))}
         <Th selectedTheme={appStore.theme}>
           <TableCellHeaderText>
-            <MinusIcon width={16} height={16} />
+            <div onClick={onClick}>
+              <MinusIcon width={16} height={16} />
+            </div>
           </TableCellHeaderText>
         </Th>
       </Tr>
@@ -117,7 +119,7 @@ const ChangeGroupItem = ({ headings, data, appStore, color, onClick }) => {
   );
 };
 
-const StagingDataTable = withTheme(({ headings, data }) => {
+const StagingDataTable = withTheme(({ headings, data, deleteStagingData }) => {
   const appStore = useSelector(state => state.app);
   const [getRecord, setRecord] = useState(null);
 
@@ -127,7 +129,11 @@ const StagingDataTable = withTheme(({ headings, data }) => {
         headings &&
         data.map((changeGroup, index) => (
           <Table selectedTheme={appStore.theme} key={index}>
-            <ChangeGroupHeader headings={headings} appStore={appStore} />
+            <ChangeGroupHeader
+              headings={headings}
+              appStore={appStore}
+              onClick={() => deleteStagingData(changeGroup.uuid)}
+            />
             <tbody>
               {changeGroup.action === 'DELETE' && (
                 <ChangeGroupItem

diff --git a/src/pages/Projects/index.js b/src/pages/Projects/index.js
@@ -17,6 +17,7 @@ import {
 import {
   getProjects,
   getStagingData,
+  deleteStagingData,
 } from '../../store/actions/climateWarehouseActions';
 
 const headings = [
@@ -43,10 +44,6 @@ const Projects = withRouter(({ history }) => {
     dispatch(getStagingData({ useMockedResponse: false }));
   }, []);
 
-  useEffect(() => {
-    console.log(climateWarehouseStore.stagingData);
-  }, [climateWarehouseStore.stagingData]);
-
   if (
     !climateWarehouseStore.projects ||
     !climateWarehouseStore.projects.length
@@ -105,6 +102,7 @@ const Projects = withRouter(({ history }) => {
               <StagingDataTable
                 headings={headings}
                 data={climateWarehouseStore.stagingData.projects.staging}
+                deleteStagingData={uuid => dispatch(deleteStagingData(uuid))}
               />
             )}
           </TabPanel>

diff --git a/src/store/actions/climateWarehouseActions.js b/src/store/actions/climateWarehouseActions.js
@@ -121,6 +121,65 @@ export const getStagingData = ({ useMockedResponse = false }) => {
   };
 };
 
+export const commitStagingData = () => {
+  return async dispatch => {
+    try {
+      dispatch(activateProgressIndicator);
+
+      const url = `${constants.API_HOST}/staging/commit`;
+      const payload = {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      };
+
+      const response = await fetch(url, payload);
+
+      if (response.ok) {
+        console.log('yay!');
+        dispatch(getStagingData({ useMockedResponse: false }));
+      } else {
+        dispatch(setGlobalErrorMessage('Staging group could not be deleted'));
+      }
+    } catch {
+      dispatch(setGlobalErrorMessage('Something went wrong...'));
+    } finally {
+      dispatch(deactivateProgressIndicator);
+    }
+  };
+};
+
+export const deleteStagingData = uuid => {
+  return async dispatch => {
+    try {
+      dispatch(activateProgressIndicator);
+
+      const url = `${constants.API_HOST}/staging`;
+      const payload = {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ uuid }),
+      };
+
+      const response = await fetch(url, payload);
+
+      if (response.ok) {
+        console.log('yay!');
+        dispatch(getStagingData({ useMockedResponse: false }));
+      } else {
+        dispatch(setGlobalErrorMessage('Staging group could not be deleted'));
+      }
+    } catch {
+      dispatch(setGlobalErrorMessage('Something went wrong...'));
+    } finally {
+      dispatch(deactivateProgressIndicator);
+    }
+  };
+};
+
 export const postNewProject = data => {
   return async dispatch => {
     try {