From eb9413d6676e797f4165394bdb77c1de79b0ba74 Mon Sep 17 00:00:00 2001
From: Sebastian Ovide <sebastian.ovide@gmail.com>
Date: Wed, 7 Jul 2021 14:53:17 +0100
Subject: [PATCH] code cleaning during code review

---
 src/App.js                          |   1 -
 src/components/OwnPhotosPage.js     | 103 ++++++-------
 src/components/ProfilePage.js       | 219 +++++++++++-----------------
 src/features/firebase/dbFirebase.js |   9 --
 4 files changed, 134 insertions(+), 198 deletions(-)

diff --git a/src/App.js b/src/App.js
index 270a8f86..57053e63 100644
--- 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
index 602f7a6c..0027e3ca 100644
--- 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>
         ))}
diff --git a/src/components/ProfilePage.js b/src/components/ProfilePage.js
index 34eb929f..849e220f 100644
--- a/src/components/ProfilePage.js
+++ b/src/components/ProfilePage.js
@@ -1,8 +1,7 @@
 // Profile page to display user details.
 
-import React, { useState } from "react";
-import { connect } from 'react-redux';
-import { Link } from "react-router-dom";
+import React, { createRef, useState } from "react";
+import { connect } from "react-redux";
 import PropTypes from "prop-types";
 
 import _ from "lodash";
@@ -10,10 +9,6 @@ import loadImage from "blueimp-load-image";
 
 import CircularProgress from "@material-ui/core/CircularProgress";
 import RootRef from "@material-ui/core/RootRef";
-import { Icon } from "@material-ui/core";
-import CheckIcon from "@material-ui/icons/Check";
-import ClearIcon from "@material-ui/icons/Clear";
-import HourglassEmptyIcon from "@material-ui/icons/HourglassEmpty";
 import Avatar from "@material-ui/core/Avatar";
 import IconButton from "@material-ui/core/IconButton";
 import Typography from "@material-ui/core/Typography";
@@ -21,12 +16,10 @@ import { withStyles } from "@material-ui/core/styles";
 import InputBase from "@material-ui/core/InputBase";
 
 import PageWrapper from "./PageWrapper";
-import MapLocation from "../types/MapLocation";
 import { dbFirebase, authFirebase } from "features/firebase";
 import User from "types/User";
 
 import config from "custom/config";
-// TODO: split the file
 
 const AVATAR_SIZE = 100;
 const MAX_AVATAR_SIZE = 512;
@@ -137,35 +130,21 @@ const ProfileTextField = connect(mapStateToProps)(withStyles(styles)(function (p
   );
 }));
 
