Merge pull request #17 from gilesv/issue#16

v.0.1.0

src/appVersion.ts

@@ -0,0 +1 @@
+export default "0.1.0";

src/components/Dashboard.tsx

@@ -6,16 +6,18 @@ import { IStore } from "../redux/reducers";
 import { connect } from "react-redux";
 import { download } from "../services/file.service";
 import Notification from "../entities/notification.entity";
-import { Story } from "../entities/story.entity";
+import { Story, StoryId } from "../entities/story.entity";
 import IEntityMap from "../redux/utils/entity-map.interface";
 import NotifyDock from "./NotifyDock";
 import { setStateClean } from "../redux/actions";
+import { importFromStorage, exportToStorage } from "../services/localStorage.service";
+import SaveInfo from "./SaveInfo";
 
 interface Props {
   selectedStory: number,
   stories: IEntityMap<Story>,
   isStateDirty: boolean,
-  pardalVersion: string,
+  appVersion: string,
   [key: string]: any
 }
 
@@ -28,23 +30,45 @@ class Dashboard extends React.Component<Props> {
   }
 
   public componentDidMount() {
-    const { isStateDirty } = this.props;
-    window.onbeforeunload = (e: any) => {
-      return "";
-    };
+    this.restorePreviousWork();
+    this.saveProgress();
   }
 
