StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Use easy-peasy to store file state data

Browse source
This commit is contained in:
Dane Everitt 2019-08-04 14:58:31 -07:00
parent 918e0e2947
commit 5f59210c85
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
11 changed files with 110 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

4
resources/scripts/components/elements/Field.tsx
View file

@ -8,10 +8,11 @@ interface Props {
name: string;
label?: string;
description?: string;
autoFocus?: boolean;
validate?: (value: any) => undefined | string | Promise<any>;
}
export default ({ id, type, name, label, description, validate }: Props) => (
export default ({ id, type, name, label, description, autoFocus, validate }: Props) => (
<Field name={name} validate={validate}>
{
({ field, form: { errors, touched } }: FieldProps) => (
@ -23,6 +24,7 @@ export default ({ id, type, name, label, description, validate }: Props) => (
id={id}
type={type}
{...field}
autoFocus={autoFocus}
className={classNames('input-dark', {
error: touched[field.name] && errors[field.name],
})}

9
resources/scripts/components/server/files/FileDropdownMenu.tsx
View file

@ -1,7 +1,6 @@
import React, { createRef, useEffect, useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faEllipsisH } from '@fortawesome/free-solid-svg-icons/faEllipsisH';
import { FileObject } from '@/api/server/files/loadDirectory';
import { CSSTransition } from 'react-transition-group';
import { faPencilAlt } from '@fortawesome/free-solid-svg-icons/faPencilAlt';
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
@ -9,15 +8,21 @@ import { faFileDownload } from '@fortawesome/free-solid-svg-icons/faFileDownload
import { faCopy } from '@fortawesome/free-solid-svg-icons/faCopy';
import { faLevelUpAlt } from '@fortawesome/free-solid-svg-icons/faLevelUpAlt';
import RenameFileModal from '@/components/server/files/RenameFileModal';
import { ServerContext } from '@/state/server';
type ModalType = 'rename' | 'move';
export default ({ file }: { file: FileObject }) => {
export default ({ uuid }: { uuid: string }) => {
const menu = createRef<HTMLDivElement>();
const [ visible, setVisible ] = useState(false);
const [ modal, setModal ] = useState<ModalType | null>(null);
const [ posX, setPosX ] = useState(0);
const file = ServerContext.useStoreState(state => state.files.contents.find(file => file.uuid === uuid));
if (!file) {
return null;
}
const windowListener = (e: MouseEvent) => {
if (e.button === 2 || !visible || !menu.current) {
return;

20
resources/scripts/components/server/files/FileManagerContainer.tsx
View file

@ -1,7 +1,6 @@
import React, { useEffect, useState } from 'react';
import FlashMessageRender from '@/components/FlashMessageRender';
import { ServerContext } from '@/state/server';
import loadDirectory, { FileObject } from '@/api/server/files/loadDirectory';
import { Actions, useStoreActions } from 'easy-peasy';
import { ApplicationStore } from '@/state';
import { httpErrorToHuman } from '@/api/http';
@ -9,22 +8,21 @@ import { CSSTransition } from 'react-transition-group';
import { Link } from 'react-router-dom';
import Spinner from '@/components/elements/Spinner';
import FileObjectRow from '@/components/server/files/FileObjectRow';
import { getDirectoryFromHash } from '@/helpers';
export default () => {
const [ loading, setLoading ] = useState(true);
const [ files, setFiles ] = useState<FileObject[]>([]);
const server = ServerContext.useStoreState(state => state.server.data!);
const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const { contents: files } = ServerContext.useStoreState(state => state.files);
const getDirectoryContents = ServerContext.useStoreActions(actions => actions.files.getDirectoryContents);
const urlDirectory = window.location.hash.replace(/^#(\/)+/, '/');
const load = () => {
setLoading(true);
clearFlashes();
loadDirectory(server.uuid, getDirectoryFromHash())
.then(files => {
setFiles(files);
setLoading(false);
})
getDirectoryContents(urlDirectory)
.then(() => setLoading(false))
.catch(error => {
if (error.response && error.response.status === 404) {
window.location.hash = '#/';
@ -36,7 +34,7 @@ export default () => {
});
};
const breadcrumbs = (): { name: string; path?: string }[] => getDirectoryFromHash().split('/')
const breadcrumbs = (): { name: string; path?: string }[] => urlDirectory.split('/')
.filter(directory => !!directory)
.map((directory, index, dirs) => {
if (index === dirs.length - 1) {
@ -86,7 +84,7 @@ export default () => {
<div>
{
files.map(file => (
<FileObjectRow key={file.name} directory={getDirectoryFromHash()} file={file}/>
<FileObjectRow key={file.name} file={file}/>
))
}
</div>

7
resources/scripts/components/server/files/FileObjectRow.tsx
View file

@ -9,8 +9,11 @@ import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
import React from 'react';
import { FileObject } from '@/api/server/files/loadDirectory';
import FileDropdownMenu from '@/components/server/files/FileDropdownMenu';
import { ServerContext } from '@/state/server';
export default ({ file }: { file: FileObject }) => {
const directory = ServerContext.useStoreState(state => state.files.directory);
export default ({ file, directory }: { file: FileObject; directory: string }) => {
return (
<a
key={file.name}
@ -50,7 +53,7 @@ export default ({ file, directory }: { file: FileObject; directory: string }) =>
distanceInWordsToNow(file.modifiedAt, { includeSeconds: true })
}
</div>
<FileDropdownMenu file={file}/>
<FileDropdownMenu uuid={file.uuid}/>
</a>
);
};

23
resources/scripts/components/server/files/RenameFileModal.tsx
View file

@ -1,26 +1,32 @@
import React from 'react';
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
import { Form, Formik, FormikActions } from 'formik';
import { FileObject } from '@/api/server/files/loadDirectory';
import Field from '@/components/elements/Field';
import { getDirectoryFromHash } from '@/helpers';
import { join } from 'path';
import renameFile from '@/api/server/files/renameFile';
import { ServerContext } from '@/state/server';
import { FileObject } from '@/api/server/files/loadDirectory';
interface FormikValues {
name: string;
}
export default ({ file, ...props }: RequiredModalProps & { file: FileObject }) => {
const server = ServerContext.useStoreState(state => state.server.data!);
type Props = RequiredModalProps & { file: FileObject };
export default ({ file, ...props }: Props) => {
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
const directory = ServerContext.useStoreState(state => state.files.directory);
const pushFile = ServerContext.useStoreActions(actions => actions.files.pushFile);
const submit = (values: FormikValues, { setSubmitting }: FormikActions<FormikValues>) => {
const renameFrom = join(getDirectoryFromHash(), file.name);
const renameTo = join(getDirectoryFromHash(), values.name);
const renameFrom = join(directory, file.name);
const renameTo = join(directory, values.name);
renameFile(server.uuid, { renameFrom, renameTo })
.then(() => props.onDismissed())
renameFile(uuid, { renameFrom, renameTo })
.then(() => {
pushFile({ ...file, name: values.name });
props.onDismissed();
})
.catch(error => {
setSubmitting(false);
console.error(error);
@ -41,6 +47,7 @@ export default ({ file, ...props }: RequiredModalProps & { file: FileObject }) =
name={'name'}
label={'File Name'}
description={'Enter the new name of this file or folder.'}
autoFocus={true}
/>
<div className={'mt-6 text-right'}>
<button className={'btn btn-sm btn-primary'}>