Functional file upload and download, URL based navigation

Wapikoni-Technique · Mar 26, 2020 · da17676 · da17676
1 parent cf6d28c
commit da17676
Show file tree

Hide file tree

Showing 34 changed files with 687 additions and 445 deletions.
diff --git a/.eslintcache b/.eslintcache
diff --git a/app/Routes.js b/app/Routes.js
@@ -9,7 +9,7 @@ import OpenLibraryContainer from './containers/OpenLibraryContainer';
 import TestPage from './containers/TestPage';
 import LoginPage from './containers/LoginPage';
 import AccountPage from './containers/AccountPage';
-import ProjectViewPage from './containers/ProjectViewPage'
+import ProjectViewPage from './containers/ProjectViewPage';
 
 export default () => (
   <App>

diff --git a/app/actions/core.js b/app/actions/core.js
@@ -5,6 +5,9 @@ export const CORE_LOADED = 'CORE_LOADED';
 export const ACCOUNT_LOADED = 'ACCOUNT_LOADED';
 export const CREATED_PROJECT = 'CREATED_PROJECT';
 export const LOADED_PROJECT = 'LOADED_PROJECT';
+export const ADDED_FILE = 'ADDED_FILE';
+export const DONWLOADED_FILE = 'DOWNLOADED_FILE';
+export const DELETED_FILE = 'DELETED_FILE';
 
 const getCore = () => remote.getGlobal('loadCore')();
 
@@ -15,40 +18,84 @@ export const loadCore = createAction(CORE_LOADED, async () => {
   };
 });
 
