Merge pull request #128 from developmentseed/enhance/compare-preselect

Preselect compare map from project explore page
developmentseed · Mar 6, 2024 · 57fa286 · 57fa286
2 parents f39a00e + 60a70cb
commit 57fa286
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 4 deletions.
diff --git a/app/assets/scripts/components/project/header/index.js b/app/assets/scripts/components/project/header/index.js
@@ -7,7 +7,7 @@ import { themeVal, glsp, media, truncated } from '@devseed-ui/theme-provider';
 import { Heading } from '@devseed-ui/typography';
 import { Form } from '@devseed-ui/form';
 import { Button } from '@devseed-ui/button';
-import { FormInput } from '@devseed-ui/form';
+import { FormInput, FormSwitch } from '@devseed-ui/form';
 
 import { ProjectMachineContext } from '../../../fsm/project';
 
@@ -28,9 +28,11 @@ import {
   downloadShareGeotiff,
   getShareLink,
 } from '../../../utils/share-link';
+import logger from '../../../utils/logger';
 import { useAuth } from '../../../context/auth';
 import selectors from '../../../fsm/project/selectors';
 import toasts from '../../common/toasts';
+import { StyledLink } from '../../../styles/links';
 
 const Wrapper = styled.div`
   flex: 1;
@@ -134,6 +136,7 @@ function ProjectPageHeader({ isMediumDown }) {
   const { restApiClient, user, isAuthenticated } = useAuth();
   const [editProjectNameMode, setEditProjectNameMode] = useState(false);
   const [localProjectName, setLocalProjectName] = useState(null);
+  const [isPublished, setIsPublished] = useState(null);
   const actorRef = ProjectMachineContext.useActorRef();
   const displayProjectNameModal = ProjectMachineContext.useSelector(
     selectors.displayProjectNameModal
@@ -197,6 +200,11 @@ function ProjectPageHeader({ isMediumDown }) {
     }
   }, [projectName]);
 
+  useEffect(() => {
+    if (!currentShare) return;
+    setIsPublished(currentShare.published);
+  }, [currentShare]);
+
   // Delays focus
   const [projectNameInputRef, setProjectNameInputFocus] = useFocus(0);
 
@@ -420,6 +428,64 @@ function ProjectPageHeader({ isMediumDown }) {
                 </DropdownItem>
               )}
             </li>
+            {currentShare && (
+              <>
+                <li>
+                  <DropdownItem>
+                    <FormSwitch
+                      name='published'
+                      title='Make share map public'
+                      checked={isPublished}
+                      onChange={async () => {
+                        const newIsPublished = !isPublished;
+                        setIsPublished(newIsPublished);
+
+                        try {
+                          await restApiClient.patch(
+                            `share/${currentShare.uuid}`,
+                            {
+                              published: newIsPublished,
+                            }
+                          );
+                          setIsPublished(newIsPublished);
+                        } catch (err) {
+                          setIsPublished(!newIsPublished);
+                          logger(
+                            'There was an unexpected error updating the exported map.',
+                            err
+                          );
+                          toasts.error(
+                            'There was an unexpected error updating the exported map.'
+                          );
+                        }
+                      }}
+                      textPlacement='right'
+                    >
+                      Publish Share
+                    </FormSwitch>
+                  </DropdownItem>
+                </li>
+                <li>
+                  <DropdownItem
+                    useIcon='resize-center-horizontal'
+                    as={StyledLink}
+                    nonhoverable={!isPublished}
+                    muted={!isPublished}
+                    disabled={!isPublished}
+                    to={
+                      isPublished
+                        ? {
+                            pathname: '/public-maps',
+                            state: { uuid: currentShare.uuid },
+                          }
+                        : null
+                    }
+                  >
+                    Compare map
+                  </DropdownItem>
+                </li>
+              </>
+            )}
           </DropdownBody>
         </>
       </Dropdown>

diff --git a/app/assets/scripts/components/public-maps/index.js b/app/assets/scripts/components/public-maps/index.js
@@ -31,6 +31,7 @@ import toasts from '../common/toasts';
 import { downloadShareGeotiff } from '../../utils/share-link';
 import { StyledLink } from '../../styles/links';
 import { composeMosaicName } from '../compare-map';
+import { useLocation } from 'react-router-dom';
 
 const ITEMS_PER_PAGE = 20;
 
@@ -179,20 +180,23 @@ function RenderRow(share, { restApiClient, compareMaps, setCompareMaps }) {
           type='checkbox'
           name={`select-compare-${share.uuid}`}
           id={`select-compare-${share.uuid}`}
+          hideText
           checked={
             share.uuid &&
             compareMaps.some((compareMap) => compareMap.uuid === share.uuid)
           }
           onChange={() => checkHandler(compareMaps, setCompareMaps, share)}
-        />
+        >
+          Select for comparison
+        </FormCheckable>
       </TableCell>
     </TableRow>
   );
 }
 function RenderSelectedRow(share, { compareMaps, setCompareMaps }) {
   const { side, aoi, checkpoint, model, timeframe, mosaic } = share;
   return (
-    <TableRow key={share.uuid}>
+    <TableRow key={share.uuid || share.side}>
       <TableCell>
         <TableRowHeader>{side}</TableRowHeader>
       </TableCell>
@@ -223,7 +227,8 @@ function RenderSelectedRow(share, { compareMaps, setCompareMaps }) {
 
 function ExportedMapsList() {
   const { apiToken } = useAuth();
-
+  const location = useLocation();
+  const { uuid } = location.state || 'none';
   const [page, setPage] = useState(0);
   const [total, setTotal] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
@@ -255,6 +260,13 @@ function ExportedMapsList() {
   }, [apiToken, page]);
   const twoSharesSelected = compareMaps.filter((c) => c.uuid).length === 2;
 
+  let preSelectedShare = shares.find((s) => s.uuid === uuid);
+  useEffect(() => {
+    if (!preSelectedShare) return;
+    setCompareMaps([{ ...preSelectedShare, side: 'left' }, { side: 'right' }]);
+    window.history.replaceState({}, '');
+  }, [preSelectedShare]);
+
   return (
     <>
       <Inpage>