Make faces clickable
This commit is contained in:
parent
c3eda0feab
commit
c0d289eb41
|
@ -117,9 +117,9 @@ export const SideMenu = () => {
|
||||||
<SideButtonLabel>Places</SideButtonLabel>
|
<SideButtonLabel>Places</SideButtonLabel>
|
||||||
</SideButton>
|
</SideButton>
|
||||||
) : null}
|
) : null}
|
||||||
<SideButton to="/faces" exact>
|
<SideButton to="/people" exact>
|
||||||
<Icon name="user outline" />
|
<Icon name="user outline" />
|
||||||
<SideButtonLabel>Faces</SideButtonLabel>
|
<SideButtonLabel>People</SideButtonLabel>
|
||||||
</SideButton>
|
</SideButton>
|
||||||
{isAdmin ? (
|
{isAdmin ? (
|
||||||
<SideButton to="/settings" exact>
|
<SideButton to="/settings" exact>
|
||||||
|
|
|
@ -49,7 +49,7 @@ const FaceImage = styled(ProtectedImage)`
|
||||||
`
|
`
|
||||||
|
|
||||||
const FaceGroup = ({ group }) => (
|
const FaceGroup = ({ group }) => (
|
||||||
<Link to={`/faces/${group.id}`}>
|
<Link to={`/people/${group.id}`}>
|
||||||
<CircleImageWrapper>
|
<CircleImageWrapper>
|
||||||
<FaceImage src={group.imageFaces[0].media.thumbnail.url} />
|
<FaceImage src={group.imageFaces[0].media.thumbnail.url} />
|
||||||
</CircleImageWrapper>
|
</CircleImageWrapper>
|
||||||
|
@ -65,14 +65,14 @@ const FaceGroupsWrapper = styled.div`
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
`
|
`
|
||||||
|
|
||||||
const FacesPage = ({ match }) => {
|
const PeoplePage = ({ match }) => {
|
||||||
const { data, error } = useQuery(MY_FACES_QUERY)
|
const { data, error } = useQuery(MY_FACES_QUERY)
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
return error.message
|
return error.message
|
||||||
}
|
}
|
||||||
|
|
||||||
const faceGroup = match.params.face
|
const faceGroup = match.params.person
|
||||||
if (faceGroup) {
|
if (faceGroup) {
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
|
@ -91,14 +91,14 @@ const FacesPage = ({ match }) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout title={'People'}>
|
||||||
<FaceGroupsWrapper>{faces}</FaceGroupsWrapper>
|
<FaceGroupsWrapper>{faces}</FaceGroupsWrapper>
|
||||||
</Layout>
|
</Layout>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
FacesPage.propTypes = {
|
PeoplePage.propTypes = {
|
||||||
match: PropTypes.object.isRequired,
|
match: PropTypes.object.isRequired,
|
||||||
}
|
}
|
||||||
|
|
||||||
export default FacesPage
|
export default PeoplePage
|
|
@ -112,7 +112,7 @@ const MapPage = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout title="Places">
|
||||||
<MapWrapper>
|
<MapWrapper>
|
||||||
<MapContainer ref={mapContainer}></MapContainer>
|
<MapContainer ref={mapContainer}></MapContainer>
|
||||||
</MapWrapper>
|
</MapWrapper>
|
||||||
|
|
|
@ -25,7 +25,7 @@ export const InputLabelDescription = styled.p`
|
||||||
|
|
||||||
const SettingsPage = () => {
|
const SettingsPage = () => {
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout title="Settings">
|
||||||
<ScannerSection />
|
<ScannerSection />
|
||||||
<UsersTable />
|
<UsersTable />
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
@ -14,7 +14,7 @@ const AlbumPage = React.lazy(() => import('../../Pages/AlbumPage/AlbumPage'))
|
||||||
const PhotosPage = React.lazy(() => import('../../Pages/PhotosPage/PhotosPage'))
|
const PhotosPage = React.lazy(() => import('../../Pages/PhotosPage/PhotosPage'))
|
||||||
const PlacesPage = React.lazy(() => import('../../Pages/PlacesPage/PlacesPage'))
|
const PlacesPage = React.lazy(() => import('../../Pages/PlacesPage/PlacesPage'))
|
||||||
const SharePage = React.lazy(() => import('../../Pages/SharePage/SharePage'))
|
const SharePage = React.lazy(() => import('../../Pages/SharePage/SharePage'))
|
||||||
const FacesPage = React.lazy(() => import('../../Pages/FacesPage/FacesPage'))
|
const PeoplePage = React.lazy(() => import('../../Pages/PeoplePage/PeoplePage'))
|
||||||
|
|
||||||
const LoginPage = React.lazy(() => import('../../Pages/LoginPage/LoginPage'))
|
const LoginPage = React.lazy(() => import('../../Pages/LoginPage/LoginPage'))
|
||||||
const InitialSetupPage = React.lazy(() =>
|
const InitialSetupPage = React.lazy(() =>
|
||||||
|
@ -48,7 +48,7 @@ const Routes = () => {
|
||||||
<AuthorizedRoute path="/album/:id" component={AlbumPage} />
|
<AuthorizedRoute path="/album/:id" component={AlbumPage} />
|
||||||
<AuthorizedRoute path="/photos" component={PhotosPage} />
|
<AuthorizedRoute path="/photos" component={PhotosPage} />
|
||||||
<AuthorizedRoute path="/places" component={PlacesPage} />
|
<AuthorizedRoute path="/places" component={PlacesPage} />
|
||||||
<AuthorizedRoute path="/faces/:face?" component={FacesPage} />
|
<AuthorizedRoute path="/people/:person?" component={PeoplePage} />
|
||||||
<AuthorizedRoute admin path="/settings" component={SettingsPage} />
|
<AuthorizedRoute admin path="/settings" component={SettingsPage} />
|
||||||
<Route path="/" exact render={() => <Redirect to="/photos" />} />
|
<Route path="/" exact render={() => <Redirect to="/photos" />} />
|
||||||
<Route render={() => <div>Page not found</div>} />
|
<Route render={() => <div>Page not found</div>} />
|
||||||
|
|
Loading…
Reference in New Issue