1- import React from 'react' ;
1+ import React , { useEffect , useState } from 'react' ;
22import { useTreeStateStore } from '@/store/treeStateStore' ;
33import { UniqueIdentifier } from '@dnd-kit/core' ;
4- import { List , ListItemText , ListItemButton , Box , IconButton , Typography , Divider } from '@mui/material' ;
4+ import { List , ListItemText , ListItemButton , Box , IconButton , Tooltip , Typography , Divider } from '@mui/material' ;
55import { Unarchive , DeleteForever } from '@mui/icons-material' ;
66import { useTreeManagement } from '@/hooks/useTreeManagement' ;
77import { useDialogStore } from '@/store/dialogStore' ;
88import { useAppStateStore } from '@/store/appStateStore' ;
9+ import * as idbService from '@/services/indexedDbService' ;
910
1011export const ArchiveList = ( ) => {
1112 const currentTree = useTreeStateStore ( ( state ) => state . currentTree ) ;
@@ -19,6 +20,16 @@ export const ArchiveList = () => {
1920 const { handleChangeIsArchived, deleteTree } = useTreeManagement ( ) ;
2021 const { loadAndSetCurrentTreeDataFromIdb } = useTreeManagement ( ) ;
2122
23+ const [ timestamps , setTimestamps ] = useState < Record < string , number > > ( { } ) ;
24+
25+ const archivedTrees = treesList . filter ( ( tree ) => tree . isArchived ) ;
26+
27+ useEffect ( ( ) => {
28+ const ids = archivedTrees . map ( ( t ) => t . id ) ;
29+ if ( ids . length === 0 ) return ;
30+ idbService . loadTreeTimestampsFromIdb ( ids ) . then ( setTimestamps ) ;
31+ } , [ treesList ] ) ; // eslint-disable-line react-hooks/exhaustive-deps
32+
2233 const handleUnArchiveClick = ( treeId : UniqueIdentifier ) => {
2334 handleChangeIsArchived ( treeId , false ) ;
2435 } ;
@@ -27,7 +38,7 @@ export const ArchiveList = () => {
2738 const result = await showDialog (
2839 'すべての編集メンバーからツリーが削除されます。この操作は元に戻せません。実行しますか？' ,
2940 'Confirmation Required' ,
30- true
41+ true ,
3142 ) ;
3243 if ( result ) {
3344 await deleteTree ( treeId ) ;
@@ -48,22 +59,22 @@ export const ArchiveList = () => {
4859 }
4960 } ;
5061
51- const archivedTrees = treesList . filter ( ( tree ) => tree . isArchived ) ;
52-
5362 return (
5463 < Box
5564 sx = { {
5665 maxWidth : '900px' ,
5766 width : '100%' ,
5867 marginX : 'auto' ,
68+ height : '100%' ,
69+ overflowY : 'auto' ,
5970 } }
6071 >
6172 < Box sx = { { py : 4 } } >
6273 < Typography variant = 'h6' sx = { { textAlign : 'center' } } >
6374 アーカイブ済みツリー
6475 </ Typography >
6576 </ Box >
66- < Box sx = { { width : '100%' , border : '1px solid #e0e0e0' , borderRadius : 2 , p : 0 } } >
77+ < Box sx = { { width : '100%' , border : '1px solid #e0e0e0' , borderRadius : 2 , p : 0 , mb : 12 } } >
6778 < List
6879 sx = { {
6980 m : 0 ,
@@ -77,31 +88,42 @@ export const ArchiveList = () => {
7788 onClick = { async ( ) => await handleListClick ( tree . id ) }
7889 sx = { { width : '100%' , height : 36 , minHeight : 36 , py : 0 } }
7990 >
80- < ListItemText
81- primary = { tree . name }
82- slotProps = { { primary : { variant : 'body2' } } }
83- sx = { { my : 0 } }
84- />
85- < IconButton
86- size = 'small'
87- onClick = { ( e ) => {
88- e . stopPropagation ( ) ;
89- handleUnArchiveClick ( tree . id ) ;
90- } }
91- sx = { { color : 'primary.main' , flexShrink : 0 } }
92- >
93- < Unarchive sx = { { fontSize : 18 } } />
94- </ IconButton >
95- < IconButton
96- size = 'small'
97- onClick = { ( e ) => {
98- e . stopPropagation ( ) ;
99- handleDeleteClick ( tree . id ) ;
100- } }
101- sx = { { color : 'error.main' , flexShrink : 0 } }
102- >
103- < DeleteForever sx = { { fontSize : 18 } } />
104- </ IconButton >
91+ < ListItemText primary = { tree . name } slotProps = { { primary : { variant : 'body2' } } } sx = { { my : 0 } } />
92+ { timestamps [ String ( tree . id ) ] && (
93+ < Typography variant = 'caption' sx = { { color : 'text.secondary' , flexShrink : 0 , mx : 1 } } >
94+ { new Date ( timestamps [ String ( tree . id ) ] ) . toLocaleString ( 'ja-JP' , {
95+ year : 'numeric' ,
96+ month : '2-digit' ,
97+ day : '2-digit' ,
98+ hour : '2-digit' ,
99+ minute : '2-digit' ,
100+ } ) }
101+ </ Typography >
102+ ) }
103+ < Tooltip title = 'アーカイブ解除' >
104+ < IconButton
105+ size = 'small'
106+ onClick = { ( e ) => {
107+ e . stopPropagation ( ) ;
108+ handleUnArchiveClick ( tree . id ) ;
109+ } }
110+ sx = { { color : 'primary.main' , flexShrink : 0 } }
111+ >
112+ < Unarchive sx = { { fontSize : 18 } } />
113+ </ IconButton >
114+ </ Tooltip >
115+ < Tooltip title = '削除' >
116+ < IconButton
117+ size = 'small'
118+ onClick = { ( e ) => {
119+ e . stopPropagation ( ) ;
120+ handleDeleteClick ( tree . id ) ;
121+ } }
122+ sx = { { color : 'error.main' , flexShrink : 0 } }
123+ >
124+ < DeleteForever sx = { { fontSize : 18 } } />
125+ </ IconButton >
126+ </ Tooltip >
105127 </ ListItemButton >
106128 { index !== archivedTrees . length - 1 && < Divider sx = { { width : '100%' } } /> }
107129 </ React . Fragment >
0 commit comments