diff --git a/ui/package.json b/ui/package.json index c124798f..f517b62a 100644 --- a/ui/package.json +++ b/ui/package.json @@ -101,8 +101,8 @@ }, "jest": { "testMatch": [ - "**/__tests__/**/*.+(ts|tsx|js)", - "**/?(*.)+(spec|test).+(ts|tsx|js)" + "**/__tests__/**/*.+(ts|tsx|js|jsx)", + "**/?(*.)+(spec|test).+(ts|tsx|js|jsx)" ], "transformIgnorePatterns": [ "^.+\\.css$" diff --git a/ui/src/@types/index.d.ts b/ui/src/@types/index.d.ts index e49f482d..b60ac774 100644 --- a/ui/src/@types/index.d.ts +++ b/ui/src/@types/index.d.ts @@ -1,7 +1,7 @@ declare module '*.svg' { const ReactComponent: React.FC> - const content: string + // const content: string export { ReactComponent } - export default content + // export default content } diff --git a/ui/src/Pages/AllAlbumsPage/AlbumsPage.tsx b/ui/src/Pages/AllAlbumsPage/AlbumsPage.tsx index b043fc94..814bbdcf 100644 --- a/ui/src/Pages/AllAlbumsPage/AlbumsPage.tsx +++ b/ui/src/Pages/AllAlbumsPage/AlbumsPage.tsx @@ -3,7 +3,6 @@ import AlbumBoxes from '../../components/albumGallery/AlbumBoxes' import Layout from '../../components/layout/Layout' import { useQuery, gql } from '@apollo/client' import LazyLoad from '../../helpers/LazyLoad' -import { useTranslation } from 'react-i18next' import { getMyAlbums } from './__generated__/getMyAlbums' const getAlbumsQuery = gql` diff --git a/ui/src/Pages/LoginPage/LoginPage.tsx b/ui/src/Pages/LoginPage/LoginPage.tsx index f1f02d43..6a96eba8 100644 --- a/ui/src/Pages/LoginPage/LoginPage.tsx +++ b/ui/src/Pages/LoginPage/LoginPage.tsx @@ -100,6 +100,7 @@ const LoginForm = () => { /> diff --git a/ui/src/components/header/Header.tsx b/ui/src/components/header/Header.tsx index 9c9d60f0..e6a438f9 100644 --- a/ui/src/components/header/Header.tsx +++ b/ui/src/components/header/Header.tsx @@ -5,7 +5,7 @@ import logoPath from '../../assets/photoview-logo.svg' import { authToken } from '../../helpers/authentication' const Header = () => ( -
+

logo diff --git a/ui/src/components/header/Searchbar.tsx b/ui/src/components/header/Searchbar.tsx index 813bac4a..94f96c43 100644 --- a/ui/src/components/header/Searchbar.tsx +++ b/ui/src/components/header/Searchbar.tsx @@ -11,14 +11,6 @@ import { searchQuery_search_media, } from './__generated__/searchQuery' -const Container = styled.div` - height: 60px; - width: 350px; - margin: 0 12px; - padding: 12px 0; - position: relative; -` - const SearchField = styled.input` height: 100%; width: 100%; diff --git a/ui/src/components/layout/Layout.tsx b/ui/src/components/layout/Layout.tsx index 1f7d7e1e..cbb81d7a 100644 --- a/ui/src/components/layout/Layout.tsx +++ b/ui/src/components/layout/Layout.tsx @@ -26,18 +26,14 @@ const Layout = ({ children, title, ...otherProps }: LayoutProps) => { {title ? `${title} - Photoview` : `Photoview`} -
+
-
+
{children} diff --git a/ui/src/components/layout/MainMenu.tsx b/ui/src/components/layout/MainMenu.tsx index 1060ce53..995d0de9 100644 --- a/ui/src/components/layout/MainMenu.tsx +++ b/ui/src/components/layout/MainMenu.tsx @@ -60,8 +60,8 @@ export const MainMenu = () => { const mapboxEnabled = !!mapboxQuery?.data?.mapboxToken return ( -
-
    +
    +
      diff --git a/ui/src/components/photoGallery/PhotoGallery.tsx b/ui/src/components/photoGallery/PhotoGallery.tsx index 5a9fe8bc..b3de5f58 100644 --- a/ui/src/components/photoGallery/PhotoGallery.tsx +++ b/ui/src/components/photoGallery/PhotoGallery.tsx @@ -2,7 +2,6 @@ import React, { useContext, useEffect } from 'react' import styled from 'styled-components' import { MediaThumbnail, MediaPlaceholder } from './MediaThumbnail' import PresentView from './presentView/PresentView' -import { useTranslation } from 'react-i18next' import { PresentMediaProps_Media } from './presentView/PresentMedia' import { sidebarPhoto_media_thumbnail } from '../sidebar/__generated__/sidebarPhoto' import { @@ -47,13 +46,7 @@ type PhotoGalleryProps = { dispatchMedia: React.Dispatch } -const PhotoGallery = ({ - mediaState, - loading, - dispatchMedia, -}: PhotoGalleryProps) => { - const { t } = useTranslation() - +const PhotoGallery = ({ mediaState, dispatchMedia }: PhotoGalleryProps) => { const [markFavorite] = useMarkFavoriteMutation() const { media, activeIndex, presenting } = mediaState diff --git a/ui/src/components/timelineGallery/TimelineGallery.tsx b/ui/src/components/timelineGallery/TimelineGallery.tsx index f03f1cae..770cd4a5 100644 --- a/ui/src/components/timelineGallery/TimelineGallery.tsx +++ b/ui/src/components/timelineGallery/TimelineGallery.tsx @@ -2,7 +2,6 @@ import React, { useRef, useEffect, useReducer, useContext } from 'react' import PropTypes from 'prop-types' import { useQuery, gql } from '@apollo/client' import TimelineGroupDate from './TimelineGroupDate' -import styled from 'styled-components' import PresentView from '../photoGallery/presentView/PresentView' import useURLParameters from '../../hooks/useURLParameters' import { FavoritesCheckbox } from '../album/AlbumFilter' @@ -58,13 +57,6 @@ const MY_TIMELINE_QUERY = gql` } ` -const GalleryWrapper = styled.div` - margin: -12px; - display: flex; - flex-wrap: wrap; - overflow-x: hidden; -` - export type TimelineActiveIndex = { albumGroup: number media: number @@ -178,10 +170,7 @@ const TimelineGallery = () => { setOnlyFavorites={setOnlyFavorites} />
      -
      +
      {timelineGroups}
      {album.title} -
      +
      {mediaElms} {itemsBubble}
      diff --git a/ui/src/components/timelineGallery/TimelineGroupDate.tsx b/ui/src/components/timelineGallery/TimelineGroupDate.tsx index 18bd128f..b218d00e 100644 --- a/ui/src/components/timelineGallery/TimelineGroupDate.tsx +++ b/ui/src/components/timelineGallery/TimelineGroupDate.tsx @@ -1,6 +1,5 @@ import React from 'react' import TimelineGroupAlbum from './TimelineGroupAlbum' -import styled from 'styled-components' import { useTranslation } from 'react-i18next' import { TimelineGalleryAction, @@ -12,20 +11,6 @@ const dateFormatterOptions: Intl.DateTimeFormatOptions = { month: 'long', day: 'numeric', } -const GroupDateWrapper = styled.div` - margin: 12px 12px; -` - -const DateTitle = styled.h1` - font-size: 1.5rem; - margin: 0 0 -12px; -` - -const GroupAlbumWrapper = styled.div` - display: flex; - flex-wrap: wrap; - margin: 0 -8px; -` type TimelineGroupDateProps = { groupIndex: number @@ -62,7 +47,7 @@ const TimelineGroupDate = ({ return (
      {formattedDate}
      -
      {albumGroupElms}
      +
      {albumGroupElms}
      ) } diff --git a/ui/src/hooks/useDelay.ts b/ui/src/hooks/useDelay.ts index 5a45309b..604c3f8b 100644 --- a/ui/src/hooks/useDelay.ts +++ b/ui/src/hooks/useDelay.ts @@ -2,7 +2,7 @@ import { useLayoutEffect, useState, useRef } from 'react' // eslint-disable-next-line @typescript-eslint/no-explicit-any function useDelay(wait: number, deps: any[] = []) { - const [_, triggerUpdate] = useState(false) + const triggerUpdate = useState(false)[1] const done = useRef(false) useLayoutEffect(() => { diff --git a/ui/src/index.css b/ui/src/index.css index 7c533185..c4f665d8 100644 --- a/ui/src/index.css +++ b/ui/src/index.css @@ -6,7 +6,7 @@ #root, body, html { - height: 100%; + /* height: 100%; */ margin: 0; font-size: inherit; font-family: 'Source Sans Pro', sans-serif; diff --git a/ui/src/main.tsx b/ui/src/main.tsx index b805a978..67fe6c5b 100644 --- a/ui/src/main.tsx +++ b/ui/src/main.tsx @@ -1,4 +1,4 @@ -// import 'regenerator-runtime/runtime' +import 'regenerator-runtime/runtime' import React from 'react' import ReactDOM from 'react-dom'