Update to imports and some minor changes done

frontend/src/components/FaceList.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 FaceList = (data) => {
+const PeopleList = (data) => {
   let history = useHistory();
   const stylePeopleList = {
     width: '80px',
@@ -46,7 +46,7 @@ const FaceList = (data) => {
                   display: 'flex',
                 }}
               >
-                {capThings(src.name)}
+                {capEntityName(src.name)}
               </ImageListLabel>
             </ImageListSupporting>
           </ImageListItem>
@@ -56,4 +56,4 @@ const FaceList = (data) => {
   );
 };
 
-export default FaceList;
+export default PeopleList;

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 FaceList from './FaceList';
+import PeopleList from './PeopleList';
 import FavouriteAction from './FavouriteAction';
 
 export {
@@ -16,8 +15,7 @@ export {
   Loading,
   Error,
   ExploreEntityList,
-  ExplorePeopleList,
   ExploreEntity,
-  FaceList,
+  PeopleList,
   FavouriteAction,
 };

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, FaceList, 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' }}>
-                        <FaceList
+                        <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/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/utils/capThings.js → frontend/src/utils/capEntityName.js

@@ -1,4 +1,4 @@
-const capThings = (things) => {
+const capEntityName = (things) => {
   if (things !== '' && things !== ' ') {
     const words = things.trim().split(' ');
 
@@ -10,4 +10,4 @@ const capThings = (things) => {
   }
 };
 
-export default capThings;
+export default capEntityName;

frontend/src/utils/index.js

@@ -1,5 +1,5 @@
 import reducePhotos from './reducePhotos';
-import capThings from './capThings';
+import capEntityName from './capEntityName';
 import sortPhotos from './sortPhotos';
 
-export { reducePhotos, capThings, sortPhotos };
+export { reducePhotos, capEntityName, sortPhotos };