rearrange all common components/functions into index file

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

@@ -2,8 +2,7 @@ import React, { useState, useEffect } from 'react';
 import InfiniteScroll from 'react-infinite-scroll-component';
 import { useSelector } from 'react-redux';
 import MasonryPins from './MasonryPins';
-import PinZoom from '../modal/modalzoom';
-import { Loading } from '../common';
+import { Loading, ModalZoom as PinZoom } from '..';
 import SignIn from '../../signin/signin';
 import RESTcall from '../../../crud';
 import {

client/src/components/common/common.tsx → client/src/components/common/index.tsx

@@ -17,6 +17,11 @@ import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import { providerIconsType } from '../../interfaces';
 import './common.scss';
+import ModalZoom from './modal/modalzoom';
+import ImageBuild from './imagebuild/Imagebuild';
+
+export { ModalZoom };
+export { ImageBuild };
 
 export const getProviderIcons = ({ fontSize }: { fontSize: number }): providerIconsType => (
   {

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

@@ -9,7 +9,7 @@ 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';
+import { ProfileLink } from '../..';
 import Tags from './Tags';
 import { formatDate } from '../../../../utils/utils';
 import { PinType } from '../../../../interfaces';

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

@@ -3,11 +3,9 @@ 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';
+import { getProviderIcons, UserListItem } from '../..';
 import { providerIconsType, PinnerType } from '../../../../interfaces';
 
-const providerIcons: providerIconsType = getProviderIcons({ fontSize: 20 });
-
 interface PinnersDialogProps {
   onCloseDialog: () => void
   onClosePin: (_: React.SyntheticEvent, forceClose?: boolean) => void
@@ -24,12 +22,12 @@ function PinnersDialog({
   pinnersList,
   authenticated,
   displayLogin,
-}:PinnersDialogProps) {
+}: PinnersDialogProps) {
   const handleCose = (e: React.SyntheticEvent) => {
     onCloseDialog();
     onClosePin(e);
   };
-
+  const providerIcons: providerIconsType = getProviderIcons({ fontSize: 20 });
   return (
     <Dialog
       onClose={onCloseDialog}

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

@@ -8,7 +8,7 @@ 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';
+import { ProfileLink } from '../..';
 import { formatDate, getFormattedDescription } from '../../../../utils/utils';
 import {
   PinType, zoomedImageInfoType,

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 '../common/imagebuild/Imagebuild';
+import { ImageBuild } from '../common';
 import { shuffleImages, getFilteredPins } from '../../utils/utils';
 import { PinType, userType, searchType } from '../../interfaces';
 

client/src/components/menu/CollapsibleMenu.tsx

@@ -11,7 +11,7 @@ import PeopleAltOutlinedIcon from '@mui/icons-material/PeopleAltOutlined';
 import SearchIcon from '@mui/icons-material/Search';
 import LogoutIcon from '@mui/icons-material/Logout';
 import MenuIcon from '@mui/icons-material/Menu';
-import { getProviderIcons } from '../common/common';
+import { getProviderIcons } from '../common';
 import { providerIconsType } from '../../interfaces';
 
 const ListItemTextStyling = { marginLeft: 5, fontSize: 20, fontWeight: 'bold' };

client/src/components/menu/menu.tsx

@@ -12,7 +12,7 @@ import Search from './search';
 import Cover from '../cover/cover';
 import SignIn from '../signin/signin';
 import CollapsibleMenu from './CollapsibleMenu';
-import { Loading } from '../common/common';
+import { Loading } from '../common';
 import { userType, searchType } from '../../interfaces';
 import './menu.scss';
 

client/src/components/mypins/UserInfo.tsx

@@ -6,7 +6,7 @@ import IconButton from '@mui/material/IconButton';
 import TextField from '@mui/material/TextField';
 import DoneIcon from '@mui/icons-material/Done';
 import CancelIcon from '@mui/icons-material/Cancel';
-import { getProviderIcons, UserJoinedDate } from '../common/common';
+import { getProviderIcons, UserJoinedDate } from '../common';
 import {
   providerIconsType,
 } from '../../interfaces';

client/src/components/mypins/mypins.tsx

@@ -9,12 +9,11 @@ import Fab from '@mui/material/Fab';
 import AddIcon from '@mui/icons-material/Add';
 
 import PinCreate from './pincreatemodal';
-import ImageBuild from '../common/imagebuild/Imagebuild';
 import UserInfo from './UserInfo';
 import WarningDialog from './WarningDialog';
 import RESTcall from '../../crud'; // pin CRUD
 import { updateDisplayName } from '../../redux/userSlice';
-import { Loading, UserPinsSelector } from '../common/common';
+import { Loading, UserPinsSelector, ImageBuild } from '../common';
 import { onTheFlyPinListNameChange } from '../../utils/utils';
 import {
   userType, PinType,

client/src/components/profile/Profile.tsx

@@ -6,10 +6,9 @@ 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 '../common/imagebuild/Imagebuild';
 import {
-  Loading, getProviderIcons, UserPinsSelector, UserJoinedDate,
-} from '../common/common';
+  Loading, getProviderIcons, UserPinsSelector, UserJoinedDate, ImageBuild,
+} from '../common';
 import SearchUsers from './SearchUsers';
 import RESTcall from '../../crud';
 import { providerIconsType, userType } from '../../interfaces';

client/src/components/profile/SearchUsers.tsx

@@ -7,7 +7,7 @@ import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import IconButton from '@mui/material/IconButton';
 import Autocomplete from '@mui/material/Autocomplete';
 import ListItemText from '@mui/material/ListItemText';
-import { getProviderIcons, UserListItem } from '../common/common';
+import { getProviderIcons, UserListItem } from '../common';
 import { providerIconsType } from '../../interfaces';
 import RESTcall from '../../crud';
 

client/src/components/signin/loginbuttons.tsx

@@ -3,7 +3,7 @@ import Button from '@mui/material/Button';
 import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import { connect } from 'react-redux';
 import { getUser } from '../../redux/userSlice';
-import { getProviderIcons } from '../common/common';
+import { getProviderIcons } from '../common';
 import { userType, providerIconsType, providersType } from '../../interfaces';
 import './loginbuttons.scss';
 

client/src/index.tsx

@@ -3,7 +3,7 @@ import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
-import { Loading } from './components/common/common';
+import { Loading } from './components/common';
 // redux
 import { store } from './store';
 // css

tests/client/src/components/common/Common.test.tsx → tests/client/src/components/common/index.test.tsx

@@ -3,7 +3,7 @@ import { EnzymePropSelector, shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import {
   Loading, UserPinsSelector, ProfileLink, UserListItem, getProviderIcons, UserJoinedDate,
-} from '../../../../../client/src/components/common/common';
+} from '../../../../../client/src/components/common/index';
 
 describe('Loading...', () => {
   test('Will render the loading bubbles', () => {