more cleanup after vite migration

.eslintignore

@@ -1,5 +1,5 @@
 node_modules
 # Ignore linting on CRA created files
-/client/public
+/client/dist
 /dist
 /server_build

README.md

@@ -95,7 +95,7 @@ npm test
 * [Express](https://expressjs.com/) - Node.js web application framework
 * [Material UI](https://mui.com/) - A library of React UI components that implements Google's Material Design.
 * [Google Cloud Vision API](https://cloud.google.com/vision/docs) - image labeling, face and landmark detection...
-* [...and more](https://github.com/Dereje1/Pinterest-Clone/blob/c4d9b509fda1c0079811c04ead336df950e50413/package.json#L17)
+* [...and more](https://github.com/Dereje1/Pinterest-Clone/blob/master/package.json#L18)
 
 ## Authors
 

client/src/components/cover/cover.scss

@@ -8,7 +8,7 @@
     top: -50%;
     left: -50%;
     z-index: -1;
-    background: url('../../../public/backscreen.png');
+    background: url('../../assets/backscreen.png');
     @include animation('bkimage');
     animation-duration: 33s;
     animation-timing-function: linear;

client/src/components/imagebuild/HandleThumbnailImage.tsx

@@ -3,35 +3,35 @@ import { PinType } from '../../interfaces';
 import './imagebuild.scss';
 
 interface HandleThumbnailImageProps {
-  element: PinType
+  pin: PinType
   pinImage: (pin: PinType) => void
   deletePin: ((pin: PinType) => void) | null
 }
 
-function HandleThumbnailImage({ element, pinImage, deletePin }: HandleThumbnailImageProps) {
+function HandleThumbnailImage({ pin, pinImage, deletePin }: HandleThumbnailImageProps) {
   /* For the logged in user's profile page */
   if (deletePin) {
     return (
       <button
         type="submit"
         className="actionbutton"
-        onClick={() => deletePin(element)}
+        onClick={() => deletePin(pin)}
       >
-        {element.owns ? 'Delete' : 'Unpin'}
+        {pin.owns ? 'Delete' : 'Unpin'}
       </button>
     );
   }
   /* For anything other than the logged in user's profile page */
-  if (element.owns) {
+  if (pin.owns) {
     return null;
   }
 
-  if (element.hasSaved) {
+  if (pin.hasSaved) {
     return (
       <button
         type="submit"
         className="actionbutton"
-        onClick={() => pinImage(element)}
+        onClick={() => pinImage(pin)}
       >
         Unpin
       </button>
@@ -42,7 +42,7 @@ function HandleThumbnailImage({ element, pinImage, deletePin }: HandleThumbnailI
     <button
       type="submit"
       className="actionbutton save"
-      onClick={() => pinImage(element)}
+      onClick={() => pinImage(pin)}
     >
       <i className="fa fa-thumb-tack" aria-hidden="true" />
       {' Save'}

client/src/components/imagebuild/Imagebuild.tsx

@@ -14,7 +14,7 @@ import {
   PinType, userType, zoomedImageInfoType, imageMetadataType,
 } from '../../interfaces';
 import './imagebuild.scss';
-import error from '../../../public/error.png';
+import error from '../../assets/error.png';
 
 const PINS_DISPLAY_PER_SCROLL = 10;
 
@@ -152,8 +152,8 @@ function ImageBuild({
     const {
       naturalWidth, naturalHeight, className,
     } = target;
-    // disregard for save/delete calls or if already zoomed
-    if (className.includes('actionbutton') || zoomedImageInfo) return;
+    // disregard if not image clicked or if already zoomed
+    if (!className.includes('image-format') || zoomedImageInfo) return;
 
     const parentDivStyle = {
       ...getZoomedImageStyle({ naturalWidth, naturalHeight }),

client/src/components/imagebuild/MasonryPins.tsx

@@ -32,33 +32,33 @@ function MasonryPins({
       options={{ fitWidth: true }}
     >
       {
-        pins.map((element) => (
+        pins.map((pin) => (
           <div
-            key={element._id}
+            key={pin._id}
             role="button"
             className="image-box"
-            onClick={(e) => pinEnlarge(e, element)}
+            onClick={(e) => pinEnlarge(e, pin)}
             onKeyDown={() => ({})}
             tabIndex={0}
           >
             <img
-              alt={element.imgDescription}
-              onError={() => onBrokenImage(element._id)}
+              alt={pin.imgDescription}
+              onError={() => onBrokenImage(pin._id)}
               className="image-format"
-              src={element.imgLink}
-              onLoad={() => setLoadedImages([...loadedImages, element._id])}
-              style={{ visibility: loadedImages.includes(element._id) ? 'visible' : 'hidden' }}
+              src={pin.imgLink}
+              onLoad={() => setLoadedImages([...loadedImages, pin._id])}
+              style={{ visibility: loadedImages.includes(pin._id) ? 'visible' : 'hidden' }}
             />
             <div className="description">
-              <Typography variant="h6" sx={{ fontWeight: 'bold' }}>{`${element.imgDescription}`}</Typography>
-              <Typography variant="h6" sx={{ fontWeight: 'bold' }}>{`📌 ${element.savedBy.length}`}</Typography>
+              <Typography variant="h6" sx={{ fontWeight: 'bold' }}>{`${pin.imgDescription}`}</Typography>
+              <Typography variant="h6" sx={{ fontWeight: 'bold' }}>{`📌 ${pin.savedBy.length}`}</Typography>
             </div>
             <HandleThumbnailImage
-              element={element}
+              pin={pin}
               pinImage={pinImage}
               deletePin={deletePin}
             />
-            <div className="owner">{`${element.owner.name}`}</div>
+            <div className="owner">{`${pin.owner.name}`}</div>
           </div>
         ))
       }

client/src/components/mypins/mypins.tsx

@@ -87,8 +87,7 @@ export class Mypins extends Component<MypinsProps, MypinsState> {
   }
 
   // adds a new pin to the db
-  async addPic(pinJSON: {imgDescription: string, imgLink: string | ArrayBuffer}) {
-    // copy then add pin to db and then update client state (in that order)
+  async addPin(pinJSON: {imgDescription: string, imgLink: string | ArrayBuffer}) {
     const { pinList } = this.state;
     const { user: { displayName, service, userId } } = this.props;
     this.setState({ ready: false });
@@ -241,7 +240,7 @@ export class Mypins extends Component<MypinsProps, MypinsState> {
         {displayPinCreate && (
           <PinCreate
             reset={() => this.setState({ displayPinCreate: false })}
-            savePin={(pinJSON) => this.addPic(pinJSON)}
+            savePin={(pinJSON) => this.addPin(pinJSON)}
           />
         )}
         { showDeleteImageModal && (

client/src/components/mypins/pincreatemodal.tsx

@@ -15,7 +15,7 @@ import DriveFolderUploadIcon from '@mui/icons-material/DriveFolderUpload';
 import Dialog from '@mui/material/Dialog';
 import DialogTitle from '@mui/material/DialogTitle';
 import SavePin from './SavePin';
-import error from '../../../public/error.png';
+import error from '../../assets/error.png';
 import {
   validateURL,
   getModalWidth,

client/src/components/profile/Profile.tsx

@@ -13,9 +13,9 @@ import {
 import SearchUsers from './SearchUsers';
 import RESTcall from '../../crud';
 import { providerIconsType, userType } from '../../interfaces';
-import error from '../../../public/error.png';
+import error from '../../assets/error.png';
 
-const providerIcons = getProviderIcons({ fontSize: 25 });
+const providerIcons = getProviderIcons({ fontSize: 30 });
 
 function Profile() {
   const [pinsOwned, setPinsOwned] = useState([]);