refactor/move imgbuild and zoom to common

client/src/components/common/common.tsx

@@ -1,3 +1,7 @@
+/**
+ This file contains small react components that maybe used all over the codebase
+ * */
+
 import React, { HTMLAttributes } from 'react';
 import { Link as RouterLink } from 'react-router-dom';
 import Link from '@mui/material/Link';

client/src/components/imagebuild/HandleThumbnailImage.tsx → client/src/components/common/imagebuild/HandleThumbnailImage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PinType } from '../../interfaces';
+import { PinType } from '../../../interfaces';
 import './imagebuild.scss';
 
 interface HandleThumbnailImageProps {

client/src/components/imagebuild/Imagebuild.tsx → client/src/components/common/imagebuild/Imagebuild.tsx

@@ -2,19 +2,19 @@ import React, { useState, useEffect } from 'react';
 import InfiniteScroll from 'react-infinite-scroll-component';
 import MasonryPins from './MasonryPins';
 import PinZoom from '../modal/modalzoom';
-import { Loading } from '../common/common';
-import SignIn from '../signin/signin';
-import RESTcall from '../../crud';
+import { Loading } from '../common';
+import SignIn from '../../signin/signin';
+import RESTcall from '../../../crud';
 import {
   initialDisplayPerScroll,
   updatePinList,
   getZoomedImageStyle,
-} from '../../utils/utils';
+} from '../../../utils/utils';
 import {
   PinType, userType, zoomedImageInfoType, imageMetadataType,
-} from '../../interfaces';
+} from '../../../interfaces';
 import './imagebuild.scss';
-import error from '../../assets/error.png';
+import error from '../../../assets/error.png';
 
 const PINS_DISPLAY_PER_SCROLL = 10;
 

client/src/components/imagebuild/MasonryPins.tsx → client/src/components/common/imagebuild/MasonryPins.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import Masonry from 'react-masonry-component';
 import { Typography } from '@mui/material';
 import HandleThumbnailImage from './HandleThumbnailImage';
