code cleaning during code review

Geovation · Jul 7, 2021 · 7b9e41e · 7b9e41e
1 parent be43f82
commit 7b9e41e
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 189 deletions.
diff --git a/src/App.js b/src/App.js
@@ -411,7 +411,6 @@ const App = (props) => {
       open: true,
       message: "Photo upload scheduled :)",
     });
-    // TODO: do I need the promise ????
     const { promise, cancel } = await dbFirebase.scheduleUpload({
       location,
       imgSrc,

diff --git a/src/components/OwnPhotosPage.js b/src/components/OwnPhotosPage.js
@@ -21,54 +21,52 @@ import { dbFirebase } from "features/firebase";
 
 const placeholderImage = process.env.PUBLIC_URL + "/custom/images/logo.svg";
 
-const OwnPhotosPage = (props) => {
-  const label = config.PAGES.ownPhotos.label;
-
-  function createAction(photo) {
-    // the icon depends on the status
-    if (dbFirebase.getUploadProgress(photo.properties.id) < 100) {
-      // still being uploaded
-      // TODO: display progress
-      // TODO: add cancell button
-      return (
-        <Icon>
-          <CloudUpload color="error" />
-        </Icon>
-      );
-    } else if (photo.properties.published === false) {
-      // rejected
-      return (
-        <Icon>
-          <ClearIcon color="error" />
-        </Icon>
-      );
-    } else if (photo.properties.published === true) {
-      // approved
-      return (
-        <Icon>
-          <CheckIcon color="secondary" />
-        </Icon>
-      );
-    } else {
-      // waiting for moderation
-      return (
-        <Icon>
-          <HourglassEmptyIcon color="action" />
-        </Icon>
-      );
-    }
+const ActionIcon = ({ photo }) => {
+  let icon = <HourglassEmptyIcon color="action" />;
+  // the icon depends on the status
+  if (dbFirebase.getUploadProgress(photo.properties.id) < 100) {
+    // still being uploaded
+    // TODO: add cancell button
+    icon = <CloudUpload color="error" />;
+  } else if (photo.properties.published === false) {
+    // rejected
+    icon = <ClearIcon color="error" />;
+  } else if (photo.properties.published === true) {
+    // approved
+    icon = <CheckIcon color="secondary" />;
   }
 
-  function createThumbnail(photo) {    
-    return dbFirebase.getUploadingPhoto(photo.properties.id, photo.properties.thumbnail);
-  }
+  return <Icon>{icon}</Icon>;
+};
 
-  function createUpdated(photo) {
-    const progress = dbFirebase.getUploadProgress(photo.properties.id);
-    return progress < 100
-      ? `${progress} %`
-      : config.PHOTO_ZOOMED_FIELDS.updated(photo.properties.updated);
-  }
+const ProgressOrUpdated = ({ photo }) => {
+  const progress = dbFirebase.getUploadProgress(photo.properties.id);
+  const primary = progress < 100
+    ? `${progress} %`
+    : config.PHOTO_ZOOMED_FIELDS.updated(photo.properties.updated);
+
+  return <ListItemText primary={primary} />;
+}
+
+const Thumbnail = ({ placeholderImage, photo }) => {
+
+  const thumbnail = dbFirebase.getUploadingPhoto(
+    photo.properties.id,
+    photo.properties.thumbnail
+  );
+
+  return (
+    <ListItemAvatar>
+      <Avatar
+        imgProps={{ onError: (e) =>  e.target.src = placeholderImage }}
+        src={thumbnail}
+      />
+    </ListItemAvatar>
+  );
+};
+
+const OwnPhotosPage = (props) => {
+  const label = config.PAGES.ownPhotos.label;
 
   return (
     <PageWrapper
@@ -83,19 +81,10 @@ const OwnPhotosPage = (props) => {
             button
             onClick={() => props.handlePhotoClick(photo)}
           >
-            <ListItemAvatar>
-              <Avatar
-                imgProps={{
-                  onError: (e) => {
-                    e.target.src = placeholderImage;
-                  },
-                }}
-                src={createThumbnail(photo)}
-              />
-            </ListItemAvatar>
-            <ListItemText primary={createUpdated(photo)} />
+            <Thumbnail photo={photo} placeholderImage={placeholderImage} />
+            <ProgressOrUpdated photo={photo} />
             <ListItemSecondaryAction>
-              {createAction(photo)}
+              <ActionIcon photo={photo} />
             </ListItemSecondaryAction>
           </ListItem>
         ))}