From 344d554b8a1e92800406d39efcae4e037dcba0d9 Mon Sep 17 00:00:00 2001 From: viktorstrate Date: Sun, 26 Sep 2021 20:51:14 +0200 Subject: [PATCH] Make serice-worker ignore API + fix #506 --- ui/package.json | 1 - ui/src/components/photoGallery/PhotoGallery.tsx | 12 ++---------- .../components/timelineGallery/TimelineGallery.tsx | 14 +------------- .../timelineGallery/TimelineGroupAlbum.tsx | 7 ++++++- ui/src/service-worker.ts | 9 ++++++--- 5 files changed, 15 insertions(+), 28 deletions(-) diff --git a/ui/package.json b/ui/package.json index d4dca0c3..ab0dbc6b 100644 --- a/ui/package.json +++ b/ui/package.json @@ -71,7 +71,6 @@ "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^12.0.0", "@testing-library/user-event": "^13.1.9", - "apollo": "^2.33.4", "husky": "^6.0.0", "i18next-parser": "^4.2.0", "lint-staged": "^11.0.1", diff --git a/ui/src/components/photoGallery/PhotoGallery.tsx b/ui/src/components/photoGallery/PhotoGallery.tsx index 054284e2..ba1f82e3 100644 --- a/ui/src/components/photoGallery/PhotoGallery.tsx +++ b/ui/src/components/photoGallery/PhotoGallery.tsx @@ -1,4 +1,4 @@ -import React, { useContext, useEffect } from 'react' +import React, { useContext } from 'react' import styled from 'styled-components' import { MediaThumbnail, MediaPlaceholder } from './MediaThumbnail' import PresentView from './presentView/PresentView' @@ -52,15 +52,6 @@ const PhotoGallery = ({ mediaState, dispatchMedia }: PhotoGalleryProps) => { const { media, activeIndex, presenting } = mediaState const { updateSidebar } = useContext(SidebarContext) - useEffect(() => { - if (mediaState.activeIndex != -1) { - updateSidebar( - - ) - } else { - updateSidebar(null) - } - }, [activeIndex]) let photoElements = [] if (media) { @@ -77,6 +68,7 @@ const PhotoGallery = ({ mediaState, dispatchMedia }: PhotoGalleryProps) => { type: 'selectImage', index, }) + updateSidebar() }} clickFavorite={() => { toggleFavoriteAction({ diff --git a/ui/src/components/timelineGallery/TimelineGallery.tsx b/ui/src/components/timelineGallery/TimelineGallery.tsx index 158da1aa..8d0c7935 100644 --- a/ui/src/components/timelineGallery/TimelineGallery.tsx +++ b/ui/src/components/timelineGallery/TimelineGallery.tsx @@ -1,4 +1,4 @@ -import React, { useRef, useEffect, useReducer, useContext } from 'react' +import React, { useRef, useEffect, useReducer } from 'react' import PropTypes from 'prop-types' import { useQuery, gql } from '@apollo/client' import TimelineGroupDate from './TimelineGroupDate' @@ -16,8 +16,6 @@ import { getActiveTimelineImage as getActiveTimelineMedia, timelineGalleryReducer, } from './timelineGalleryReducer' -import MediaSidebar from '../sidebar/MediaSidebar' -import { SidebarContext } from '../sidebar/Sidebar' import { urlPresentModeSetupHook } from '../photoGallery/photoGalleryReducer' import TimelineFilters from './TimelineFilters' import client from '../../apolloClient' @@ -78,7 +76,6 @@ export type TimelineGroupAlbum = { const TimelineGallery = () => { const { t } = useTranslation() - const { updateSidebar } = useContext(SidebarContext) const { getParam, setParam } = useURLParameters() @@ -130,15 +127,6 @@ const TimelineGallery = () => { }) }, [data]) - useEffect(() => { - const activeMedia = getActiveTimelineMedia({ mediaState }) - if (activeMedia) { - updateSidebar() - } else { - updateSidebar(null) - } - }, [mediaState.activeIndex]) - useEffect(() => { ;(async () => { await client.resetStore() diff --git a/ui/src/components/timelineGallery/TimelineGroupAlbum.tsx b/ui/src/components/timelineGallery/TimelineGroupAlbum.tsx index d0aec70b..c8b37432 100644 --- a/ui/src/components/timelineGallery/TimelineGroupAlbum.tsx +++ b/ui/src/components/timelineGallery/TimelineGroupAlbum.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, { useContext } from 'react' import { Link } from 'react-router-dom' import { MediaThumbnail } from '../photoGallery/MediaThumbnail' import { PhotoFiller } from '../photoGallery/PhotoGallery' @@ -6,6 +6,8 @@ import { toggleFavoriteAction, useMarkFavoriteMutation, } from '../photoGallery/photoGalleryMutations' +import MediaSidebar from '../sidebar/MediaSidebar' +import { SidebarContext } from '../sidebar/Sidebar' import { getActiveTimelineImage, openTimelinePresentMode, @@ -34,6 +36,8 @@ const TimelineGroupAlbum = ({ const [markFavorite] = useMarkFavoriteMutation() + const { updateSidebar } = useContext(SidebarContext) + const mediaElms = media.map((media, index) => ( ) }} clickPresent={() => { openTimelinePresentMode({ diff --git a/ui/src/service-worker.ts b/ui/src/service-worker.ts index 34bae7db..8c58fcfc 100644 --- a/ui/src/service-worker.ts +++ b/ui/src/service-worker.ts @@ -22,9 +22,7 @@ clientsClaim() // Their URLs are injected into the manifest variable below. // This variable must be present somewhere in your service worker file, // even if you decide not to use precaching. See https://cra.link/PWA -precacheAndRoute(self.__WB_MANIFEST, { - ignoreURLParametersMatching: [/^\/api\/.*/], -}) +precacheAndRoute(self.__WB_MANIFEST) // Set up App Shell-style routing, so that all navigation requests // are fulfilled with your index.html shell. Learn more at @@ -43,6 +41,11 @@ registerRoute( return false } + // Skip API requests + if (url.pathname.startsWith('/api/')) { + return false + } + // If this looks like a URL for a resource, because it contains // a file extension, skip. if (url.pathname.match(fileExtensionRegexp)) {