resolved merge issues

package.json

@@ -10,6 +10,7 @@
     "react-redux": "^6.0.0",
     "react-scripts": "2.1.2",
     "redux": "^4.0.1",
+    "redux-devtools-extension": "^2.13.8",
     "redux-thunk": "^2.3.0"
   },
   "scripts": {

src/actions/action-creators.test.js

@@ -13,7 +13,10 @@ const initialState = {
     frames: {},
     frameIDs: [],
     gifProgress: 0,
-    gifData: ''
+    gifData: '',
+    caption: '',
+    fontColor: '#000000',
+    gifFileName: ''
   },
   settings: {
     image: {
@@ -31,7 +34,7 @@ const initialState = {
     strategy: 'contain'
   },
   ui: {
-    expandedPane: 'NONE',
+    expandedPane: panes.NONE,
     previewIdx: 0,
     playing: false,
     error: ''

src/actions/index.js

@@ -27,14 +27,25 @@
  */
 
 import * as types from '../constants/action-types';
-import { setSliderByIndex, getImageData } from '../lib/calc-helpers';
+import {
+  setSliderByIndex,
+  getImageData,
+  loadSavedGraph,
+  saveCurrentGraph
+} from '../lib/calc-helpers';
 import { startTimer, clearTimer } from '../lib/timer';
 import {
   gifCreationProblem,
   badBurstInput,
-  badSettingsInput
+  badSettingsInput,
+  badNameInput
 } from '../lib/error-messages';
-import { getBurstErrors, getSettingsErrors } from '../lib/input-helpers';
+import {
+  getBurstErrors,
+  getSettingsErrors,
+  getSaveGraphErrors
+} from '../lib/input-helpers';
+import {} from '../lib/input-helpers';
 
 const ERROR_DELAY = 3000;
 let nextFrameID = 0;
@@ -48,11 +59,36 @@ export const addFrame = imageData => ({
   }
 });
 
+export const addSavedFrame = (imageData, id) => ({
+  type: types.ADD_FRAME,
+  payload: {
+    id,
+    imageData
+  }
+});
+
 export const updateGIFProgress = progress => ({
   type: types.UPDATE_GIF_PROGRESS,
   payload: { progress }
 });
 
+export const updateText = text => ({
+  type: types.UPDATE_TEXT,
+  payload: { text }
+});
+
+export const updateTextColor = fontColor => ({
+  type: types.UPDATE_TEXT_COLOR,
+  payload: { fontColor }
+});
+
+export const updateGIFFileName = name => {
+  return {
+    type: types.UPDATE_GIF_FILENAME,
+    payload: { gifFileName: name }
+  };
+};
+
 export const addGIF = imageData => ({
   type: types.ADD_GIF,
   payload: { imageData }
@@ -220,3 +256,24 @@ export const generateGIF = (images, opts, gifMaker = gifshot) => (
     }
   });
 };
+
+export const loadFramesFromLocal = dateString => (dispatch, getState) => {
+  dispatch(reset());
+  const { frameIDs, frames } = loadSavedGraph(dateString);
+  for (let val = 0; val < frameIDs.length; val += 1) {
+    // get corresponding image
+    const id = frameIDs[val];
+    const imageData = frames[id];
+    dispatch(addSavedFrame(imageData, id));
+  }
+};
+
+export const saveGraph = (name, frames, frameIDs) => async dispatch => {
+  const saveErrors = getSaveGraphErrors(name);
+  if (saveErrors.name) {
+    dispatch(flashError(badNameInput(saveErrors.name)));
+    return;
+  }
+  const newGraph = await saveCurrentGraph(name, frames, frameIDs);
+  return newGraph;
+};

src/components/App.js

@@ -4,6 +4,7 @@ import SidebarContainer from '../containers/SidebarContainer';
 import PreviewContainer from '../containers/PreviewContainer';
 import BurstContainer from '../containers/BurstContainer';
 import SettingsContainer from '../containers/SettingsContainer';
+import FolderContainer from '../containers/FolderContainer';
 import ErrorToastContainer from '../containers/ErrorToastContainer';
 import CALCULATOR_OPTIONS from '../constants/calculator-options';
 import { initializeCalculator } from '../lib/calculator';
@@ -37,6 +38,7 @@ class App extends Component {
         <SettingsContainer />
         <PreviewContainer />
         <BurstContainer />
+        <FolderContainer />
         <SidebarContainer />
         <ErrorToastContainer />
       </div>

src/components/Folder.css

@@ -0,0 +1,198 @@
+.Folder {
+  position: absolute;
+  top: 40px;
+  left: 70px;
+  bottom: 0;
+  width: 378px;
+  background: #2e2e2e;
+  border-right: 1px solid black;
+  text-align: center;
+  transform: translateX(-100%);
+  transition: 0.2s transform;
+  color: #fff;
+}
+
+.Folder-expanded {
+  transform: translateX(0);
+  transition: 0.2s transform;
+}
+
+.Folder-input {
+  height: 20px;
+  width: 150px;
+  margin-bottom: 15px;
+  margin-top: 5px;
+  border: 1px solid #000;
+  font-size: 1em;
+  border-radius: 5px;
+  padding: 5px;
+  outline: none !important;
+  text-align: start;
+}
+
+.Folder-input-error {
+  border-color: #cc0000;
+}
+
+.Folder-saved-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 0;
+}
+
+.Folder-saved-item {
+  position: relative;
+  width: 100%;
+  z-index: 1;
+}
+
+.Folder-saved-item:hover {
+  cursor: pointer;
+}
+
+.Folder-delete-graph {
+  border: transparent;
+  position: absolute;
+  top: 0px;
+  right: 20px;
+}
+
+.Folder-saved-graph {
+  display: flex;
+  margin-bottom: 5px;
+  padding-left: 45px;
+  padding-right: 45px;
+  text-align: start;
+}
+
+.Folder-saved-graph > img {
+  border-radius: 5px;
+}
+
+.Folder-previous-items {
+  height: calc(88vh - 175px);
+  margin-top: 15px;
+  overflow: scroll;
+  overflow: -moz-scrollbars-none;
+  -ms-overflow-style: none;
+}
+
+.Folder-previous-items::-webkit-scrollbar {
+  width: 0 !important;
+}
+
+.Folder-titles {
+  padding-top: 30px;
+}
+
+.Folder-item-text {
+  display: block;
+  width: 225px;
+  padding-left: 10px;
+}
+
+.Folder-name-text {
+  text-align: start;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.Folder-small-text {
+  font-size: 0.75rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.Folder-button {
+  background: transparent;
+  color: #fff;
+  cursor: pointer;
+  outline: none !important;
+  border-radius: 5px;
+}
+
+.Folder-save {
+  border: 1px solid #fff;
+  width: 110px;
+  height: 35px;
+  margin-top: 10px;
+  font-size: 1em;
+}
+
+.Folder-delete-text {
+  transform: rotate(45deg);
+  font-size: 1.25rem;
+}
+
+.Folder-button:hover {
+  background: #484848;
+}
+
+.Folder-button:active {
+  background: #3b3b3b;
+}
+
+.Folder-button:focus {
+  background: #484848;
+  border-color: #e79600;
+}
+
+@media (max-width: 448px) {
+  .Folder {
+    width: calc(100vw - 70px);
+  }
+
+  .Folder-name-text {
+    width: 200px;
+  }
+
+  .Folder-small-text {
+    width: 200px;
+  }
+
+  .Folder-saved-graph {
+    padding-left: 25px;
+    padding-right: 25px;
+  }
+}
+
+@media (max-width: 390px) {
+  .Folder {
+    width: calc(100vw - 70px);
+  }
+
+  .Folder-name-text {
+    width: 175px;
+  }
+
+  .Folder-small-text {
+    width: 175px;
+  }
+
+  .Folder-saved-graph {
+    padding-left: 25px;
+    padding-right: 25px;
+  }
+}
+
+@media (max-width: 365px) {
+  .Folder {
+    width: calc(100vw - 70px);
+  }
+
+  .Folder-name-text {
+    width: 135px;
+  }
+
+  .Folder-small-text {
+    width: 135px;
+  }
+
+  .Folder-saved-graph {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}