-export const loadAccount = createAction(ACCOUNT_LOADED, async (username) => {
-	const core = await getCore()
-	const account = await core.accounts.get(username)
-	const accountInfo = await account.getInfo()
-	const projects = await account.getProjectsInfo()
-
-	return {
-		account,
-		accountInfo,
-		projects
-	};
-})
+export const loadAccount = createAction(ACCOUNT_LOADED, async username => {
+  const core = await getCore();
+  const account = await core.accounts.get(username);
+  const accountInfo = await account.getInfo();
+  const projects = await account.getProjectsInfo();
 
-export const createProject = createAction(CREATED_PROJECT, async (username, info) => {
-	const core = await getCore()
-	const account = await core.accounts.get(username)
-	const project = await account.createProject(info)
-	const projectInfo = await project.getInfo()
+  return {
+    account,
+    accountInfo,
+    projects
+  };
+});
 
-	return {
-		project,
-		projectInfo
-	}
-})
+export const createProject = createAction(
+  CREATED_PROJECT,
+  async (username, info) => {
+    const core = await getCore();
+    const account = await core.accounts.get(username);
+    const project = await account.createProject(info);
+    const projectInfo = await project.getInfo();
+
+    return {
+      project,
+      projectInfo
+    };
+  }
+);
+
+export const loadProject = createAction(
+  LOADED_PROJECT,
+  async (key, path = '/') => {
+    const core = await getCore();
+    const project = await core.projects.get(key);
+    const projectInfo = await project.getInfo();
+    const files = await project.getFileList(path);
+
+    return {
+      project,
+      projectInfo,
+      files
+    };
+  }
+);
+
+export const addFilesToProjectFolderWithDialog = createAction(
+  ADDED_FILE,
+  async (projectKey, path) => {
+    const core = await getCore();
+    const project = await core.projects.get(projectKey);
+    const { filePaths } = await project.showLoadFile(path);
+		const files = await project.getFileList(path)
+
+    return {
+      filePaths,
+      files
+    };
+  }
+);
+
+export const downloadFileFromProjectWithDialog = createAction(
+  DONWLOADED_FILE,
+  async (projectKey, path) => {
+    const core = await getCore();
+    const project = await core.projects.get(projectKey);
+
+    const { filePath } = await project.showSaveFile(path);
+
+    return { filePath };
+  }
+);
+
+export const deleteFile = createAction(DELETED_FILE, async (projectKey, path) => {
+	const core = await getCore();
+	const project = await core.projects.get(projectKey)
+
+	await project.deleteFile(path)
+
+  const files = await project.getFileList('/')
 
-export const loadProject = createAction(LOADED_PROJECT, async (key, path="/") => {
-	const core = await getCore()
-	const project = await core.projects.get(key)
-	const projectInfo = await project.getInfo()
-	const files = await project.archive.readdir(path, {includeStats: true})
-
-	return {
-		project,
-		projectInfo,
-		files,
-	}
+	return {files}
 })
diff --git a/app/components/Account.css b/app/components/Account.css
@@ -1,35 +1,36 @@
 .background {
-	background: var(--t-color-lightgreen);
+  background: var(--t-color-lightgreen);
 }
 
 .accountInfo {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .accountName {
-	font-weight: bold;
+  font-weight: bold;
 }
 
 .project {
-	background: var(--t-color-yellow);
-	width: 150px;
-	height: 150px;
-	margin: 1em;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	border-radius: var(--t-radius);
-	color: inherit;
-	text-decoration: none;
+  background: var(--t-color-yellow);
+  width: 150px;
+  height: 150px;
+  margin: 1em;
+  margin-bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--t-radius);
+  color: inherit;
+  text-decoration: none;
 }
 
 .projects {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: center;
-	align-items: center;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
 }
diff --git a/app/components/Account.js b/app/components/Account.js
@@ -1,49 +1,55 @@
-import React, {Component} from 'react'
-import {Link} from 'react-router-dom'
+import React, { Component } from 'react';
+import Link from './Link';
 
 import PageContainer from './PageContainer';
 import AccountIcon from './AccountIcon';
-import Button from './Button'
+import Button from './Button';
 
-import routes from '../constants/routes.json'
-
-import styles from './Account.css'
+import styles from './Account.css';
 
 export default class Account extends Component {
-
-	componentDidMount() {
-		const account = this.props.match.params.account
-		this.props.loadAccount(account)
-	}
-
-	render() {
-		const {accountInfo, projects} = this.props;
-
-		if(!accountInfo) return (
-			<PageContainer backgroundClass={styles.background}>
-				<i className="fas fa-spinner fa-pulise"></i>
-			</PageContainer>
-		)
-
-		const {name, image, key} = this.props.accountInfo
-		const goToCreate = () => this.props.push(`/account/${key}/projects/new/`)
-
-		const headerContent = (
-			<Button onClick={goToCreate}>New Project</Button>
-		);
-
-		return (
-			<PageContainer backgroundClass={styles.background} headerContent={headerContent}>
-				<div className={styles.accountInfo}>
-					<AccountIcon image={image} />
-					<div className={styles.accountName}>{name}</div>
-				</div>
-				<div className={styles.projects}>
-					{projects.map(({key, title}) => (
-						<Link className={styles.project} to={`/project/${key}/view/`} key={key}>{title}</Link>
-					))}
-				</div>
-			</PageContainer>
-		)
-	}
+  componentDidMount() {
+    const { account } = this.props.match.params;
+    this.props.loadAccount(account);
+  }
+
+  render() {
+    const { accountInfo, projects } = this.props;
+
+    if (!accountInfo)
+      return (
+        <PageContainer backgroundClass={styles.background} {...this.props}>
+          <i className="fas fa-spinner fa-pulse" />
+        </PageContainer>
+      );
+
+    const { name, image, key } = this.props.accountInfo;
+    const goToCreate = () => this.props.push(`/account/${key}/projects/new/`);
+
+    const headerContent = <Button onClick={goToCreate}>New Project</Button>;
+
+    return (
+      <PageContainer
+        backgroundClass={styles.background}
+        headerContent={headerContent}
+        {...this.props}
+      >
+        <div className={styles.accountInfo}>
+          <AccountIcon image={image} />
+          <div className={styles.accountName}>{name}</div>
+        </div>
+        <div className={styles.projects}>
+          {projects.map(({ key, url, title }) => (
+            <Link
+              className={styles.project}
+              to={`${url}view/`}
+              key={key}
+            >
+              {title}
+            </Link>
+          ))}
+        </div>
+      </PageContainer>
+    );
+  }
 }
diff --git a/app/components/AccountIcon.css b/app/components/AccountIcon.css
@@ -1,10 +1,9 @@
 .accounticon {
-    width: 3em;
-    height: 3em;
-    border-radius: 50%;
-    background: magenta;
-    align-self: center;
-    margin-bottom: 1em;
-    overflow: hidden;
+  width: 3em;
+  height: 3em;
+  border-radius: 50%;
+  background: magenta;
+  align-self: center;
+  margin-bottom: 1em;
+  overflow: hidden;
 }
-
diff --git a/app/components/AccountIcon.js b/app/components/AccountIcon.js
@@ -1,8 +1,6 @@
-import React from 'react'
+import React from 'react';
 import styles from './AccountIcon.css';
 
-export default ({image}) => {
-	return (
-		<img className={styles.accounticon} src={image} />
-	)
-}
+export default ({ image }) => {
+  return <img className={styles.accounticon} src={image} />;
+};
diff --git a/app/components/Button.css b/app/components/Button.css
@@ -1,9 +1,11 @@
 .button {
-    padding: 0.5em;
-    min-width: 8em;
-    font-weight: bold;
-    border: none;
-    border-radius: var(--t-radius);
-    font-size: 1.2em;
+  padding: 0.5em;
+  min-width: 8em;
+  font-weight: bold;
+  border: none;
+  border-radius: var(--t-radius);
 }
 
+.big {
+  font-size: 1.2em;
+}
diff --git a/app/components/Button.js b/app/components/Button.js
@@ -1,7 +1,14 @@
-import React from 'react'
+import React from 'react';
 
-import styles from './Button.css'
+import styles from './Button.css';
 
-export default ({className="", children, ...props}) => (
-	<button className={`${styles.button} ${className}`} {...props}>{children}</button>
-)
+export default function ({ className = '', children, big, ...props }) {
+	const classList = [styles.button]
+	if(className) classList.push(className)
+	if(big) classList.push(styles.big)
+	return (
+	  <button className={classList.join(' ')} {...props}>
+	    {children}
+	  </button>
+  )
+};
diff --git a/app/components/Home.js b/app/components/Home.js
@@ -5,22 +5,24 @@ import routes from '../constants/routes.json';
 import styles from './Home.css';
 
 type Props = {
-	push: (url: string) => void
+  push: (url: string) => void
 };
 
 export default class Home extends Component<Props> {
   props: Props;
 
   componentDidMount() {
-	const {push, loadCore} = this.props
+    const { push, loadCore } = this.props;
 
-	loadCore().then(() => {push(routes.LOGIN)})
+    loadCore().then(() => {
+      push(routes.LOGIN);
+    });
   }
 
   render() {
     return (
       <div className={styles.container} data-tid="container">
-		<i className="fas fa-spinner fa-pulse"></i>
+        <i className="fas fa-spinner fa-pulse" />
       </div>
     );
   }