deeplink album sharing tabs (#399)

LibrePhotos · Nov 6, 2023 · 799be1a · 799be1a
1 parent 0294be4
commit 799be1a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/layouts/sharing/SharedFromMe.tsx b/src/layouts/sharing/SharedFromMe.tsx
@@ -1,6 +1,6 @@
 import { Group, Stack, Tabs, Text, Title } from "@mantine/core";
 import React, { useEffect } from "react";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
 import { fetchUserAlbumsSharedFromMe } from "../../actions/albumsActions";
 import { fetchPhotosSharedFromMe } from "../../actions/photosActions";
@@ -12,6 +12,7 @@ import { PhotosShared } from "./PhotosShared";
 
 export function SharedFromMe() {
   const dispatch = useAppDispatch();
+  const navigate = useNavigate();
   const { albums } = useAppSelector(store => store);
   const { photosFlat, photosGroupedByUser, fetchedPhotosetType } = useAppSelector(store => store.photos);
   const { which } = useParams();
@@ -45,7 +46,7 @@ export function SharedFromMe() {
           </Text>
         </div>
       </Group>
-      <Tabs defaultValue="photos">
+      <Tabs defaultValue={which} onTabChange={value => navigate(`/shared/fromme/${value}/`)}>
         <Tabs.List>
           <Tabs.Tab value="photos">Photos</Tabs.Tab>
           <Tabs.Tab value="albums">Albums</Tabs.Tab>

diff --git a/src/layouts/sharing/SharedToMe.tsx b/src/layouts/sharing/SharedToMe.tsx
@@ -1,6 +1,6 @@
 import { Group, Stack, Tabs, Text, Title } from "@mantine/core";
 import React, { useEffect } from "react";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
 import { fetchUserAlbumsSharedToMe } from "../../actions/albumsActions";
 import { fetchPhotosSharedToMe } from "../../actions/photosActions";
@@ -12,6 +12,7 @@ import { PhotosShared } from "./PhotosShared";
 
 export function SharedToMe() {
   const dispatch = useAppDispatch();
+  const navigate = useNavigate();
   const { albums } = useAppSelector(store => store);
   const { photosFlat, photosGroupedByUser, fetchedPhotosetType } = useAppSelector(store => store.photos);
   const { which } = useParams();
@@ -52,7 +53,7 @@ export function SharedToMe() {
           </Text>
         </div>
       </Group>
-      <Tabs defaultValue="photos">
+      <Tabs defaultValue={which} onTabChange={value => navigate(`/shared/tome/${value}/`)}>
         <Tabs.List>
           <Tabs.Tab value="photos">Photos</Tabs.Tab>
           <Tabs.Tab value="albums">Albums</Tabs.Tab>