Use easy-peasy to store file state data

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

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>