-import { PinType } from '../../interfaces';
+import { PinType } from '../../../interfaces';
 
 interface MasonryPinsProps {
   pins: PinType[]

client/src/components/modal/Back/Comments.tsx → client/src/components/common/modal/Back/Comments.tsx

@@ -9,10 +9,10 @@ import CloseIcon from '@mui/icons-material/Close';
 import Avatar from '@mui/material/Avatar';
 import CommentForm from './CommentForm';
 import PinnersDialog from './PinnersDialog';
-import { ProfileLink } from '../../common/common';
+import { ProfileLink } from '../../common';
 import Tags from './Tags';
-import { formatDate } from '../../../utils/utils';
-import { PinType } from '../../../interfaces';
+import { formatDate } from '../../../../utils/utils';
+import { PinType } from '../../../../interfaces';
 
 interface CommentsProps {
   stylingProps: {width: number, height: number}

client/src/components/modal/Back/PinnersDialog.tsx → client/src/components/common/modal/Back/PinnersDialog.tsx

@@ -3,8 +3,8 @@ import List from '@mui/material/List';
 import Dialog from '@mui/material/Dialog';
 import ListSubheader from '@mui/material/ListSubheader';
 import ListItemText from '@mui/material/ListItemText';
-import { getProviderIcons, UserListItem } from '../../common/common';
-import { providerIconsType, PinnerType } from '../../../interfaces';
+import { getProviderIcons, UserListItem } from '../../common';
+import { providerIconsType, PinnerType } from '../../../../interfaces';
 
 const providerIcons: providerIconsType = getProviderIcons({ fontSize: 20 });
 

client/src/components/modal/Back/Tags.tsx → client/src/components/common/modal/Back/Tags.tsx

@@ -8,10 +8,10 @@ import IconButton from '@mui/material/IconButton';
 import TagIcon from '@mui/icons-material/Tag';
 import RestartAltIcon from '@mui/icons-material/RestartAlt';
 import Tooltip from '@mui/material/Tooltip';
-import { updateSearch } from '../../../redux/searchSlice';
+import { updateSearch } from '../../../../redux/searchSlice';
 import TagsForm from './TagsForm';
-import RESTcall from '../../../crud';
-import { PinType, tagType } from '../../../interfaces';
+import RESTcall from '../../../../crud';
+import { PinType, tagType } from '../../../../interfaces';
 
 export const ListItem = styled('li')(({ theme }) => ({
   margin: theme.spacing(0.5),

client/src/components/modal/Front/SwipableImage.tsx → client/src/components/common/modal/Front/SwipableImage.tsx

@@ -5,7 +5,7 @@ import ImageListItemBar from '@mui/material/ImageListItemBar';
 import IconButton from '@mui/material/IconButton';
 import NavigateNextIcon from '@mui/icons-material/NavigateNext';
 import NavigateBeforetIcon from '@mui/icons-material/NavigateBefore';
-import { zoomedImageInfoType, imageMetadataType } from '../../../interfaces';
+import { zoomedImageInfoType, imageMetadataType } from '../../../../interfaces';
 
 interface SwipableImageProps {
   zoomInfo: zoomedImageInfoType,

client/src/components/modal/Header/ModalActions.tsx → client/src/components/common/modal/Header/ModalActions.tsx

@@ -4,7 +4,7 @@ import PushPinIcon from '@mui/icons-material/PushPin';
 import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 import Tooltip from '@mui/material/Tooltip';
-import { PinType } from '../../../interfaces';
+import { PinType } from '../../../../interfaces';
 
 interface GetActionProps{
   element: PinType

client/src/components/modal/Header/ModalHeader.tsx → client/src/components/common/modal/Header/ModalHeader.tsx

@@ -8,11 +8,11 @@ import CommentIcon from '@mui/icons-material/Comment';
 import Typography from '@mui/material/Typography';
 import PsychologyIcon from '@mui/icons-material/Psychology';
 import ModalActions from './ModalActions';
-import { ProfileLink } from '../../common/common';
-import { formatDate, getFormattedDescription } from '../../../utils/utils';
+import { ProfileLink } from '../../common';
+import { formatDate, getFormattedDescription } from '../../../../utils/utils';
 import {
   PinType, zoomedImageInfoType,
-} from '../../../interfaces';
+} from '../../../../interfaces';
 
 const fontStyles = {
   description: {

client/src/components/modal/modal.scss → client/src/components/common/modal/modal.scss

@@ -1,4 +1,4 @@
-@import "./../../keyframes.scss";
+@import "../../../keyframes.scss";
 
 .zoom{
   height: auto;

client/src/components/modal/modalzoom.tsx → client/src/components/common/modal/modalzoom.tsx

@@ -7,10 +7,10 @@ import { CardContent } from '@mui/material';
 import ModalHeader from './Header/ModalHeader';
 import Comments from './Back/Comments';
 import SwipableImage from './Front/SwipableImage';
-import { delay } from '../../utils/utils';
+import { delay } from '../../../utils/utils';
 import {
   PinType, userType, zoomedImageInfoType, imageMetadataType,
-} from '../../interfaces';
+} from '../../../interfaces';
 import './modal.scss';
 
 interface PinZoomProps {

client/src/components/home/home.tsx

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import RESTcall from '../../crud';
-import ImageBuild from '../imagebuild/Imagebuild';
+import ImageBuild from '../common/imagebuild/Imagebuild';
 import { shuffleImages, getFilteredPins } from '../../utils/utils';
 import { PinType, userType, searchType } from '../../interfaces';
 

client/src/components/menu/menu.tsx

@@ -124,12 +124,7 @@ export class Menu extends React.Component<MenuProps, MenuState> {
       location: { pathname },
     } = this.props;
     if (!ready) return <Loading />;
-    if (!username) {
-      // render cover
-      document.body.classList.add('cover');
-      return <Cover />;
-    }
-    document.body.classList.remove('cover');
+    if (!username) return <Cover />;
     return (
       <div className="menu">
         <Search

client/src/components/mypins/mypins.tsx

@@ -9,7 +9,7 @@ import Fab from '@mui/material/Fab';
 import AddIcon from '@mui/icons-material/Add';
 
 import PinCreate from './pincreatemodal';
-import ImageBuild from '../imagebuild/Imagebuild';
+import ImageBuild from '../common/imagebuild/Imagebuild';
 import UserInfo from './UserInfo';
 import WarningDialog from './WarningDialog';
 import RESTcall from '../../crud'; // pin CRUD

client/src/components/profile/Profile.tsx

@@ -6,7 +6,7 @@ import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
 import SearchIcon from '@mui/icons-material/Search';
 import IconButton from '@mui/material/IconButton';
-import ImageBuild from '../imagebuild/Imagebuild';
+import ImageBuild from '../common/imagebuild/Imagebuild';
 import {
   Loading, getProviderIcons, UserPinsSelector, UserJoinedDate,
 } from '../common/common';

tests/client/src/components/imagebuild/HandleThumbnailImage.test.tsx → tests/client/src/components/common/imagebuild/HandleThumbnailImage.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import HandleThumbnailImage from '../../../../../client/src/components/imagebuild/HandleThumbnailImage';
-import { pinsStub } from '../../../stub';
+import HandleThumbnailImage from '../../../../../../client/src/components/common/imagebuild/HandleThumbnailImage';
+import { pinsStub } from '../../../../stub';
 
 describe('Handling image action buttons', () => {
   let props: React.ComponentProps<typeof HandleThumbnailImage>;

tests/client/src/components/imagebuild/Imagebuild.test.tsx → tests/client/src/components/common/imagebuild/Imagebuild.test.tsx

@@ -4,12 +4,12 @@
 import React from 'react';
 import { EnzymePropSelector, shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
-import ImageBuild from '../../../../../client/src/components/imagebuild/Imagebuild';
-import RESTcall from '../../../../../client/src/crud';
-import { pinsStub, reduxStub } from '../../../stub';
-import { PinType, PinnerType, zoomedImageInfoType } from '../../../../../client/src/interfaces';
+import ImageBuild from '../../../../../../client/src/components/common/imagebuild/Imagebuild';
+import RESTcall from '../../../../../../client/src/crud';
+import { pinsStub, reduxStub } from '../../../../stub';
+import { PinType, PinnerType, zoomedImageInfoType } from '../../../../../../client/src/interfaces';
 
-jest.mock('../../../../../client/src/crud');
+jest.mock('../../../../../../client/src/crud');
 const mockedRESTcall = jest.mocked(RESTcall);
 
 describe('The ImageBuild component', () => {

tests/client/src/components/imagebuild/MasonryPins.test.tsx → tests/client/src/components/common/imagebuild/MasonryPins.test.tsx

@@ -4,8 +4,8 @@
 import React from 'react';
 import { EnzymePropSelector, shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
-import MasonryPins from '../../../../../client/src/components/imagebuild/MasonryPins';
-import { pinsStub } from '../../../stub';
+import MasonryPins from '../../../../../../client/src/components/common/imagebuild/MasonryPins';
+import { pinsStub } from '../../../../stub';
 
 describe('The MasonryPins component', () => {
   let props: React.ComponentProps<typeof MasonryPins>;

tests/client/src/components/modal/Back/CommentForm.test.tsx → tests/client/src/components/common/modal/Back/CommentForm.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { EnzymePropSelector, shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
-import CommentForm from '../../../../../../client/src/components/modal/Back/CommentForm';
+import CommentForm from '../../../../../../../client/src/components/common/modal/Back/CommentForm';
 
 test('will render the form to add comments', () => {
   const wrapper = shallow(

tests/client/src/components/modal/Back/Comments.test.tsx → tests/client/src/components/common/modal/Back/Comments.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { EnzymePropSelector, shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
-import Comments from '../../../../../../client/src/components/modal/Back/Comments';
-import { pinsStub } from '../../../../stub';
+import Comments from '../../../../../../../client/src/components/common/modal/Back/Comments';
+import { pinsStub } from '../../../../../stub';
 
 describe('The comments window', () => {
   let props: React.ComponentProps<typeof Comments>;

tests/client/src/components/modal/Back/PinnersDialog.test.tsx → tests/client/src/components/common/modal/Back/PinnersDialog.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { EnzymePropSelector, shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
-import PinnersDialog from '../../../../../../client/src/components/modal/Back/PinnersDialog';
-import { pinsStub } from '../../../../stub';
+import PinnersDialog from '../../../../../../../client/src/components/common/modal/Back/PinnersDialog';
+import { pinsStub } from '../../../../../stub';
 
 test('The pinners dialog will render', () => {
   const wrapper = shallow(<PinnersDialog

tests/client/src/components/modal/Back/Tags.test.tsx → tests/client/src/components/common/modal/Back/Tags.test.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import { EnzymePropSelector, shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import * as router from 'react-router-dom';
-import Tags, { ListItem } from '../../../../../../client/src/components/modal/Back/Tags';
-import { pinsStub } from '../../../../stub';
-import RESTcall from '../../../../../../client/src/crud';
+import Tags, { ListItem } from '../../../../../../../client/src/components/common/modal/Back/Tags';
+import { pinsStub } from '../../../../../stub';
+import RESTcall from '../../../../../../../client/src/crud';
 
-jest.mock('../../../../../../client/src/crud');
+jest.mock('../../../../../../../client/src/crud');
 const mockedRESTcall = jest.mocked(RESTcall);
 
 const mockdispatch = jest.fn();

tests/client/src/components/modal/Back/TagsForm.test.tsx → tests/client/src/components/common/modal/Back/TagsForm.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { EnzymePropSelector, shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
-import TagsForm from '../../../../../../client/src/components/modal/Back/TagsForm';
+import TagsForm from '../../../../../../../client/src/components/common/modal/Back/TagsForm';
 
 describe('The tags form component', () => {
   let props: React.ComponentProps<typeof TagsForm>;

tests/client/src/components/modal/Front/SwipableImage.test.tsx → tests/client/src/components/common/modal/Front/SwipableImage.test.tsx

@@ -4,8 +4,8 @@
 import React from 'react';
 import { EnzymePropSelector, shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
-import SwipableImage from '../../../../../../client/src/components/modal/Front/SwipableImage';
-import { pinsStub } from '../../../../stub';
+import SwipableImage from '../../../../../../../client/src/components/common/modal/Front/SwipableImage';
+import { pinsStub } from '../../../../../stub';
 
 const props: React.ComponentProps<typeof SwipableImage> = {
   zoomInfo: {

tests/client/src/components/modal/Header/ModalActions.test.tsx → tests/client/src/components/common/modal/Header/ModalActions.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { EnzymePropSelector, shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
-import ModalActions from '../../../../../../client/src/components/modal/Header/ModalActions';
-import { pinsStub } from '../../../../stub';
+import ModalActions from '../../../../../../../client/src/components/common/modal/Header/ModalActions';
+import { pinsStub } from '../../../../../stub';
 
 describe('Handling zoomed image action buttons', () => {
   let props: React.ComponentProps<typeof ModalActions>;

tests/client/src/components/modal/Header/ModalHeader.test.tsx → tests/client/src/components/common/modal/Header/ModalHeader.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { EnzymePropSelector, shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
-import ModalHeader, { StyledBadge } from '../../../../../../client/src/components/modal/Header/ModalHeader';
-import { pinsStub } from '../../../../stub';
+import ModalHeader, { StyledBadge } from '../../../../../../../client/src/components/common/modal/Header/ModalHeader';
+import { pinsStub } from '../../../../../stub';
 
 describe('The Modal Header', () => {
   let props: React.ComponentProps<typeof ModalHeader>;

tests/client/src/components/modal/modalzoom.test.tsx → tests/client/src/components/common/modal/modalzoom.test.tsx

@@ -4,8 +4,8 @@
 import React from 'react';
 import { EnzymePropSelector, shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
-import { PinZoom } from '../../../../../client/src/components/modal/modalzoom';
-import { pinsStub, reduxStub } from '../../../stub';
+import { PinZoom } from '../../../../../../client/src/components/common/modal/modalzoom';
+import { pinsStub, reduxStub } from '../../../../stub';
 
 jest.useFakeTimers();