Make serice-worker ignore API + fix #506

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",

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(
-        <MediaSidebar media={mediaState.media[mediaState.activeIndex]} />
-      )
-    } else {
-      updateSidebar(null)
-    }
-  }, [activeIndex])
 
   let photoElements = []
   if (media) {
@@ -77,6 +68,7 @@ const PhotoGallery = ({ mediaState, dispatchMedia }: PhotoGalleryProps) => {
               type: 'selectImage',
               index,
             })
+            updateSidebar(<MediaSidebar media={mediaState.media[index]} />)
           }}
           clickFavorite={() => {
             toggleFavoriteAction({

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(<MediaSidebar media={activeMedia} />)
-    } else {
-      updateSidebar(null)
-    }
-  }, [mediaState.activeIndex])
-
   useEffect(() => {
     ;(async () => {
       await client.resetStore()

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) => (
     <MediaThumbnail
       key={media.id}
@@ -47,6 +51,7 @@ const TimelineGroupAlbum = ({
             media: index,
           },
         })
+        updateSidebar(<MediaSidebar media={media} />)
       }}
       clickPresent={() => {
         openTimelinePresentMode({

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)) {