-class Profile extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      updatingPhoto: false,
-      profileImg: null,
-    };
-    this.domRefInput = {};
-  }
-
-  calcUrl(feature) {
-    const mapLocation = new MapLocation({
-      latitude: feature.geometry.coordinates[1],
-      longitude: feature.geometry.coordinates[0],
-      zoom: config.ZOOM_FLYTO
-    });
-    const urlFormated = mapLocation.urlFormated();
-    return `${config.PAGES.displayPhoto.path}/${feature.properties.id}@${urlFormated}`;
-  }
-
-  handleAvatarClick = (e) => {
-    this.domRefInput.current.click();
+function Profile({ user, classes, geojson, handleClose }) {
+
+  const [updatingPhoto, setUpdatingPhoto] = useState(false);
+  const [profileImg, setProfileImg] = useState();
+
+  const domRefInput = createRef();
+
+  const handleAvatarClick = (e) => {
+    domRefInput.current.click();
   };
 
-  openFile = async (e) => {
+  const openFile = async (e) => {
     const imageFile = e.target.files[0];
     if (imageFile) {
-      this.setState({ updatingPhoto: true });
+      setUpdatingPhoto(true);
 
       try {
         // reduce and save file
@@ -177,121 +156,99 @@ class Profile extends React.Component {
         });
 
         const imgSrc = img.image.toDataURL("image/jpeg");
-        this.setState({
-          profileImg: imgSrc,
-        });
+        setProfileImg(imgSrc);
+
         const base64 = imgSrc.split(",")[1];
         const avatarUrl = await dbFirebase.saveProfileAvatar(base64);
         await authFirebase.updateCurrentUser({ photoURL: avatarUrl });
       } catch (e) {
-        this.setState({
-          profileImg: null,
-        });
+        setProfileImg(null);
       } finally {
-        this.setState({
-          updatingPhoto: false,
-        });
+        setUpdatingPhoto(false);
       }
     }
   };
 
-  render() {
-    const { user, classes, geojson, handlePhotoClick, handleClose } = this.props;
-
-    const myPhotos = geojson && geojson.features.filter((f) => f.properties.owner_id === user.id);
-    const myLastPhotos = _.reverse(_.sortBy(myPhotos, (o) => o.properties.updated)).slice(0, 20);
-
-    console.log(myLastPhotos);
+  const myPhotos =
+    geojson &&
+    geojson.features.filter((f) => f.properties.owner_id === user.id);
+  const myLastPhotos = _.reverse(
+    _.sortBy(myPhotos, (o) => o.properties.updated)
+  ).slice(0, 20);
 
-    const numPieces = _.sumBy(myPhotos, (o) => o.properties.pieces);
+  console.log(myLastPhotos);
 
-    console.log(user);
+  const numPieces = _.sumBy(myPhotos, (o) => o.properties.pieces);
 
-    return (
-      <PageWrapper label={config.PAGES.account.label} handleClose={handleClose} header={false}>
-        <div className={classes.profileInfo}>
-          <div className={classes.wrapper}>
-            <IconButton onClick={this.handleAvatarClick} disabled={this.state.updatingPhoto}>
-              <Avatar className={classes.avatar} alt="profile-image" src={this.state.profileImg || user.photoURL} />
-            </IconButton>
+  console.log(user);
 
-            {this.state.updatingPhoto && <CircularProgress size={AVATAR_SIZE} className={classes.avatarProgress} />}
-          </div>
+  return (
+    <PageWrapper
+      label={config.PAGES.account.label}
+      handleClose={handleClose}
+      header={false}
+    >
+      <div className={classes.profileInfo}>
+        <div className={classes.wrapper}>
+          <IconButton
+            onClick={handleAvatarClick}
+            disabled={updatingPhoto}
+          >
+            <Avatar
+              className={classes.avatar}
+              alt="profile-image"
+              src={profileImg || user.photoURL}
+            />
+          </IconButton>
 
-          <RootRef rootRef={this.domRefInput}>
-            <input
-              className="hidden"
-              type="file"
-              accept="image/*"
-              id={"fileInput"}
-              onChange={this.openFile}
-              onClick={(e) => (e.target.value = null)}
+          {updatingPhoto && (
+            <CircularProgress
+              size={AVATAR_SIZE}
+              className={classes.avatarProgress}
             />
-          </RootRef>
+          )}
+        </div>
 
-          <ProfileTextField
-            fieldName="displayName"
-            className={classes.name}
-            maxLength={User.DISPLAY_NAME_MAXLENGTH}
-            placeholder="My name"
+        <RootRef rootRef={domRefInput}>
+          <input
+            className="hidden"
+            type="file"
+            accept="image/*"
+            id={"fileInput"}
+            onChange={openFile}
+            onClick={(e) => (e.target.value = null)}
           />
-
-          <Typography gutterBottom variant="h5">
-            {user.phoneNumber && ` ph: ${user.phoneNumber}`}
+        </RootRef>
+
+        <ProfileTextField
+          fieldName="displayName"
+          className={classes.name}
+          maxLength={User.DISPLAY_NAME_MAXLENGTH}
+          placeholder="My name"
+        />
+
+        <Typography gutterBottom variant="h5">
+          {user.phoneNumber && ` ph: ${user.phoneNumber}`}
+        </Typography>
+        <Typography component="p">{user.email}</Typography>
+        <Typography>{user.location}</Typography>
+        <Typography>{user.description}</Typography>
+
+        <br />
+
+        {myPhotos && (
+          <Typography variant="body1">
+            Num. of uploads <strong>{myPhotos.length}</strong>
           </Typography>
-          <Typography component="p">{user.email}</Typography>
-          <Typography>{user.location}</Typography>
-          <Typography>{user.description}</Typography>
-
-          <br />
-
-          {myPhotos && (
-            <Typography variant="body1">
-              Num. of uploads <strong>{myPhotos.length}</strong>
-            </Typography>
-          )}
-          {!isNaN(numPieces) && (
-            <Typography variant="body1">
-              Total Pieces <strong>{numPieces}</strong>
-            </Typography>
-          )}
-
-          <br />
-
-          {myLastPhotos.length && (
-            <div>
-              <Typography variant="h6" className={classes.centered}>
-                Last {myLastPhotos.length} uploaded
-              </Typography>
-
-              {_.map(myLastPhotos, (photo) => (
-                <div className={classes.centered} key={photo.properties.id}>
-                  <Typography variant="body1">
-                    {photo.properties.pieces && (
-                      <span>
-                        <strong>{photo.properties.pieces}</strong> pieces{" "}
-                      </span>
-                    )}
-                    <Link to={this.calcUrl(photo)} onClick={() => handlePhotoClick(photo)}>
-                      {photo.properties.updated.toDateString()}
-                    </Link>
-
-                    <Icon>
-                      {photo.properties.published === true && <CheckIcon color="secondary" />}
-                      {photo.properties.published === false && <ClearIcon color="error" />}
-                      {photo.properties.published !== false && photo.properties.published !== true && (
-                        <HourglassEmptyIcon olor="action" />
-                      )}
-                    </Icon>
-                  </Typography>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      </PageWrapper>
-    );
-  }
+        )}
+        {!isNaN(numPieces) && (
+          <Typography variant="body1">
+            Total Pieces <strong>{numPieces}</strong>
+          </Typography>
+        )}
+      </div>
+    </PageWrapper>
+  );
 }
 
 Profile.propTypes = {
diff --git a/src/features/firebase/dbFirebase.js b/src/features/firebase/dbFirebase.js
index 126f1cd9..140ab1b6 100644
--- a/src/features/firebase/dbFirebase.js
+++ b/src/features/firebase/dbFirebase.js
@@ -165,8 +165,6 @@ function saveMetadata(data) {
   delete data.latitude;
   delete data.longitude;
 
-  console.log(firebase.auth());
-  console.log(firebase);
   data.owner_id = firebase.auth().currentUser.uid;
 
   data.updated = firebase.firestore.FieldValue.serverTimestamp();
@@ -514,13 +512,6 @@ function ownPhotosRT(addedFn, modifiedFn, removedFn, errorFn) {
   const userId = firebase.auth().currentUser.uid;
   const ownPhotosRef = photosRef.where("owner_id", "==", userId);
 
-  // async function addUploadFieldsFn(photo) {
-  //   const uploadFields =
-  //     (await uploadsQueueStore.getItem(photo.uploadKey)) || {};
-
-  //   addedFn({ ...photo, uploadFields });
-  // }
-
   return photosFromRefRT(
     ownPhotosRef,
     // addUploadFieldsFn,