Update to imports and some minor changes done

frontend/src/components/Content.js

@@ -2,14 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Route, Switch } from 'react-router-dom';
 import { DrawerAppContent } from '@rmwc/drawer';
-import Photos from '../pages/Photos';
-import { Explore, People, Places, Things } from '../pages/explore';
-import Upcoming from '../pages/Upcoming';
+import { Photo, Photos, Search, Upcoming, Favourites } from '../pages';
+import { Explore, People, Places, Things, Entity } from '../pages/explore';
 import SideNav from './SideNav';
-import Photo from '../pages/Photo';
-import Entity from '../pages/explore/Entity';
-import Search from '../pages/Search';
-import Favourites from '../pages/Favourites';
 
 const Content = (props) => {
   const { open } = props;

frontend/src/components/Error.js

@@ -8,14 +8,12 @@ const Error = () => {
       <Grid>
         <GridCell desktop={4} tablet={4} phone={4}></GridCell>
         <GridCell desktop={4} tablet={4} phone={4}>
-          <img src="/warning.svg" width="100%" />
-        </GridCell>
-        <GridCell desktop={4} tablet={4} phone={4}></GridCell>
-      </Grid>
-      <Grid>
-        <GridCell desktop={4} tablet={4} phone={4}></GridCell>
-        <GridCell desktop={4} tablet={4} phone={4}>
-          <center>Sorry, something went wrong.</center>
+          <center>
+            <img src="/warning.svg" width="100%" />
+            <br />
+            <br />
+            Sorry, something went wrong.
+          </center>
         </GridCell>
         <GridCell desktop={4} tablet={4} phone={4}></GridCell>
       </Grid>

frontend/src/components/PhotoImageList.js → frontend/src/components/PeopleList.js

@@ -8,9 +8,9 @@ import {
   ImageListLabel,
   ImageListImageAspectContainer,
 } from '@rmwc/image-list';
-import { capThings } from '../utils';
+import { capEntityName } from '../utils';
 
-const PhotoImageList = (data) => {
+const PeopleList = (data) => {
   let history = useHistory();
   const stylePeopleList = {
     width: '80px',
@@ -46,7 +46,7 @@ const PhotoImageList = (data) => {
                   display: 'flex',
                 }}
               >
-                {capThings(src.name)}
+                {capEntityName(src.name)}
               </ImageListLabel>
             </ImageListSupporting>
           </ImageListItem>
@@ -56,4 +56,4 @@ const PhotoImageList = (data) => {
   );
 };
 
-export default PhotoImageList;
+export default PeopleList;

frontend/src/components/SideNav.js

@@ -26,7 +26,6 @@ const SideNav = (props) => {
         { id: 'Favourites', link_to: 'favourites', icon: 'star_rate' },
         { id: 'Albums', link_to: 'albums', icon: 'photo_album' },
         { id: 'Utilities', link_to: 'utilities', icon: 'filter_none' },
-        { id: 'Archive', link_to: 'archive', icon: 'archive' },
         { id: 'Trash', link_to: 'trash', icon: 'delete' },
       ],
     },

frontend/src/components/explore/ExploreEntity.js

@@ -10,7 +10,7 @@ import {
   ImageListImageAspectContainer,
 } from '@rmwc/image-list';
 import '@rmwc/image-list/styles';
-import { capThings } from '../../utils';
+import { capEntityName } from '../../utils';
 
 const ExploreEntity = ({ type, data }) => {
   let history = useHistory();
@@ -32,7 +32,7 @@ const ExploreEntity = ({ type, data }) => {
               />
             </ImageListImageAspectContainer>
             <ImageListSupporting>
-              <ImageListLabel>{capThings(src.name)}</ImageListLabel>
+              <ImageListLabel>{capEntityName(src.name)}</ImageListLabel>
             </ImageListSupporting>
           </ImageListItem>
         ))}

frontend/src/components/explore/ExploreEntityList.js

@@ -10,29 +10,29 @@ import {
   ImageListImageAspectContainer,
 } from '@rmwc/image-list';
 import '@rmwc/image-list/styles';
-import { capThings } from '../../utils';
+import { capEntityName } from '../../utils';
 
 const ExploreEntityList = ({ data, type }) => {
   let history = useHistory();
-  const stylePeopleList = {
+  const stylePeople = {
     radius: '50%',
-    width: '140px',
+    width: '126px',
     margin: '0px 6px 8px 6px',
   };
 
-  const stylePlacesThigsList = {
+  const stylePlacesThigs = {
     radius: '4px',
     width: '180px',
     margin: '0px 6px 8px 6px',
   };
 
   return (
     <>
-      <ImageList withTextProtection>
+      <ImageList withTextProtection={type === 'people' ? false : true}>
         {data.map((src) => (
           <ImageListItem
             key={src.id}
-            style={type === 'people' ? stylePeopleList : stylePlacesThigsList}
+            style={type === 'people' ? stylePeople : stylePlacesThigs}
           >
             <ImageListImageAspectContainer>
               <ImageListImage
@@ -41,14 +41,25 @@ const ExploreEntityList = ({ data, type }) => {
                 style={{
                   borderRadius:
                     type === 'people'
-                      ? stylePeopleList.radius
-                      : stylePlacesThigsList.radius,
+                      ? stylePeople.radius
+                      : stylePlacesThigs.radius,
                   cursor: 'pointer',
                 }}
               />
             </ImageListImageAspectContainer>
             <ImageListSupporting>
-              <ImageListLabel>{capThings(src.name)}</ImageListLabel>
+              {type === 'people' ? (
+                <ImageListLabel
+                  style={{
+                    justifyContent: 'center',
+                    display: 'flex',
+                  }}
+                >
+                  {capEntityName(src.name)}
+                </ImageListLabel>
+              ) : (
+                <ImageListLabel>{capEntityName(src.name)}</ImageListLabel>
+              )}
             </ImageListSupporting>
           </ImageListItem>
         ))}

frontend/src/components/index.js

@@ -4,9 +4,8 @@ import Header from './header/Header';
 import Loading from './Loading';
 import Error from './Error';
 import ExploreEntityList from './explore/ExploreEntityList';
-import ExplorePeopleList from './explore/ExplorePeopleList';
 import ExploreEntity from './explore/ExploreEntity';
-import PhotoImageList from './PhotoImageList';
+import PeopleList from './PeopleList';
 import FavouriteAction from './FavouriteAction';
 
 export {
@@ -16,8 +15,7 @@ export {
   Loading,
   Error,
   ExploreEntityList,
-  ExplorePeopleList,
   ExploreEntity,
-  PhotoImageList,
+  PeopleList,
   FavouriteAction,
 };

frontend/src/pages/Favourites.js

@@ -47,6 +47,7 @@ const Favourites = () => {
                   <center>
                     <img src="/favourites.svg" width="100%" />
                     <br />
+                    <br />
                     You have no favourite photos yet!
                   </center>
                 </GridCell>

frontend/src/pages/Photo.js

@@ -16,8 +16,8 @@ import {
   ListItemText,
 } from '@rmwc/list';
 import '@rmwc/list/styles';
-import { capThings } from '../utils';
-import { Loading, Error, PhotoImageList, FavouriteAction } from '../components';
+import { capEntityName } from '../utils';
+import { Loading, Error, PeopleList, FavouriteAction } from '../components';
 const prettyBytes = require('pretty-bytes');
 
 const GET_MEDIA_ITEM = gql`
@@ -191,7 +191,7 @@ const Photo = () => {
                   {people && people.length > 0 && (
                     <>
                       <div style={{ marginLeft: '60px' }}>
-                        <PhotoImageList
+                        <PeopleList
                           type="people"
                           data={data.mediaItem?.entities}
                         />
@@ -202,7 +202,7 @@ const Photo = () => {
                     <ListItem>
                       <ListItemGraphic icon={entityTypeIcon('things')} />
                       <ListItemText>
-                        {capThings(things.join(', '))}
+                        {capEntityName(things.join(', '))}
                       </ListItemText>
                     </ListItem>
                   )}

frontend/src/pages/Photos.js

@@ -42,14 +42,12 @@ const Photos = () => {
               <Grid>
                 <GridCell desktop={4} tablet={4} phone={4}></GridCell>
                 <GridCell desktop={4} tablet={4} phone={4}>
-                  <img src="/images.svg" width="100%" />
-                </GridCell>
-                <GridCell desktop={4} tablet={4} phone={4}></GridCell>
-              </Grid>
-              <Grid>
-                <GridCell desktop={4} tablet={4} phone={4}></GridCell>
-                <GridCell desktop={4} tablet={4} phone={4}>
-                  <center>Upload your photos to iris!</center>
+                  <center>
+                    <img src="/images.svg" width="100%" />
+                    <br />
+                    <br />
+                    Upload your photos to iris!
+                  </center>
                 </GridCell>
                 <GridCell desktop={4} tablet={4} phone={4}></GridCell>
               </Grid>

frontend/src/pages/Search.js

@@ -18,7 +18,7 @@ const Search = () => {
   const query = useQueryParams();
   const history = useHistory();
 
-  const searchQuery = gql`
+  const SEARCH_QUERY = gql`
     query {
       search(q: "${query.get('q')}") {
         totalCount
@@ -30,7 +30,7 @@ const Search = () => {
     }
   `;
 
-  const { error, data } = useQuery(searchQuery, { fetchPolicy: 'no-cache' });
+  const { error, data } = useQuery(SEARCH_QUERY, { fetchPolicy: 'no-cache' });
 
   if (error) return <Error />;
 

frontend/src/pages/explore/Entity.js

@@ -13,7 +13,7 @@ import { TextField } from '@rmwc/textfield';
 import { Loading, Error } from '../../components';
 import { CircularProgress } from '@rmwc/circular-progress';
 import { gql, useQuery, useMutation } from '@apollo/client';
-import { capThings } from '../../utils';
+import { capEntityName } from '../../utils';
 import '@rmwc/list/styles';
 import '@rmwc/textfield/styles';
 import '@rmwc/circular-progress/styles';
@@ -86,7 +86,9 @@ const Entity = () => {
                     <div className="edit-section">
                       <TextField
                         defaultValue={
-                          editEntity ? editEntity : capThings(data.entity?.name)
+                          editEntity
+                            ? editEntity
+                            : capEntityName(data.entity?.name)
                         }
                         onChange={(e) => setEditEntity(e.target.value)}
                         style={{ height: '36px' }}
@@ -121,7 +123,9 @@ const Entity = () => {
                 <>
                   {data.entity?.entityType === 'people' ? (
                     <>
-                      {editEntity ? editEntity : capThings(data.entity.name)}
+                      {editEntity
+                        ? editEntity
+                        : capEntityName(data.entity.name)}
                       &nbsp;&nbsp;&nbsp;
                       <Button
                         icon="edit"
@@ -131,7 +135,7 @@ const Entity = () => {
                       />
                     </>
                   ) : (
-                    <>{capThings(data.entity?.name)}</>
+                    <>{capEntityName(data.entity?.name)}</>
                   )}
                 </>
               )}

frontend/src/pages/explore/Explore.js

@@ -2,12 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { Grid, GridCell } from '@rmwc/grid';
 import { gql, useQuery } from '@apollo/client';
-import {
-  Loading,
-  Error,
-  ExploreEntityList,
-  ExplorePeopleList,
-} from '../../components';
+import { Loading, Error, ExploreEntityList } from '../../components';
 import '@rmwc/grid/styles';
 
 const GET_PEOPLE = gql`
@@ -113,7 +108,7 @@ const Explore = () => {
                   </Grid>
                   <Grid>
                     <GridCell desktop={12} tablet={12} phone={12}>
-                      <ExplorePeopleList
+                      <ExploreEntityList
                         type="people"
                         data={peopleData.entities.nodes}
                       />

frontend/src/pages/explore/index.js

@@ -2,5 +2,6 @@ import Explore from './Explore';
 import People from './People';
 import Places from './Places';
 import Things from './Things';
+import Entity from './Entity';
 
-export { Explore, People, Places, Things };
+export { Explore, People, Places, Things, Entity };

frontend/src/pages/index.js

@@ -0,0 +1,8 @@
+import Favourites from './Favourites';
+import Photo from './Photo';
+import Photos from './Photos';
+import Search from './Search';
+import Sharing from './Sharing';
+import Upcoming from './Upcoming';
+
+export { Favourites, Photo, Photos, Search, Sharing, Upcoming };