Merge pull request #1396 from NSUWAL123/test-project-details-mobile

Test project details mobile
hotosm · Mar 28, 2024 · 217aaa3 · 217aaa3
2 parents f2ce568 + 0d335ad
commit 217aaa3
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 51 deletions.
diff --git a/src/frontend/src/api/Project.js b/src/frontend/src/api/Project.js
@@ -144,9 +144,11 @@ export const GenerateProjectTiles = (url, payload) => {
     const generateProjectTiles = async (url, payload) => {
       try {
         const response = await CoreModules.axios.get(url);
+        console.log(response, 'response-mbtiles');
         dispatch(GetTilesList(`${import.meta.env.VITE_API_URL}/projects/tiles_list/${payload}/`));
         dispatch(ProjectActions.SetGenerateProjectTilesLoading(false));
       } catch (error) {
+        console.log(error, 'error-mbtiles');
         dispatch(ProjectActions.SetGenerateProjectTilesLoading(false));
       } finally {
         dispatch(ProjectActions.SetGenerateProjectTilesLoading(false));

diff --git a/src/frontend/src/api/ProjectTaskStatus.js b/src/frontend/src/api/ProjectTaskStatus.js
@@ -14,12 +14,14 @@ const UpdateTaskStatus = (url, style, existingData, currentProjectId, feature, m
 
         const response = await CoreModules.axios.post(url, body, { params });
         const findIndexForUpdation = existingData[index].taskBoundries.findIndex((obj) => obj.id == response.data.id);
+        console.log(response, 'response');
 
         let project_tasks = [...existingData[index].taskBoundries];
         project_tasks[findIndexForUpdation] = {
           ...response.data,
           task_status: task_priority_str[response.data.task_status],
         };
+        console.log(project_tasks, 'project_tasks');
 
         let updatedProject = [...existingData];
         const finalProjectOBJ = {
@@ -29,6 +31,7 @@ const UpdateTaskStatus = (url, style, existingData, currentProjectId, feature, m
         updatedProject[index] = finalProjectOBJ;
 
         dispatch(ProjectActions.SetProjectTaskBoundries(updatedProject));
+        console.log(updatedProject, 'updatedProject');
 
         await feature.setStyle(style);
         dispatch(CommonActions.SetLoading(false));
@@ -41,6 +44,7 @@ const UpdateTaskStatus = (url, style, existingData, currentProjectId, feature, m
           }),
         );
       } catch (error) {
+        console.log(error, 'error');
         dispatch(CommonActions.SetLoading(false));
         dispatch(
           HomeActions.SetSnackBar({

diff --git a/src/frontend/src/utilities/CustomDrawer.jsx b/src/frontend/src/utilities/CustomDrawer.jsx
@@ -9,34 +9,12 @@ import { createLoginWindow, revokeCookie } from '@/utilfunctions/login';
 import { CommonActions } from '@/store/slices/CommonSlice';
 import { LoginActions } from '@/store/slices/LoginSlice';
 import { ProjectActions } from '@/store/slices/ProjectSlice';
+import DebugConsole from '@/utilities/DebugConsole';
 
 export default function CustomDrawer({ open, placement, size, type, onClose, onSignOut, setOpen }) {
-  const [showDebugConsole, setShowDebugConsole] = useState(false);
-  const [logs, setLogs] = useState([]);
-  useEffect(() => {
-    if (import.meta.env.MODE === 'development') {
-      // Override console.log to capture logs
-      const originalConsoleLog = console.log;
-      console.log = (...args) => {
-        originalConsoleLog.apply(console, args);
-        setLogs((prevLogs) => [
-          ...prevLogs,
-          args.map((arg) => (typeof arg === 'object' ? JSON.stringify(arg) : arg)).join(' '),
-        ]);
-      };
-
-      // Restore original console.log when component unmounts
-      return () => {
-        console.log = originalConsoleLog;
-      };
-    }
-  }, []);
-  const toggleDebugConsole = () => {
-    setShowDebugConsole((prev) => !prev);
-  };
-
   const defaultTheme = CoreModules.useAppSelector((state) => state.theme.hotTheme);
   const dispatch = CoreModules.useAppDispatch();
+  const [showDebugConsole, setShowDebugConsole] = useState(false);
 
   const onMouseEnter = (event) => {
     const element = document.getElementById(`text${event.target.id}`);
@@ -138,33 +116,7 @@ export default function CustomDrawer({ open, placement, size, type, onClose, onS
 
   return (
     <div>
-      {import.meta.env.MODE === 'development' && (
-        <div>
-          <div
-            style={{
-              position: 'fixed',
-              bottom: 0,
-              width: '100%',
-              height: '33vh',
-              backgroundColor: 'white',
-              border: '1px solid',
-              padding: '16px 32px',
-              display: showDebugConsole ? 'flex' : 'none',
-              flexDirection: 'column',
-              zIndex: 10000,
-              overflowY: 'auto',
-            }}
-          >
-            <button style={{ alignSelf: 'flex-end', marginBottom: '10px' }} onClick={toggleDebugConsole}>
-              Close
-            </button>
-            {/* Display console logs */}
-            {logs.map((log, index) => (
-              <p key={index}>{log}</p>
-            ))}
-          </div>
-        </div>
-      )}
+      <DebugConsole showDebugConsole={showDebugConsole} setShowDebugConsole={setShowDebugConsole} />
       <React.Fragment>
         <SwipeableDrawer swipeAreaWidth={0} onOpen={onClose} anchor={'right'} open={open} onClose={onClose}>
           <CoreModules.Stack sx={{ display: 'flex', flexDirection: 'column', padding: 3 }}>

diff --git a/src/frontend/src/utilities/DebugConsole.tsx b/src/frontend/src/utilities/DebugConsole.tsx
@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+
+type DebugConsolePropsType = {
+  showDebugConsole: boolean;
+  setShowDebugConsole: (showStatus: boolean) => void;
+};
+
+const DebugConsole = ({ showDebugConsole, setShowDebugConsole }: DebugConsolePropsType) => {
+  const [logs, setLogs] = useState([]);
+  useEffect(() => {
+    if (import.meta.env.MODE === 'development') {
+      // Override console.log to capture logs
+      const originalConsoleLog = console.log;
+      console.log = (...args) => {
+        originalConsoleLog.apply(console, args);
+        setLogs((prevLogs) => [
+          ...prevLogs,
+          args.map((arg) => (typeof arg === 'object' ? JSON.stringify(arg) : arg)).join(' '),
+        ]);
+      };
+
+      // Restore original console.log when component unmounts
+      return () => {
+        console.log = originalConsoleLog;
+      };
+    }
+  }, []);
+
+  return (
+    <div>
+      {import.meta.env.MODE === 'development' && (
+        <div>
+          <div
+            className={`fmtm-fixed fmtm-bottom-0 fmtm-w-full fmtm-h-[33vh] fmtm-bg-white fmtm-border fmtm-px-4 fmtm-py-8 fmtm-flex-col fmtm-z-[1000] fmtm-overflow-y-auto ${
+              showDebugConsole ? '!fmtm-flex' : '!fmtm-hidden'
+            }`}
+          >
+            <button style={{ alignSelf: 'flex-end', marginBottom: '10px' }} onClick={() => setShowDebugConsole(false)}>
+              Close
+            </button>
+            {logs.map((log, index) => (
+              <p key={index}>{log}</p>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DebugConsole;
diff --git a/src/frontend/src/views/ProjectDetailsV2.tsx b/src/frontend/src/views/ProjectDetailsV2.tsx
@@ -42,6 +42,7 @@ import Comments from '@/components/ProjectDetailsV2/Comments';
 import { Geolocation } from '@/utilfunctions/Geolocation';
 import Instructions from '@/components/ProjectDetailsV2/Instructions';
 import { readFileFromOPFS } from '@/api/Files';
+import DebugConsole from '@/utilities/DebugConsole';
 
 const Home = () => {
   const dispatch = CoreModules.useAppDispatch();
@@ -237,9 +238,12 @@ const Home = () => {
 
     return () => {};
   }, [projectOpfsBasemapPath]);
+  const [showDebugConsole, setShowDebugConsole] = useState(false);
 
   return (
     <div className="fmtm-bg-[#f5f5f5]" style={{ height: '100%' }}>
+      {/* only used to display debug console */}
+      <DebugConsole showDebugConsole={showDebugConsole} setShowDebugConsole={setShowDebugConsole} />
       {/* Customized Modal For Generate Tiles */}
       <div>
         <GenerateBasemap projectInfo={state.projectInfo} />
@@ -377,6 +381,15 @@ const Home = () => {
                 windowSize.width <= 640 ? 'fmtm-h-[100vh]' : 'fmtm-h-full'
               }`}
             >
+              {import.meta.env.MODE === 'development' && (
+                <div className="fmtm-absolute fmtm-top-16 fmtm-left-4 fmtm-z-50">
+                  <Button
+                    btnText="Toggle Console"
+                    btnType="secondary"
+                    onClick={() => setShowDebugConsole(!showDebugConsole)}
+                  />
+                </div>
+              )}
               <LayerSwitcherControl
                 visible={customBasemapData ? 'custom' : 'outdoors'}
                 pmTileLayerData={customBasemapData}