-  private notify(notification: Notification) {
-    NotifyDock.show(notification);
+  private restorePreviousWork() {
+    const storageState = importFromStorage();
+
+    if (storageState) {
+      Trader.importStories(storageState, FileType.JSON);
+      this.props.dispatch(setStateClean());
+
+      this.notify(new Notification("Your work was restored!", "tick"));
+    }
+  }
+
+  private saveProgress() {
+    setInterval(() => {
+      if (this.props.isStateDirty) {
+        const json = Trader.exportStories(
+          this.props.stories.ids.map((storyId: StoryId) => this.props.stories.entities[storyId]),
+          FileType.JSON,
+          this.props.appVersion
+        );
+
+        exportToStorage(json);
+        this.props.dispatch(setStateClean());
+        console.log("Progress saved.");
+      }
+    }, 2500);
   }
 
   public exportStory(fileType: FileType) {
     const storyIndex = this.props.selectedStory;
     const story = this.props.stories.entities[this.props.stories.ids[storyIndex]];
-    const result = Trader.exportStory(story, fileType);
+    const result = Trader.exportStories([story], fileType, this.props.appVersion);
 
     this.notify(new Notification("Your download will begin shortly.", "download"));
-    setTimeout(() => download(story.name, fileType, result), 1500);
+
+    setTimeout(() => download(story.name, fileType, result), 1000);
     this.props.dispatch(setStateClean());
   }
 
@@ -57,7 +81,7 @@ class Dashboard extends React.Component<Props> {
         let notification;
 
         try {
-          const storyName = Trader.importStory(e.target.result, FileType.JSON);
+          const storyName = Trader.importStories(e.target.result, FileType.JSON);
           notification = new Notification(`"${storyName}" was imported successfully.`, "tick")
         } catch (e) {
           notification = new Notification(`${e.message}`, "error");
@@ -69,14 +93,18 @@ class Dashboard extends React.Component<Props> {
     }
   }
 
+  private notify(notification: Notification) {
+    NotifyDock.show(notification);
+  }
+
   render() {
-    const { stories, pardalVersion } = this.props;
+    const { stories, appVersion, isStateDirty } = this.props;
     return (
       <div className="app">
         <div className="dashboard">
           <aside>
             <header>
-              <div className="app-title"> >=pardal<span>v{pardalVersion}</span></div>
+              <div className="app-title"> >=pardal<span>v{appVersion}</span></div>
             </header>
 
             <StoryList importStory={this.importStory} />

src/components/SaveInfo.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Icon } from "@blueprintjs/core";
+
+interface Props {
+  isSaving: boolean
+}
+
+export default function SaveInfo(props: Props) {
+  const { isSaving } = props;
+
+  return (
+    <div className="save-info">
+      {
+        isSaving ? 'Saving...' : <span title="Your changes have been saved."><Icon icon="small-tick" iconSize={15}></Icon></span>
+      }
+    </div>
+  );
+}

src/components/StoryDetails.tsx

@@ -9,6 +9,7 @@ import { TaskId, Task } from "../entities/task.entity";
 import { updateStory } from "../redux/actions";
 import StoryForm from "./StoryForm";
 import { FileType } from "../services/trader.service";
+import SaveInfo from "./SaveInfo";
 
 interface Props {
   selectedStory: Story,
@@ -48,12 +49,12 @@ class StoryDetails extends React.Component<Props> {
   }
 
   render() {
-    const { selectedStory } = this.props;
+    const { selectedStory, isStateDirty } = this.props;
 
     const exportMenu = (
       <Menu>
         <Menu.Item text="To JSON file" onClick={() => this.props.exportStory(FileType.JSON)} />
-        <Menu.Item text="To TXT file" onClick={() => this.props.exportStory(FileType.DTD)} />
+        <Menu.Item text="To TXT file" onClick={() => this.props.exportStory(FileType.TXT)} />
       </Menu>
     );
 
@@ -74,6 +75,7 @@ class StoryDetails extends React.Component<Props> {
                 </div>
 
                 <div className="story-details__controls">
+                  <SaveInfo isSaving={isStateDirty} />
                   <Popover content={exportMenu} position={Position.BOTTOM_RIGHT} minimal={true}>
                     <Button intent="none" text="Export" icon="export" rightIcon="caret-down" />
                   </Popover>
@@ -103,6 +105,7 @@ const mapStateToProps = (state: IStore, props: any): Props => {
     selectedStory,
     tasks: state.tasks.entities,
     tasksIds: state.tasks.ids,
+    isStateDirty: state.ui.isDirty,
     ...props
   };
 }

src/index.tsx

@@ -4,6 +4,7 @@ import Dashboard from './components/Dashboard';
 import * as serviceWorker from './serviceWorker';
 import { Provider } from "react-redux";
 import store from "./redux/store";
+import appVersion from './appVersion';
 
 // Styles
 import "normalize.css";
@@ -15,7 +16,7 @@ const version = "0.0.2";
 
 ReactDOM.render(
   <Provider store={store}>
-    <Dashboard pardalVersion={version} />
+    <Dashboard appVersion={appVersion} />
   </Provider>,
   document.getElementById('root')
 );

src/services/file.service.ts

@@ -2,7 +2,7 @@ import { FileType } from "../services/trader.service";
 
 const Extension = {
   [FileType.JSON]: "json",
-  [FileType.DTD]: "txt"
+  [FileType.TXT]: "txt"
 };
 
 export function download(fileName: string, fileType: FileType, bytes: string) {

src/services/localStorage.service.ts

@@ -0,0 +1,9 @@
+const LOCAL_STORAGE_KEY = "state";
+
+export function importFromStorage(): string {
+    return localStorage[LOCAL_STORAGE_KEY];
+}
+
+export function exportToStorage(json: string) {
+    localStorage[LOCAL_STORAGE_KEY] = json;
+}

src/services/trader.service.ts

@@ -1,12 +1,12 @@
 import { Story, StoryId } from "../entities/story.entity";
 import { IStore } from "../redux/reducers";
 import store from "../redux/store";
-import { TaskId, Task, TaskArea } from "../entities/task.entity";
+import { Task, TaskArea, TaskId } from "../entities/task.entity";
 import { addStory, addTask } from "../redux/actions";
 
 export enum FileType {
   JSON,
-  DTD
+  TXT
 }
 
 class Trader {
@@ -15,44 +15,54 @@ class Trader {
   constructor(store: any) {
     this.store = store;
   }
-  exportStory(story: Story, to: FileType): string {
+
+  exportStories(stories: Story[], to: FileType, version: string): string {
     const state = this.store.getState();
 
     switch (to) {
       case FileType.JSON:
-        return this.exportStoryToJSON(story, state);
-        break;
+        return this.exportStoriesToJSON(stories, state, version);
 
-      case FileType.DTD:
-        return this.exportStoryToDTD(story, state);
-        break;
+      case FileType.TXT:
+        return this.exportStoriesToTXT(stories, state);
 
       default:
         throw new Error("Invalid export file type");
     }
   }
 
-  private exportStoryToJSON(story: Story, state: IStore) {
+  private exportStoriesToJSON(stories: Story[], state: IStore, version: string) {
+    const plainStories = stories.map((story: any) => {
+      const storyObj = { ...story };
+      storyObj.tasks = story.tasks.map((taskId: TaskId) => state.tasks.entities[taskId]);
+
+      return storyObj;
+    })
+
     return JSON.stringify({
-      story: {
-        ...story,
-        tasks: story.tasks.map(taskId => state.tasks.entities[taskId])
-      }
+      v: version,
+      stories: plainStories
     }, null, 3);
   }
 
-  private exportStoryToDTD(story: Story, state: IStore) {
+  private exportStoriesToTXT(stories: Story[], state: IStore) {
+    const story = stories[0]; // no support for multiple stories txt exportation
+
+    if (!story) {
+      throw new Error("No stories selected to export");
+    }
+
     const tasks = story.tasks.map(taskId => state.tasks.entities[taskId]);
-    let dtdContent = this.storyToDTDFormat(story);
+    let TXTContent = this.storyToTXTFormat(story);
 
     for (let task of tasks) {
-      dtdContent += "\n" + this.taskToDTDFormat(task, story.name);
+      TXTContent += "\n" + this.taskToTXTFormat(task, story.name);
     }
 
-    return dtdContent;
+    return TXTContent;
   }
 
-  private storyToDTDFormat(story: Story): string {
+  private storyToTXTFormat(story: Story): string {
     return [
       `[STORY][${story.name}] ${story.title}`,
       `[PRIORITY]: ${story.priority}`,
@@ -61,7 +71,7 @@ class Trader {
     ].join("\n");
   }
 
-  private taskToDTDFormat(task: Task, storyName: string): string {
+  private taskToTXTFormat(task: Task, storyName: string): string {
     return [
       `[${task.type}][${storyName}][${task.area === TaskArea.BOTH ? 'BE][FE' : task.area}][${task.assignee}] ${task.title}`,
       `[PRIORITY]: ${task.priority}`,
@@ -93,15 +103,34 @@ class Trader {
     return result;
   }
 
-  importStory(source: string, from: FileType): string {
+  importStories(source: string, from: FileType): string {
     const obj = this.toObjectTree(source);
-    const nextStoryId = this.store.getState().stories.ids.length;
+    const sourceVersion = obj.v;
 
     try {
-      this.importStoryToStore(obj.story, nextStoryId);
-      this.importTasksToStore(obj.story.tasks, nextStoryId)
+      switch (sourceVersion) {
+        case undefined:
+        case "0.0.2":
+          const nextStoryId = this.store.getState().stories.ids.length;
+          this.importStoryToStore(obj.story, nextStoryId);
+          this.importTasksToStore(obj.story.tasks, nextStoryId);
+          return obj.story.name;
 
-      return obj.story.name;
+        // case "next-version" <-- add new cases here if the json format changes in future versions
+
+        default: // current version
+          let labels: string[] = [];
+          obj.stories.forEach((storyObj: any) => {
+            const nextStoryId = this.store.getState().stories.ids.length;
+
+            this.importStoryToStore(storyObj, nextStoryId);
+            this.importTasksToStore(storyObj.tasks, nextStoryId);
+
+            labels.push(storyObj.name);
+          });
+
+          return labels.join(", ");
+      }
     } catch (e) {
       throw new Error("Invalid JSON content: " + e.message);
     }
@@ -118,21 +147,14 @@ class Trader {
       story.description = storyObj.description;
       story.startDate = this.parseDate(storyObj.startDate);
       story.handOffDate = this.parseDate(storyObj.handOffDate);
+      story.tasks = [];
 
       this.store.dispatch(addStory(story));
     } catch (e) {
       throw new Error("incomplete story data. " + e.message);
     }
   }
 
-  private parseDate(dateStr: string): Date {
-    if (isNaN(Date.parse(dateStr))) {
-      throw new Error(`could not parse date: '${dateStr}'`);
-    } else {
-      return new Date(dateStr)
-    };
-  }
-
   private importTasksToStore(tasksArray: any[], storyId: StoryId) {
     const state = this.store.getState();
     const newTasks: Task[] = [];
@@ -165,6 +187,14 @@ class Trader {
     }
   }
 
+  private parseDate(dateStr: string): Date {
+    if (isNaN(Date.parse(dateStr))) {
+      throw new Error(`could not parse date: '${dateStr}'`);
+    } else {
+      return new Date(dateStr)
+    };
+  }
+
   private toObjectTree(source: string): any {
     try {
       return JSON.parse(source);

src/styles/components/save-info.scss

@@ -0,0 +1,5 @@
+.save-info {
+  margin-right: 12px;
+  font-size: 11px;
+  text-align: right;
+}

src/styles/components/story-details.scss

@@ -15,6 +15,9 @@
   &__controls {
     margin-top: 5px;
     margin-right: 5px;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
 
     button.bp3-button + button.bp3-button {
       margin-left: 11px;

src/styles/components/story-list.scss

@@ -24,7 +24,8 @@
     overflow-y: auto;
 
     @media (min-width: 900px) {
-      height: 300px;
+      min-height: 300px;
+      max-height: 500px;
     }
   }