code cleaning during code review

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

Hide file tree

Showing 3 changed files with 89 additions and 132 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/ProfilePage.js b/src/components/ProfilePage.js
@@ -1,32 +1,25 @@
 // 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";
 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";
 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
@@ -158,6 +158,7 @@ function fetchFeedbacks(isShowAll) {
 }
 
 function saveMetadata(data) {
+  debugger;
   data.location = new firebase.firestore.GeoPoint(
     Number(data.latitude) || 0,
     Number(data.longitude) || 0