mirror of
https://github.com/spacedriveapp/spacedrive
synced 2024-07-04 12:13:27 +00:00
[MOB-105] Rename with extension & add await (#2539)
add await date accessed to run first and rename with extension consideration
This commit is contained in:
parent
7e8bfcd2b6
commit
9ddfee8916
|
@ -28,6 +28,7 @@ import { Modal, ModalRef } from '~/components/layout/Modal';
|
||||||
import { tw, twStyle } from '~/lib/tailwind';
|
import { tw, twStyle } from '~/lib/tailwind';
|
||||||
import { useActionsModalStore } from '~/stores/modalStore';
|
import { useActionsModalStore } from '~/stores/modalStore';
|
||||||
|
|
||||||
|
import { toast } from '~/components/primitive/Toast';
|
||||||
import FileInfoModal from './FileInfoModal';
|
import FileInfoModal from './FileInfoModal';
|
||||||
import RenameModal from './RenameModal';
|
import RenameModal from './RenameModal';
|
||||||
|
|
||||||
|
@ -76,7 +77,11 @@ export const ActionsModal = () => {
|
||||||
const filePath = data && getIndexedItemFilePath(data);
|
const filePath = data && getIndexedItemFilePath(data);
|
||||||
|
|
||||||
// Open
|
// 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], {
|
const queriedFullPath = useLibraryQuery(['files.getPath', filePath?.id ?? -1], {
|
||||||
enabled: filePath != null
|
enabled: filePath != null
|
||||||
});
|
});
|
||||||
|
@ -99,9 +104,9 @@ export const ActionsModal = () => {
|
||||||
});
|
});
|
||||||
filePath &&
|
filePath &&
|
||||||
filePath.object_id &&
|
filePath.object_id &&
|
||||||
updateAccessTime.mutateAsync([filePath.object_id]).catch(console.error);
|
await updateAccessTime.mutateAsync([filePath.object_id]).catch(console.error);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
// TODO: Handle Error & toast message
|
toast.error("Error opening object")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -179,7 +184,7 @@ export const ActionsModal = () => {
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
</Modal>
|
</Modal>
|
||||||
<RenameModal objectName={filePath?.name ?? ''} ref={renameRef} />
|
<RenameModal ref={renameRef} />
|
||||||
<FileInfoModal ref={fileInfoRef} data={data} />
|
<FileInfoModal ref={fileInfoRef} data={data} />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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 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 { forwardRef } from 'react';
|
||||||
import { Pressable, Text, View } from 'react-native';
|
import { Pressable, Text, View } from 'react-native';
|
||||||
import FileThumb from '~/components/explorer/FileThumb';
|
import FileThumb from '~/components/explorer/FileThumb';
|
||||||
|
@ -42,7 +42,7 @@ const FileInfoModal = forwardRef<ModalRef, FileInfoModalProps>((props, ref) => {
|
||||||
const { data } = props;
|
const { data } = props;
|
||||||
const modalRef = useForwardedRef(ref);
|
const modalRef = useForwardedRef(ref);
|
||||||
const filePathData = data && getItemFilePath(data);
|
const filePathData = data && getItemFilePath(data);
|
||||||
|
const objectData = data && getItemObject(data);
|
||||||
return (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
ref={modalRef}
|
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 && (
|
{filePathData && 'cas_id' in filePathData && (
|
||||||
<>
|
<>
|
||||||
{/* Indexed */}
|
{/* Indexed */}
|
||||||
|
|
|
@ -10,11 +10,8 @@ import useForwardedRef from '~/hooks/useForwardedRef';
|
||||||
import { tw } from '~/lib/tailwind';
|
import { tw } from '~/lib/tailwind';
|
||||||
import { useActionsModalStore } from '~/stores/modalStore';
|
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 modalRef = useForwardedRef(ref);
|
||||||
const [newName, setNewName] = useState('');
|
const [newName, setNewName] = useState('');
|
||||||
const rspc = useRspcLibraryContext();
|
const rspc = useRspcLibraryContext();
|
||||||
|
@ -22,6 +19,9 @@ const RenameModal = forwardRef<ModalRef, Props>((props, ref) => {
|
||||||
const inputRef = useRef<TextInput>(null);
|
const inputRef = useRef<TextInput>(null);
|
||||||
|
|
||||||
const filePathData = data && getIndexedItemFilePath(data);
|
const filePathData = data && getIndexedItemFilePath(data);
|
||||||
|
const fileName = filePathData?.name ?? '';
|
||||||
|
const fileExtension = filePathData?.extension ?? '';
|
||||||
|
const combined = `${fileName}${fileExtension ? `.${fileExtension}` : ''}`;
|
||||||
|
|
||||||
const renameFile = useLibraryMutation(['files.renameFile'], {
|
const renameFile = useLibraryMutation(['files.renameFile'], {
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
|
@ -35,8 +35,9 @@ const RenameModal = forwardRef<ModalRef, Props>((props, ref) => {
|
||||||
|
|
||||||
// set input value to object name on initial render
|
// set input value to object name on initial render
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setNewName(props.objectName);
|
if (!fileName) return;
|
||||||
}, [props.objectName]);
|
setNewName(combined);
|
||||||
|
}, [fileName, combined]);
|
||||||
|
|
||||||
const textRenameHandler = async () => {
|
const textRenameHandler = async () => {
|
||||||
switch (data?.type) {
|
switch (data?.type) {
|
||||||
|
@ -66,7 +67,7 @@ const RenameModal = forwardRef<ModalRef, Props>((props, ref) => {
|
||||||
<Modal
|
<Modal
|
||||||
ref={modalRef}
|
ref={modalRef}
|
||||||
title="Rename"
|
title="Rename"
|
||||||
onDismiss={() => setNewName(props.objectName)}
|
onDismiss={() => setNewName(combined)}
|
||||||
enableContentPanningGesture={false}
|
enableContentPanningGesture={false}
|
||||||
enablePanDownToClose={false}
|
enablePanDownToClose={false}
|
||||||
snapPoints={['20']}
|
snapPoints={['20']}
|
||||||
|
@ -75,11 +76,11 @@ const RenameModal = forwardRef<ModalRef, Props>((props, ref) => {
|
||||||
<ModalInput
|
<ModalInput
|
||||||
ref={inputRef}
|
ref={inputRef}
|
||||||
autoFocus
|
autoFocus
|
||||||
onFocus={() => inputRef.current?.setSelection(0, newName.length)}
|
onFocus={() => inputRef.current?.setSelection(0, fileName.length)}
|
||||||
value={newName}
|
value={newName}
|
||||||
onChangeText={(t) => setNewName(t)}
|
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>
|
<Text style={tw`font-medium text-ink`}>Save</Text>
|
||||||
</Button>
|
</Button>
|
||||||
</View>
|
</View>
|
||||||
|
|
Loading…
Reference in a new issue