[MOB-105] Rename with extension & add await (#2539)

add await date accessed to run first and rename with extension consideration

apps/mobile/src/components/modal/inspector/ActionsModal.tsx

@@ -28,6 +28,7 @@ import { Modal, ModalRef } from '~/components/layout/Modal';
 import { tw, twStyle } from '~/lib/tailwind';
 import { useActionsModalStore } from '~/stores/modalStore';
 
+import { toast } from '~/components/primitive/Toast';
 import FileInfoModal from './FileInfoModal';
 import RenameModal from './RenameModal';
 
@@ -76,7 +77,11 @@ export const ActionsModal = () => {
 	const filePath = data && getIndexedItemFilePath(data);
 
 	// Open
-	const updateAccessTime = useLibraryMutation('files.updateAccessTime');
+	const updateAccessTime = useLibraryMutation('files.updateAccessTime', {
+		onSuccess: () => {
+			rspc.queryClient.invalidateQueries(['search.paths']);
+		}
+	});
 	const queriedFullPath = useLibraryQuery(['files.getPath', filePath?.id ?? -1], {
 		enabled: filePath != null
 	});
@@ -99,9 +104,9 @@ export const ActionsModal = () => {
 			});
 			filePath &&
 				filePath.object_id &&
-				updateAccessTime.mutateAsync([filePath.object_id]).catch(console.error);
+			await updateAccessTime.mutateAsync([filePath.object_id]).catch(console.error);
 		} catch (error) {
-			// TODO: Handle Error & toast message
+			toast.error("Error opening object")
 		}
 	}
 
@@ -179,7 +184,7 @@ export const ActionsModal = () => {
 					</View>
 				)}
 			</Modal>
-			<RenameModal objectName={filePath?.name ?? ''} ref={renameRef} />
+			<RenameModal ref={renameRef} />
 			<FileInfoModal ref={fileInfoRef} data={data} />
 		</>
 	);

apps/mobile/src/components/modal/inspector/FileInfoModal.tsx

@@ -1,6 +1,6 @@
-import { getItemFilePath, humanizeSize, type ExplorerItem } from '@sd/client';
+import { getItemFilePath, getItemObject, humanizeSize, type ExplorerItem } from '@sd/client';
 import dayjs from 'dayjs';
-import { Barcode, CaretLeft, Clock, Cube, Icon, SealCheck, Snowflake } from 'phosphor-react-native';
+import { Barcode, CaretLeft, Clock, Cube, FolderOpen, Icon, SealCheck, Snowflake } from 'phosphor-react-native';
 import { forwardRef } from 'react';
 import { Pressable, Text, View } from 'react-native';
 import FileThumb from '~/components/explorer/FileThumb';
@@ -42,7 +42,7 @@ const FileInfoModal = forwardRef<ModalRef, FileInfoModalProps>((props, ref) => {
 	const { data } = props;
 	const modalRef = useForwardedRef(ref);
 	const filePathData = data && getItemFilePath(data);
-
+	const objectData = data && getItemObject(data);
 	return (
 		<Modal
 			ref={modalRef}
@@ -86,6 +86,15 @@ const FileInfoModal = forwardRef<ModalRef, FileInfoModalProps>((props, ref) => {
 							/>
 						)}
 
+						{/* Accessed */}
+							<MetaItem
+								icon={FolderOpen}
+								title="Accessed"
+								value={objectData?.date_accessed ? dayjs(objectData.date_accessed).format('MMM Do YYYY') : '--'}
+							/>
+
+						{/* Modified */}
+
 						{filePathData && 'cas_id' in filePathData && (
 							<>
 								{/* Indexed */}

apps/mobile/src/components/modal/inspector/RenameModal.tsx

@@ -10,11 +10,8 @@ import useForwardedRef from '~/hooks/useForwardedRef';
 import { tw } from '~/lib/tailwind';
 import { useActionsModalStore } from '~/stores/modalStore';
 
-interface Props {
-	objectName: string;
-}
 
-const RenameModal = forwardRef<ModalRef, Props>((props, ref) => {
+const RenameModal = forwardRef<ModalRef>((_, ref) => {
 	const modalRef = useForwardedRef(ref);
 	const [newName, setNewName] = useState('');
 	const rspc = useRspcLibraryContext();
@@ -22,6 +19,9 @@ const RenameModal = forwardRef<ModalRef, Props>((props, ref) => {
 	const inputRef = useRef<TextInput>(null);
 
 	const filePathData = data && getIndexedItemFilePath(data);
+	const fileName = filePathData?.name ?? '';
+	const fileExtension = filePathData?.extension ?? '';
+	const combined = `${fileName}${fileExtension ? `.${fileExtension}` : ''}`;
 
 	const renameFile = useLibraryMutation(['files.renameFile'], {
 		onSuccess: () => {
@@ -35,8 +35,9 @@ const RenameModal = forwardRef<ModalRef, Props>((props, ref) => {
 
 	// set input value to object name on initial render
 	useEffect(() => {
-		setNewName(props.objectName);
-	}, [props.objectName]);
+		if (!fileName) return;
+		setNewName(combined);
+	}, [fileName, combined]);
 
 	const textRenameHandler = async () => {
 			switch (data?.type) {
@@ -66,7 +67,7 @@ const RenameModal = forwardRef<ModalRef, Props>((props, ref) => {
 		<Modal
 			ref={modalRef}
 			title="Rename"
-			onDismiss={() => setNewName(props.objectName)}
+			onDismiss={() => setNewName(combined)}
 			enableContentPanningGesture={false}
 			enablePanDownToClose={false}
 			snapPoints={['20']}
@@ -75,11 +76,11 @@ const RenameModal = forwardRef<ModalRef, Props>((props, ref) => {
 				<ModalInput
 					ref={inputRef}
 					autoFocus
-					onFocus={() => inputRef.current?.setSelection(0, newName.length)}
+					onFocus={() => inputRef.current?.setSelection(0, fileName.length)}
 					value={newName}
 					onChangeText={(t) => setNewName(t)}
 				/>
-				<Button disabled={newName.length === 0 || props.objectName === newName} onPress={textRenameHandler} variant="accent">
+				<Button disabled={newName.length === 0 || fileName === newName} onPress={textRenameHandler} variant="accent">
 					<Text style={tw`font-medium text-ink`}>Save</Text>
 				</Button>
 			</View>