From 51a5f973f56a618886c5acd6212a271cbd96d0aa Mon Sep 17 00:00:00 2001 From: Billy Date: Mon, 10 Jun 2019 13:17:40 -0700 Subject: [PATCH 01/44] add redux devtools --- package-lock.json | 46 +++++++++++++++++++++++++++++++++++----------- package.json | 1 + src/index.js | 6 +++++- 3 files changed, 41 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 174dc95..95565ff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5508,7 +5508,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -5526,11 +5527,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5543,15 +5546,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -5654,7 +5660,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -5664,6 +5671,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5676,17 +5684,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -5703,6 +5714,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -5775,7 +5787,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -5785,6 +5798,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5860,7 +5874,8 @@ }, "safe-buffer": { "version": "5.1.1", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -5890,6 +5905,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -5907,6 +5923,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -5945,11 +5962,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.0.2", - "bundled": true + "bundled": true, + "optional": true } } }, @@ -11868,6 +11887,11 @@ "symbol-observable": "^1.2.0" } }, + "redux-devtools-extension": { + "version": "2.13.8", + "resolved": "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz", + "integrity": "sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg==" + }, "redux-mock-store": { "version": "1.5.3", "resolved": "https://registry.npmjs.org/redux-mock-store/-/redux-mock-store-1.5.3.tgz", diff --git a/package.json b/package.json index 8079fd8..212831d 100644 --- a/package.json +++ b/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": { diff --git a/src/index.js b/src/index.js index 9605613..da50e73 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { createStore, applyMiddleware } from 'redux'; +import { composeWithDevTools } from 'redux-devtools-extension'; import { Provider } from 'react-redux'; import thunkMiddleware from 'redux-thunk'; import rootReducer from './reducers'; @@ -10,7 +11,10 @@ import { togglePane } from './actions'; import greet from './lib/dev-greeting'; import './index.css'; -const store = createStore(rootReducer, applyMiddleware(thunkMiddleware)); +const store = createStore( + rootReducer, + composeWithDevTools(applyMiddleware(thunkMiddleware)) +); const closePane = () => store.dispatch(togglePane(panes.NONE)); From e5a57464456eeadbd82c1e7dc45bded1e403945c Mon Sep 17 00:00:00 2001 From: Billy Date: Mon, 10 Jun 2019 14:41:48 -0700 Subject: [PATCH 02/44] add generate gif form component, styling --- src/components/GenerateGifForm.css | 43 ++++++++++++++++++++++++ src/components/GenerateGifForm.js | 53 ++++++++++++++++++++++++++++++ src/components/Preview.css | 31 ++--------------- src/components/Preview.js | 14 +++----- src/containers/PreviewContainer.js | 3 +- 5 files changed, 105 insertions(+), 39 deletions(-) create mode 100644 src/components/GenerateGifForm.css create mode 100644 src/components/GenerateGifForm.js diff --git a/src/components/GenerateGifForm.css b/src/components/GenerateGifForm.css new file mode 100644 index 0000000..d3bf4f1 --- /dev/null +++ b/src/components/GenerateGifForm.css @@ -0,0 +1,43 @@ +.GenerateGifForm-input { + display: block; + height: 20px; + width: 200px; + margin: 15px auto 0; + border: 1px solid #000; + font-size: 1em; + border-radius: 5px; + padding: 5px; + outline: none !important; + text-align: center; +} + +.GenerateGifForm-input-error { + border-color: #cc0000; +} + +.GenerateGifForm-button { + width: 210px; + height: 35px; + margin-top: 15px; + font-size: 1em; + background: transparent; + border: 1px solid #fff; + border-radius: 5px; + color: #fff; + cursor: pointer; + outline: none !important; + animation: fade-in 0.5s; +} + +.GenerateGifForm-button:hover { + background: #484848; +} + +.GenerateGifForm-button:active { + background: #3b3b3b; +} + +.GenerateGifForm-button:focus { + border-color: #e79600; + background: #484848; +} diff --git a/src/components/GenerateGifForm.js b/src/components/GenerateGifForm.js new file mode 100644 index 0000000..7c273d1 --- /dev/null +++ b/src/components/GenerateGifForm.js @@ -0,0 +1,53 @@ +import React, { Component } from 'react'; +import './GenerateGifForm.css'; + +class GenerateGifForm extends Component { + constructor(props) { + super(props); + this.state = { name: '', titleText: '' }; + this.handleInputUpdate = this.handleInputUpdate.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + } + + handleSubmit(evt) { + evt.preventDefault(); + this.props.handleGenerateGIF(); + this.setState({ text: '' }); + } + + handleInputUpdate(evt) { + this.setState({ + [evt.target.name]: evt.target.value + }); + } + + render() { + return ( +
+ + + +
+ ); + } +} + +export default GenerateGifForm; diff --git a/src/components/Preview.css b/src/components/Preview.css index 19f5717..aa13c49 100644 --- a/src/components/Preview.css +++ b/src/components/Preview.css @@ -36,37 +36,10 @@ margin-top: 20px; } -.Preview-create-button { - width: 210px; - height: 35px; - margin-top: 10px; - font-size: 1em; - background: transparent; - border: 1px solid #fff; - border-radius: 5px; - color: #fff; - cursor: pointer; - outline: none !important; - animation: fade-in 0.5s; -} - -.Preview-create-button:hover { - background: #484848; -} - -.Preview-create-button:active { - background: #3b3b3b; -} - -.Preview-create-button:focus { - border-color: #e79600; - background: #484848; -} - .Preview-progress-outer { width: 210px; - height: 10px; - margin: 10px auto; + height: 15px; + margin: 15px auto 0; } .Preview-progress-inner { diff --git a/src/components/Preview.js b/src/components/Preview.js index 485895a..fae999d 100644 --- a/src/components/Preview.js +++ b/src/components/Preview.js @@ -1,11 +1,13 @@ import React, { Component } from 'react'; import classNames from 'classnames'; import Frame from './Frame'; +import GenerateGifForm from './GenerateGifForm'; import './Preview.css'; class Preview extends Component { constructor(props) { super(props); + this.state = { gifData: this.props.gifData }; this.handlePreviewUpdate = this.handlePreviewUpdate.bind(this); this.handleGenerateGIF = this.handleGenerateGIF.bind(this); this.handleTogglePlaying = this.handleTogglePlaying.bind(this); @@ -83,15 +85,9 @@ class Preview extends Component { {numFrames ? `${previewIdx + 1} / ${numFrames}` : '0 / 0'}
- {!!numFrames && ( - - )} + {!!numFrames && this.state.gifData.length === 0 ? ( + + ) : null}
{ const { images, ui, settings } = state; const { expandedPane, previewIdx, playing } = ui; - const { frames, frameIDs, gifProgress } = images; + const { frames, frameIDs, gifProgress, gifData } = images; const { width, height, oversample, interval } = settings.image; return { @@ -21,6 +21,7 @@ const mapStateToProps = (state, ownProps) => { frames, frameIDs, gifProgress, + gifData, width, height, oversample, From bc39693099e05ddfa4702a55e3470e64612acfc0 Mon Sep 17 00:00:00 2001 From: Billy Date: Mon, 10 Jun 2019 14:49:17 -0700 Subject: [PATCH 03/44] change preview render to reference gifData prop --- src/components/Preview.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Preview.js b/src/components/Preview.js index fae999d..4aa64cc 100644 --- a/src/components/Preview.js +++ b/src/components/Preview.js @@ -7,7 +7,6 @@ import './Preview.css'; class Preview extends Component { constructor(props) { super(props); - this.state = { gifData: this.props.gifData }; this.handlePreviewUpdate = this.handlePreviewUpdate.bind(this); this.handleGenerateGIF = this.handleGenerateGIF.bind(this); this.handleTogglePlaying = this.handleTogglePlaying.bind(this); @@ -85,7 +84,7 @@ class Preview extends Component { {numFrames ? `${previewIdx + 1} / ${numFrames}` : '0 / 0'}
- {!!numFrames && this.state.gifData.length === 0 ? ( + {!!numFrames && this.props.gifData.length === 0 ? ( ) : null}
From 22b3a303c2c38f64f34cdab68d8ce4512773c946 Mon Sep 17 00:00:00 2001 From: Billy Date: Mon, 10 Jun 2019 15:12:47 -0700 Subject: [PATCH 04/44] save filename to redux store functionality --- src/actions/index.js | 7 +++++++ src/components/GenerateGifForm.js | 4 +++- src/components/Preview.js | 5 ++++- src/constants/action-types.js | 1 + src/containers/PreviewContainer.js | 9 ++++++++- src/reducers/images.js | 12 +++++++++++- 6 files changed, 34 insertions(+), 4 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index 4e6e298..1741d3e 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -53,6 +53,13 @@ export const updateGIFProgress = progress => ({ payload: { progress } }); +export const updateGifFileName = name => { + return { + type: types.UPDATE_GIF_FILENAME, + payload: { gifFileName: name } + }; +}; + export const addGIF = imageData => ({ type: types.ADD_GIF, payload: { imageData } diff --git a/src/components/GenerateGifForm.js b/src/components/GenerateGifForm.js index 7c273d1..8e48473 100644 --- a/src/components/GenerateGifForm.js +++ b/src/components/GenerateGifForm.js @@ -12,7 +12,9 @@ class GenerateGifForm extends Component { handleSubmit(evt) { evt.preventDefault(); this.props.handleGenerateGIF(); - this.setState({ text: '' }); + this.props.updateGifFileName(this.state.name); + // set title + this.setState({ name: '', titleText: '' }); } handleInputUpdate(evt) { diff --git a/src/components/Preview.js b/src/components/Preview.js index 4aa64cc..4a8d112 100644 --- a/src/components/Preview.js +++ b/src/components/Preview.js @@ -85,7 +85,10 @@ class Preview extends Component {
{!!numFrames && this.props.gifData.length === 0 ? ( - + ) : null}
diff --git a/src/constants/action-types.js b/src/constants/action-types.js index 950302c..688d14b 100644 --- a/src/constants/action-types.js +++ b/src/constants/action-types.js @@ -11,6 +11,7 @@ export const ADD_FRAME = 'ADD_FRAME'; export const UPDATE_GIF_PROGRESS = 'UPDATE_GIF_PROGRESS'; export const ADD_GIF = 'ADD_GIF'; +export const UPDATE_GIF_FILENAME = 'UPDATE_GIF_FILENAME'; // UI export const UPDATE_PREVIEW_IDX = 'UPDATE_PREVIEW_IDX'; diff --git a/src/containers/PreviewContainer.js b/src/containers/PreviewContainer.js index 6f86aea..d3ff310 100644 --- a/src/containers/PreviewContainer.js +++ b/src/containers/PreviewContainer.js @@ -1,6 +1,7 @@ import { connect } from 'react-redux'; import Preview from '../components/Preview'; import { + updateGifFileName, generateGIF, updatePreviewIdx, startAnimation, @@ -31,7 +32,13 @@ const mapStateToProps = (state, ownProps) => { const PreviewContainer = connect( mapStateToProps, - { updatePreviewIdx, generateGIF, startAnimation, stopAnimation } + { + updatePreviewIdx, + generateGIF, + updateGifFileName, + startAnimation, + stopAnimation + } )(Preview); export default PreviewContainer; diff --git a/src/reducers/images.js b/src/reducers/images.js index fef790c..3e3d41d 100644 --- a/src/reducers/images.js +++ b/src/reducers/images.js @@ -12,6 +12,7 @@ import { ADD_FRAME, UPDATE_GIF_PROGRESS, ADD_GIF, + UPDATE_GIF_FILENAME, UPDATE_IMAGE_SETTING, UPDATE_BOUNDS_SETTING, UPDATE_STRATEGY, @@ -22,7 +23,8 @@ const initialState = { frames: {}, frameIDs: [], gifProgress: 0, - gifData: '' + gifData: '', + gifFileName: '' }; const images = (state = initialState, { type, payload }) => { @@ -64,6 +66,14 @@ const images = (state = initialState, { type, payload }) => { } }; + case UPDATE_GIF_FILENAME: + return { + ...state, + ...{ + gifFileName: payload.gifFileName + } + }; + case RESET: return initialState; From c12780d3d6b6b373ece529553da53babe56ba94d Mon Sep 17 00:00:00 2001 From: Billy Date: Mon, 10 Jun 2019 15:17:06 -0700 Subject: [PATCH 05/44] finish set download filename functionality --- src/components/Sidebar.js | 2 +- src/containers/SidebarContainer.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index a686b08..ede9868 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -32,7 +32,7 @@ class Sidebar extends Component { handleDownload() { const { gifData } = this.props; - download(gifData, 'gifsmos.gif', 'image/gif'); + download(gifData, this.props.gifFileName, 'image/gif'); } handleRequestFrame() { diff --git a/src/containers/SidebarContainer.js b/src/containers/SidebarContainer.js index 29d5cf3..b58be03 100644 --- a/src/containers/SidebarContainer.js +++ b/src/containers/SidebarContainer.js @@ -5,13 +5,14 @@ import { requestFrame, togglePane, reset } from '../actions'; const mapStateToProps = (state, ownProps) => { const { images, settings, ui } = state; const { expandedPane } = ui; - const { gifData, frameIDs } = images; + const { gifData, frameIDs, gifFileName } = images; const { width, height, oversample } = settings.image; return { numFrames: frameIDs.length, expandedPane, gifData, + gifFileName, width, height, oversample From d54073d04e322172847aade64a6a4f05ee241448 Mon Sep 17 00:00:00 2001 From: Billy Date: Mon, 10 Jun 2019 15:23:35 -0700 Subject: [PATCH 06/44] add generate gif success message --- src/components/GenerateGifForm.js | 2 +- src/components/Preview.css | 7 +++++++ src/components/Preview.js | 5 +++++ 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/GenerateGifForm.js b/src/components/GenerateGifForm.js index 8e48473..d73d3eb 100644 --- a/src/components/GenerateGifForm.js +++ b/src/components/GenerateGifForm.js @@ -45,7 +45,7 @@ class GenerateGifForm extends Component { aria-label="generate gif" type="submit" > - Generate GIF + Generate! ); diff --git a/src/components/Preview.css b/src/components/Preview.css index aa13c49..9e864bb 100644 --- a/src/components/Preview.css +++ b/src/components/Preview.css @@ -47,6 +47,13 @@ border-radius: 3px; } +.Preview-progress-success { + width: 200px; + margin: 15px auto 0; + text-align: center; + color: #fff; +} + @keyframes fade-in { 0% { opacity: 0; diff --git a/src/components/Preview.js b/src/components/Preview.js index 4a8d112..0159251 100644 --- a/src/components/Preview.js +++ b/src/components/Preview.js @@ -100,6 +100,11 @@ class Preview extends Component { }} />
+ {gifProgress === 1 ? ( +
+ GIF ready for download! +
+ ) : null} ); } From 89eada86f18e12304b4762d26220420d6f676a76 Mon Sep 17 00:00:00 2001 From: Billy Date: Mon, 10 Jun 2019 15:26:18 -0700 Subject: [PATCH 07/44] set default file name for gif download --- src/components/Sidebar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index ede9868..c9d34d9 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -32,7 +32,7 @@ class Sidebar extends Component { handleDownload() { const { gifData } = this.props; - download(gifData, this.props.gifFileName, 'image/gif'); + download(gifData, this.props.gifFileName || 'gifsmos.gif', 'image/gif'); } handleRequestFrame() { From 89cb5376b5eb69b75f98bb8559b7b50678326341 Mon Sep 17 00:00:00 2001 From: Billy Date: Mon, 10 Jun 2019 15:46:31 -0700 Subject: [PATCH 08/44] add file extension to file name --- src/actions/index.js | 2 +- src/reducers/images.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index 1741d3e..cf438d7 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -56,7 +56,7 @@ export const updateGIFProgress = progress => ({ export const updateGifFileName = name => { return { type: types.UPDATE_GIF_FILENAME, - payload: { gifFileName: name } + payload: { gifFileName: `${name}.gif` } }; }; diff --git a/src/reducers/images.js b/src/reducers/images.js index 3e3d41d..54404b1 100644 --- a/src/reducers/images.js +++ b/src/reducers/images.js @@ -24,7 +24,7 @@ const initialState = { frameIDs: [], gifProgress: 0, gifData: '', - gifFileName: '' + gifFileName: 'gifsmos.gif' }; const images = (state = initialState, { type, payload }) => { From 44e3adffc32dfbad24ed2c26c4fd3ed6a0abe9a5 Mon Sep 17 00:00:00 2001 From: Spencer Phillipson Date: Tue, 11 Jun 2019 09:02:24 -0700 Subject: [PATCH 09/44] Working on connection between form and state --- src/actions/index.js | 5 +++++ src/components/GenerateGifForm.js | 11 ++++++----- src/components/Preview.js | 14 +++++++++----- src/constants/action-types.js | 2 +- src/containers/PreviewContainer.js | 10 ++++++---- src/reducers/images.js | 18 ++++++++++++++---- 6 files changed, 41 insertions(+), 19 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index 4e6e298..d94f8a1 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -53,6 +53,11 @@ export const updateGIFProgress = progress => ({ payload: { progress } }); +export const addText = text => ({ + type: types.ADD_TEXT, + payload: { text } +}); + export const addGIF = imageData => ({ type: types.ADD_GIF, payload: { imageData } diff --git a/src/components/GenerateGifForm.js b/src/components/GenerateGifForm.js index 7c273d1..0e2be1d 100644 --- a/src/components/GenerateGifForm.js +++ b/src/components/GenerateGifForm.js @@ -4,15 +4,16 @@ import './GenerateGifForm.css'; class GenerateGifForm extends Component { constructor(props) { super(props); - this.state = { name: '', titleText: '' }; + this.state = { name: '', caption: '' }; this.handleInputUpdate = this.handleInputUpdate.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleSubmit(evt) { evt.preventDefault(); + this.props.addText(this.state.caption); this.props.handleGenerateGIF(); - this.setState({ text: '' }); + this.setState({ name: '', caption: '' }); } handleInputUpdate(evt) { @@ -33,10 +34,10 @@ class GenerateGifForm extends Component { /> + +
+
Saved Graphs
+ {savedList} +
+ + ); + } +} + +export default FileCabinet; diff --git a/src/components/icons/fileCabinet.svg b/src/components/icons/fileCabinet.svg new file mode 100644 index 0000000..b7b2672 --- /dev/null +++ b/src/components/icons/fileCabinet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/containers/FileCabinetContainer.js b/src/containers/FileCabinetContainer.js new file mode 100644 index 0000000..cc72c60 --- /dev/null +++ b/src/containers/FileCabinetContainer.js @@ -0,0 +1,19 @@ +import { connect } from 'react-redux'; +import FileCabinet from '../components/FileCabinet'; +import { togglePane } from '../actions'; +import panes from '../constants/pane-types'; + +const mapStateToProps = (state, ownProps) => { + const { ui } = state; + + return { + expanded: ui.expandedPane === panes.FILES + }; +}; + +const FileCabinetContainer = connect( + mapStateToProps, + { togglePane } +)(FileCabinet); + +export default FileCabinetContainer; From 5a78a642bbe56f000b73ee76c6ca0fcce0d4f4ea Mon Sep 17 00:00:00 2001 From: Jason Matthias Date: Wed, 12 Jun 2019 12:41:42 -0700 Subject: [PATCH 22/44] add styling to list of saved graphs --- src/components/FileCabinet.css | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/FileCabinet.css b/src/components/FileCabinet.css index 036b653..f8b4a6a 100644 --- a/src/components/FileCabinet.css +++ b/src/components/FileCabinet.css @@ -2,7 +2,6 @@ position: absolute; top: 40px; left: 70px; - /* left: 70px; */ bottom: 0; width: 300px; padding-top: 20px; @@ -20,7 +19,7 @@ } .FileCabinet-saved-list { - margin-top: 30px; + margin-top: 10px; padding: 10px 10px; } @@ -37,7 +36,7 @@ } .FileCabinet-previous-items { - margin-top: 20px; + padding-top: 30px; } .FileCabinet-item-text { @@ -46,7 +45,7 @@ padding-left: 10px; } -.FileCabinet-small-date { +.FileCabinet-small-text { font-size: 0.75rem; } @@ -60,7 +59,7 @@ border-radius: 5px; padding: 5px; outline: none !important; - text-align: center; + text-align: start; } .FileCabinet-input-error { From e86f431d1c1d5643b88ea49deea1d8e83e72b815 Mon Sep 17 00:00:00 2001 From: Jason Matthias Date: Wed, 12 Jun 2019 12:42:47 -0700 Subject: [PATCH 23/44] change local storage helpers to return previous frames to update store on load --- src/lib/local-storage-helpers.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/lib/local-storage-helpers.js b/src/lib/local-storage-helpers.js index 51c77e7..b1e44f8 100644 --- a/src/lib/local-storage-helpers.js +++ b/src/lib/local-storage-helpers.js @@ -6,7 +6,7 @@ * takes a graph object & graph name, stringifies, and saves to local storage * in "saved" object with unique key of date string */ -export const saveGraphToLocal = (graph, name, preview) => { +export const saveGraphToLocal = (graph, name, preview, frames, frameIDs) => { let savedGraphs = localStorage.getItem('gifsmos-saved-graphs'); if (!savedGraphs) { savedGraphs = { @@ -18,7 +18,9 @@ export const saveGraphToLocal = (graph, name, preview) => { const newGraph = { name, graph, - preview + preview, + frames, + frameIDs }; let timeStamp = new Date().toString(); timeStamp = timeStamp.slice(0, timeStamp.indexOf('(') - 1); @@ -32,10 +34,8 @@ export const saveGraphToLocal = (graph, name, preview) => { */ export const getGraphFromLocal = dateString => { - console.log(typeof dateString); - let savedGraphs = JSON.parse(localStorage.getItem('gifsmos-saved-graphs')); - return savedGraphs.saved[dateString].graph; + return savedGraphs.saved[dateString]; }; /** From 05b120784ad6d52e83e86517beed74f570e5f49d Mon Sep 17 00:00:00 2001 From: Jason Matthias Date: Wed, 12 Jun 2019 12:44:22 -0700 Subject: [PATCH 24/44] change calc-helpers to return previous frames to update store on load --- src/lib/calc-helpers.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/lib/calc-helpers.js b/src/lib/calc-helpers.js index 341c2d9..e680a10 100644 --- a/src/lib/calc-helpers.js +++ b/src/lib/calc-helpers.js @@ -41,7 +41,8 @@ export const setSliderByIndex = (idx, val) => { calculator.setExpression({ id, latex: `${identifier}=${val}` }); }; -export const saveCurrentGraph = async name => { +// saves the current graph and any gifs to local storage +export const saveCurrentGraph = async (name, frames, frameIDs) => { const graph = calculator.getState(); const preview = await getImageData({ width: 160, @@ -49,10 +50,12 @@ export const saveCurrentGraph = async name => { targetPixelRatio: 0.25 }); - saveGraphToLocal(graph, name, preview); + saveGraphToLocal(graph, name, preview, frames, frameIDs); }; +// retrieves saved graph export const loadSavedGraph = dateString => { - const graph = getGraphFromLocal(dateString); + const { graph, frames, frameIDs } = getGraphFromLocal(dateString); calculator.setState(graph); + return { frames, frameIDs }; }; From 8edd155667d825b32afc983f44b0f1305ca46fa6 Mon Sep 17 00:00:00 2001 From: Jason Matthias Date: Wed, 12 Jun 2019 12:46:36 -0700 Subject: [PATCH 25/44] add images state and action to load image frames from local --- src/containers/FileCabinetContainer.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/containers/FileCabinetContainer.js b/src/containers/FileCabinetContainer.js index cc72c60..8a39515 100644 --- a/src/containers/FileCabinetContainer.js +++ b/src/containers/FileCabinetContainer.js @@ -1,19 +1,20 @@ import { connect } from 'react-redux'; import FileCabinet from '../components/FileCabinet'; -import { togglePane } from '../actions'; +import { togglePane, loadFramesFromLocal } from '../actions'; import panes from '../constants/pane-types'; const mapStateToProps = (state, ownProps) => { - const { ui } = state; + const { ui, images } = state; return { - expanded: ui.expandedPane === panes.FILES + expanded: ui.expandedPane === panes.FILES, + images }; }; const FileCabinetContainer = connect( mapStateToProps, - { togglePane } + { togglePane, loadFramesFromLocal } )(FileCabinet); export default FileCabinetContainer; From 7e77f64d1ea1679c96f005adc5fe918a9e8bfcf2 Mon Sep 17 00:00:00 2001 From: Jason Matthias Date: Wed, 12 Jun 2019 12:49:37 -0700 Subject: [PATCH 26/44] change className for saved graph list. update load graph click handler to run action to update store --- src/components/FileCabinet.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/FileCabinet.js b/src/components/FileCabinet.js index 05d5e18..4d9bca0 100644 --- a/src/components/FileCabinet.js +++ b/src/components/FileCabinet.js @@ -35,7 +35,8 @@ class FileCabinet extends Component { handleSaveCurrent() { const { name } = this.state; const { togglePane } = this.props; - saveCurrentGraph(name); + const { frames, frameIDs } = this.props.images; + saveCurrentGraph(name, frames, frameIDs); const { errors, ...newState } = this.state; newState.name = ''; @@ -46,8 +47,8 @@ class FileCabinet extends Component { } handleLoadGraph(date) { - const { togglePane } = this.props; - loadSavedGraph(date); + const { togglePane, loadFramesFromLocal } = this.props; + loadFramesFromLocal(date); togglePane(panes.files); } @@ -71,7 +72,7 @@ class FileCabinet extends Component { {name
{name}
-
+
created on: {date.slice(0, date.lastIndexOf(' '))}
@@ -80,7 +81,9 @@ class FileCabinet extends Component { }, this)} ) : ( -
No Previous Graphs
+
+ No Saved Graphs +
); return ( @@ -96,6 +99,7 @@ class FileCabinet extends Component { })} type="text" name="name" + placeholder="graph name" aria-label="graph name" value={name} onChange={this.handleInputUpdate} From 6352931505ec5d691972654ac3e865091368bdf7 Mon Sep 17 00:00:00 2001 From: Jason Matthias Date: Wed, 12 Jun 2019 12:50:28 -0700 Subject: [PATCH 27/44] add actions to update store with image data from local storage --- src/actions/index.js | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/src/actions/index.js b/src/actions/index.js index 4e6e298..023e362 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -27,7 +27,11 @@ */ import * as types from '../constants/action-types'; -import { setSliderByIndex, getImageData } from '../lib/calc-helpers'; +import { + setSliderByIndex, + getImageData, + loadSavedGraph +} from '../lib/calc-helpers'; import { startTimer, clearTimer } from '../lib/timer'; import { gifCreationProblem, @@ -48,6 +52,14 @@ 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 } @@ -217,3 +229,16 @@ export const generateGIF = (images, opts) => (dispatch, getState) => { } }); }; + +// loads frames from local +export const loadFramesFromLocal = dateString => (dispatch, getState) => { + dispatch(reset()); + // sets state of calculator and return saved frames + const { frameIDs, frames } = loadSavedGraph(dateString); + for (let val = 0; val <= frameIDs.length; val += 1) { + // get corresponding image + let id = frameIDs[val]; + let imageData = frames[id]; + dispatch(addSavedFrame(imageData, id)); + } +}; From 0a249b7b032b2e31c8ce67dfc3d609d5ccfa952e Mon Sep 17 00:00:00 2001 From: Haley Date: Wed, 12 Jun 2019 14:06:29 -0700 Subject: [PATCH 28/44] edited code from PR feedback --- src/actions/index.js | 1 + src/components/GenerateGifForm.js | 2 -- src/components/Preview.js | 19 ++++++++-------- src/containers/GenerateGifFormContainer.js | 26 ++++++++++++++++++++++ src/containers/PreviewContainer.js | 23 ++++--------------- src/reducers/images.js | 2 +- 6 files changed, 42 insertions(+), 31 deletions(-) create mode 100644 src/containers/GenerateGifFormContainer.js diff --git a/src/actions/index.js b/src/actions/index.js index c3f0002..90cfc44 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -62,6 +62,7 @@ export const updateTextColor = fontColor => ({ type: types.UPDATE_TEXT_COLOR, payload: { fontColor } }); + export const updateGIFFileName = name => { return { type: types.UPDATE_GIF_FILENAME, diff --git a/src/components/GenerateGifForm.js b/src/components/GenerateGifForm.js index 5def4cd..606dd43 100644 --- a/src/components/GenerateGifForm.js +++ b/src/components/GenerateGifForm.js @@ -11,8 +11,6 @@ class GenerateGifForm extends Component { handleSubmit(evt) { evt.preventDefault(); this.props.handleGenerateGIF(); - this.props.updateText(''); - this.props.updateTextColor(''); } handleInputUpdate(evt) { diff --git a/src/components/Preview.js b/src/components/Preview.js index 6f8f43b..39aa925 100644 --- a/src/components/Preview.js +++ b/src/components/Preview.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import classNames from 'classnames'; import Frame from './Frame'; -import GenerateGifForm from './GenerateGifForm'; +import GenerateGifFormContainer from '../containers/GenerateGifFormContainer'; import './Preview.css'; class Preview extends Component { @@ -89,15 +89,8 @@ class Preview extends Component {
{!!numFrames && this.props.gifData.length === 0 ? ( - ) : null}
@@ -121,3 +114,11 @@ class Preview extends Component { } export default Preview; + +// gifFileName={this.props.gifFileName} +// caption={this.props.caption} +// fontColor={this.props.fontColor} +// defaultColor={this.props.fontColor} +// updateText={this.props.updateText} +// updateTextColor={this.props.updateTextColor} +// updateGIFFileName={this.props.updateGIFFileName} diff --git a/src/containers/GenerateGifFormContainer.js b/src/containers/GenerateGifFormContainer.js new file mode 100644 index 0000000..cbc9fdf --- /dev/null +++ b/src/containers/GenerateGifFormContainer.js @@ -0,0 +1,26 @@ +import { connect } from 'react-redux'; +import GenerateGifForm from '../components/GenerateGifForm'; +import { updateGIFFileName, updateText, updateTextColor } from '../actions'; + +const mapStateToProps = (state, ownProps) => { + const { images } = state; + const { caption, fontColor, gifFileName } = images; + + return { + handleGenerateGIF: ownProps.handleGenerateGIF, + caption, + fontColor, + gifFileName + }; +}; + +const GenerateGifFormContainer = connect( + mapStateToProps, + { + updateText, + updateTextColor, + updateGIFFileName + } +)(GenerateGifForm); + +export default GenerateGifFormContainer; diff --git a/src/containers/PreviewContainer.js b/src/containers/PreviewContainer.js index 0161980..8e5bca3 100644 --- a/src/containers/PreviewContainer.js +++ b/src/containers/PreviewContainer.js @@ -1,28 +1,17 @@ import { connect } from 'react-redux'; import Preview from '../components/Preview'; import { - updateGIFFileName, generateGIF, updatePreviewIdx, startAnimation, - stopAnimation, - updateText, - updateTextColor + stopAnimation } from '../actions'; import panes from '../constants/pane-types'; const mapStateToProps = (state, ownProps) => { const { images, ui, settings } = state; const { expandedPane, previewIdx, playing } = ui; - const { - frames, - frameIDs, - gifProgress, - gifData, - caption, - fontColor, - gifFileName - } = images; + const { frames, frameIDs, gifProgress, gifData, caption, fontColor } = images; const { width, height, oversample, interval } = settings.image; return { @@ -38,8 +27,7 @@ const mapStateToProps = (state, ownProps) => { oversample, interval, caption, - fontColor, - gifFileName + fontColor }; }; @@ -49,10 +37,7 @@ const PreviewContainer = connect( updatePreviewIdx, generateGIF, startAnimation, - stopAnimation, - updateText, - updateTextColor, - updateGIFFileName + stopAnimation } )(Preview); diff --git a/src/reducers/images.js b/src/reducers/images.js index 6fe5c24..e079613 100644 --- a/src/reducers/images.js +++ b/src/reducers/images.js @@ -27,7 +27,7 @@ const initialState = { gifProgress: 0, gifData: '', caption: '', - fontColor: '#E79600', + fontColor: '#0000', gifFileName: '' }; From 4a498cbac52125ecca7767fa7a59f1fa700dab4c Mon Sep 17 00:00:00 2001 From: Jason Matthias Date: Wed, 12 Jun 2019 14:15:59 -0700 Subject: [PATCH 29/44] change filecabinet to folder, update svg, filenames, and imports --- src/actions/index.js | 2 +- src/components/App.js | 4 +-- .../{FileCabinet.css => Folder.css} | 28 +++++++++---------- src/components/{FileCabinet.js => Folder.js} | 28 +++++++++---------- src/components/Sidebar.js | 12 ++++---- src/components/SidebarButton.js | 6 ++-- src/components/icons/fileCabinet.svg | 1 - src/components/icons/folder.svg | 11 ++++++++ ...CabinetContainer.js => FolderContainer.js} | 8 +++--- 9 files changed, 55 insertions(+), 45 deletions(-) rename src/components/{FileCabinet.css => Folder.css} (75%) rename src/components/{FileCabinet.js => Folder.js} (79%) delete mode 100644 src/components/icons/fileCabinet.svg create mode 100644 src/components/icons/folder.svg rename src/containers/{FileCabinetContainer.js => FolderContainer.js} (71%) diff --git a/src/actions/index.js b/src/actions/index.js index 023e362..7fe7305 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -235,7 +235,7 @@ export const loadFramesFromLocal = dateString => (dispatch, getState) => { dispatch(reset()); // sets state of calculator and return saved frames const { frameIDs, frames } = loadSavedGraph(dateString); - for (let val = 0; val <= frameIDs.length; val += 1) { + for (let val = 0; val < frameIDs.length; val += 1) { // get corresponding image let id = frameIDs[val]; let imageData = frames[id]; diff --git a/src/components/App.js b/src/components/App.js index 024fafa..6706115 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -4,7 +4,7 @@ import SidebarContainer from '../containers/SidebarContainer'; import PreviewContainer from '../containers/PreviewContainer'; import BurstContainer from '../containers/BurstContainer'; import SettingsContainer from '../containers/SettingsContainer'; -import FileCabinetContainer from '../containers/FileCabinetContainer'; +import FolderContainer from '../containers/FolderContainer'; import ErrorToastContainer from '../containers/ErrorToastContainer'; import CALCULATOR_OPTIONS from '../constants/calculator-options'; import './App.css'; @@ -42,7 +42,7 @@ class App extends Component { - + diff --git a/src/components/FileCabinet.css b/src/components/Folder.css similarity index 75% rename from src/components/FileCabinet.css rename to src/components/Folder.css index f8b4a6a..2fdf4cf 100644 --- a/src/components/FileCabinet.css +++ b/src/components/Folder.css @@ -1,4 +1,4 @@ -.FileCabinet { +.Folder { position: absolute; top: 40px; left: 70px; @@ -13,43 +13,43 @@ color: #fff; } -.FileCabinet-expanded { +.Folder-expanded { transform: translateX(0); transition: 0.2s transform; } -.FileCabinet-saved-list { +.Folder-saved-list { margin-top: 10px; padding: 10px 10px; } /* ul { padding: 0 } */ -.FileCabinet-saved-item { +.Folder-saved-item { display: flex; margin-top: 5px; text-align: start; } -.FileCabinet-saved-item:hover { +.Folder-saved-item:hover { cursor: pointer; } -.FileCabinet-previous-items { +.Folder-previous-items { padding-top: 30px; } -.FileCabinet-item-text { +.Folder-item-text { display: block; text-align: start; padding-left: 10px; } -.FileCabinet-small-text { +.Folder-small-text { font-size: 0.75rem; } -.FileCabinet-input { +.Folder-input { height: 20px; width: 150px; margin-bottom: 15px; @@ -62,11 +62,11 @@ text-align: start; } -.FileCabinet-input-error { +.Folder-input-error { border-color: #cc0000; } -.FileCabinet-button { +.Folder-button { width: 110px; height: 35px; margin-top: 10px; @@ -79,15 +79,15 @@ outline: none !important; } -.FileCabinet-button:hover { +.Folder-button:hover { background: #484848; } -.FileCabinet-button:active { +.Folder-button:active { background: #3b3b3b; } -.FileCabinet-button:focus { +.Folder-button:focus { background: #484848; border-color: #e79600; } diff --git a/src/components/FileCabinet.js b/src/components/Folder.js similarity index 79% rename from src/components/FileCabinet.js rename to src/components/Folder.js index 4d9bca0..4a265b9 100644 --- a/src/components/FileCabinet.js +++ b/src/components/Folder.js @@ -4,9 +4,9 @@ import { getBurstErrors } from '../lib/input-helpers'; import { saveCurrentGraph, loadSavedGraph } from '../lib/calc-helpers'; import { getSavedGraphsList } from '../lib/local-storage-helpers'; import panes from '../constants/pane-types'; -import './FileCabinet.css'; +import './Folder.css'; -class FileCabinet extends Component { +class Folder extends Component { constructor(props) { super(props); @@ -56,23 +56,23 @@ class FileCabinet extends Component { const { name, errors } = this.state; const { expanded } = this.props; - if (!expanded) return
; + if (!expanded) return
; // const prevGraphs = const prevGraphs = getSavedGraphsList(); const savedList = prevGraphs ? ( -
    +
      {prevGraphs.map(function([date, name, preview]) { return (
      this.handleLoadGraph(date)} key={`${date}-${name}`} > {name -
      +
      {name}
      -
      +
      created on: {date.slice(0, date.lastIndexOf(' '))}
      @@ -81,21 +81,21 @@ class FileCabinet extends Component { }, this)}
    ) : ( -
    +
    No Saved Graphs
    ); return (
    Name
    -
    +
    Saved Graphs
    {savedList}
    @@ -122,4 +122,4 @@ class FileCabinet extends Component { } } -export default FileCabinet; +export default Folder; diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index 2b35175..33eeac4 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -74,15 +74,15 @@ class Sidebar extends Component { /> {!!numFrames && } diff --git a/src/components/SidebarButton.js b/src/components/SidebarButton.js index 221c11f..febdc84 100644 --- a/src/components/SidebarButton.js +++ b/src/components/SidebarButton.js @@ -5,7 +5,7 @@ import preview from './icons/preview.svg'; import reset from './icons/reset.svg'; import download from './icons/download.svg'; import burst from './icons/burst.svg'; -import fileCabinet from './icons/fileCabinet.svg'; +import folder from './icons/folder.svg'; import settings from './icons/settings.svg'; import './SidebarButton.css'; @@ -16,7 +16,7 @@ const iconMap = { download, burst, settings, - fileCabinet + folder }; const ariaMap = { @@ -26,7 +26,7 @@ const ariaMap = { download: 'download gif', burst: 'multi-capture panel', settings: 'settings panel', - fileCabinet: 'save-graphs panel' + folder: 'save-graphs panel' }; const SidebarButton = ({ children, icon, onClick, expanded }) => ( diff --git a/src/components/icons/fileCabinet.svg b/src/components/icons/fileCabinet.svg deleted file mode 100644 index b7b2672..0000000 --- a/src/components/icons/fileCabinet.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/icons/folder.svg b/src/components/icons/folder.svg new file mode 100644 index 0000000..aa2658f --- /dev/null +++ b/src/components/icons/folder.svg @@ -0,0 +1,11 @@ + + + + background + + + + Layer 1 + + + \ No newline at end of file diff --git a/src/containers/FileCabinetContainer.js b/src/containers/FolderContainer.js similarity index 71% rename from src/containers/FileCabinetContainer.js rename to src/containers/FolderContainer.js index 8a39515..5ce02b3 100644 --- a/src/containers/FileCabinetContainer.js +++ b/src/containers/FolderContainer.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import FileCabinet from '../components/FileCabinet'; +import Folder from '../components/Folder'; import { togglePane, loadFramesFromLocal } from '../actions'; import panes from '../constants/pane-types'; @@ -12,9 +12,9 @@ const mapStateToProps = (state, ownProps) => { }; }; -const FileCabinetContainer = connect( +const FolderContainer = connect( mapStateToProps, { togglePane, loadFramesFromLocal } -)(FileCabinet); +)(Folder); -export default FileCabinetContainer; +export default FolderContainer; From 8cddfe42b3692cf86d24ffd5d7e1f5434561f4cf Mon Sep 17 00:00:00 2001 From: Jason Matthias Date: Wed, 12 Jun 2019 14:57:55 -0700 Subject: [PATCH 30/44] clean up before review --- package.json | 1 - src/components/Folder.css | 2 -- src/components/Folder.js | 1 - src/index.js | 6 +----- 4 files changed, 1 insertion(+), 9 deletions(-) diff --git a/package.json b/package.json index 4d26912..8079fd8 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,6 @@ "jest-dom": "^3.0.0", "prettier": "1.15.3", "pretty-quick": "^1.8.0", - "redux-devtools-extension": "^2.13.8", "react-testing-library": "^5.4.2", "redux-mock-store": "^1.5.3" } diff --git a/src/components/Folder.css b/src/components/Folder.css index 2fdf4cf..94dc318 100644 --- a/src/components/Folder.css +++ b/src/components/Folder.css @@ -23,8 +23,6 @@ padding: 10px 10px; } -/* ul { padding: 0 } */ - .Folder-saved-item { display: flex; margin-top: 5px; diff --git a/src/components/Folder.js b/src/components/Folder.js index 4a265b9..d6f9e21 100644 --- a/src/components/Folder.js +++ b/src/components/Folder.js @@ -58,7 +58,6 @@ class Folder extends Component { if (!expanded) return
    ; - // const prevGraphs = const prevGraphs = getSavedGraphsList(); const savedList = prevGraphs ? (
      diff --git a/src/index.js b/src/index.js index 470ebf9..9605613 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { createStore, applyMiddleware } from 'redux'; import { Provider } from 'react-redux'; -import { composeWithDevTools } from 'redux-devtools-extension'; import thunkMiddleware from 'redux-thunk'; import rootReducer from './reducers'; import App from './components/App'; @@ -11,10 +10,7 @@ import { togglePane } from './actions'; import greet from './lib/dev-greeting'; import './index.css'; -const store = createStore( - rootReducer, - composeWithDevTools(applyMiddleware(thunkMiddleware)) -); +const store = createStore(rootReducer, applyMiddleware(thunkMiddleware)); const closePane = () => store.dispatch(togglePane(panes.NONE)); From c565ac701534820dbeef26b9f8e31b795b4215d6 Mon Sep 17 00:00:00 2001 From: Haley Date: Thu, 13 Jun 2019 15:40:47 -0700 Subject: [PATCH 31/44] changed if statement to switch --- src/components/GenerateGifForm.js | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/components/GenerateGifForm.js b/src/components/GenerateGifForm.js index 606dd43..5378604 100644 --- a/src/components/GenerateGifForm.js +++ b/src/components/GenerateGifForm.js @@ -14,14 +14,20 @@ class GenerateGifForm extends Component { } handleInputUpdate(evt) { - if (evt.target.name === 'caption') { - this.props.updateText(evt.target.value); - } - if (evt.target.name === 'fontColor') { - this.props.updateTextColor(evt.target.value); - } - if (evt.target.name === 'name') { - this.props.updateGIFFileName(evt.target.value); + switch (evt.target.name) { + case 'caption': + this.props.updateText(evt.target.value); + break; + case 'fontColor': + this.props.updateTextColor(evt.target.value); + break; + + case 'name': + this.props.updateGIFFileName(evt.target.value); + break; + + default: + break; } } From 656581f180f98f8c90b9543d5c46a08a5ae58e6e Mon Sep 17 00:00:00 2001 From: Jason Matthias Date: Mon, 17 Jun 2019 11:29:26 -0700 Subject: [PATCH 32/44] adressing PR concerns for unused imports, class renaming, Folder.css, input validation & error handling --- src/actions/index.js | 2 -- src/components/Folder.css | 12 +++++++++++- src/components/Folder.js | 24 ++++++++++++------------ src/lib/input-helpers.js | 10 ++++++++++ src/lib/local-storage-helpers.js | 2 +- 5 files changed, 34 insertions(+), 16 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index 7fe7305..f72c3a2 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -230,10 +230,8 @@ export const generateGIF = (images, opts) => (dispatch, getState) => { }); }; -// loads frames from local export const loadFramesFromLocal = dateString => (dispatch, getState) => { dispatch(reset()); - // sets state of calculator and return saved frames const { frameIDs, frames } = loadSavedGraph(dateString); for (let val = 0; val < frameIDs.length; val += 1) { // get corresponding image diff --git a/src/components/Folder.css b/src/components/Folder.css index 94dc318..99861ab 100644 --- a/src/components/Folder.css +++ b/src/components/Folder.css @@ -3,7 +3,7 @@ top: 40px; left: 70px; bottom: 0; - width: 300px; + width: 408px; padding-top: 20px; background: #2e2e2e; border-right: 1px solid black; @@ -19,6 +19,9 @@ } .Folder-saved-list { + display: flex; + flex-wrap: wrap; + justify-content: center; margin-top: 10px; padding: 10px 10px; } @@ -26,9 +29,16 @@ .Folder-saved-item { display: flex; margin-top: 5px; + width: 300px; + padding-left: auto; + padding-right: auto; text-align: start; } +.Folder-saved-item > img { + border-radius: 5px; +} + .Folder-saved-item:hover { cursor: pointer; } diff --git a/src/components/Folder.js b/src/components/Folder.js index d6f9e21..541ae67 100644 --- a/src/components/Folder.js +++ b/src/components/Folder.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import classNames from 'classnames'; -import { getBurstErrors } from '../lib/input-helpers'; -import { saveCurrentGraph, loadSavedGraph } from '../lib/calc-helpers'; +import { getSaveGraphErrors } from '../lib/input-helpers'; +import { saveCurrentGraph } from '../lib/calc-helpers'; import { getSavedGraphsList } from '../lib/local-storage-helpers'; import panes from '../constants/pane-types'; import './Folder.css'; @@ -25,9 +25,7 @@ class Folder extends Component { target: { name, value } } = evt; const { errors, ...newState } = this.state; - newState[name] = value; - newState.errors = getBurstErrors(newState); this.setState(newState); } @@ -36,14 +34,16 @@ class Folder extends Component { const { name } = this.state; const { togglePane } = this.props; const { frames, frameIDs } = this.props.images; - saveCurrentGraph(name, frames, frameIDs); - const { errors, ...newState } = this.state; - newState.name = ''; - newState.errors = getBurstErrors(newState); + newState.errors = getSaveGraphErrors(name); + + if (!newState.errors.name) { + saveCurrentGraph(name, frames, frameIDs); + newState.name = ''; + togglePane(panes.FILES); + } this.setState(newState); - togglePane(panes.FILES); } handleLoadGraph(date) { @@ -94,18 +94,18 @@ class Folder extends Component {
      Name
      -
      -
      -
      Saved Graphs
      - {savedList} +
      Name
      + +
      + +
      +
      Saved Graphs
      +
      {savedList}
    ); } From a175dacdbec6bfdfc744c7e6750c490b151803d8 Mon Sep 17 00:00:00 2001 From: Jason Matthias Date: Mon, 17 Jun 2019 15:28:45 -0700 Subject: [PATCH 35/44] add remove saved graph functionality and button --- src/components/Folder.css | 86 +++++++++++++++++++++----------- src/components/Folder.js | 58 +++++++++++++-------- src/lib/local-storage-helpers.js | 13 ++++- 3 files changed, 105 insertions(+), 52 deletions(-) diff --git a/src/components/Folder.css b/src/components/Folder.css index 8546ba3..dd6fc4f 100644 --- a/src/components/Folder.css +++ b/src/components/Folder.css @@ -3,7 +3,7 @@ top: 40px; left: 70px; bottom: 0; - width: 408px; + width: 378px; background: #2e2e2e; border-right: 1px solid black; text-align: center; @@ -17,29 +17,56 @@ 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-saved-item:hover > .Folder-delete-graph { + visibility: visible; +} + +.Folder-saved-graph { display: flex; margin-bottom: 5px; - width: 300px; - padding-left: auto; - padding-right: auto; + padding-left: 45px; + padding-right: 45px; text-align: start; } -.Folder-saved-item > img { +.Folder-saved-graph > img { border-radius: 5px; } -.Folder-saved-item:hover { - cursor: pointer; -} - .Folder-previous-items { height: calc(88vh - 175px); margin-top: 15px; @@ -60,34 +87,33 @@ font-size: 0.75rem; } -.Folder-input { - height: 20px; - width: 150px; - margin-bottom: 15px; - margin-top: 5px; - border: 1px solid #000; - font-size: 1em; - border-radius: 5px; - padding: 5px; +.Folder-button { + background: transparent; + color: #fff; + cursor: pointer; outline: none !important; - text-align: start; -} - -.Folder-input-error { - border-color: #cc0000; + border-radius: 5px; } -.Folder-button { +.Folder-save { + border: 1px solid #fff; width: 110px; height: 35px; margin-top: 10px; font-size: 1em; - background: transparent; - border: 1px solid #fff; - border-radius: 5px; - color: #fff; - cursor: pointer; - outline: none !important; +} + +.Folder-delete-graph { + border: transparent; + visibility: hidden; + position: absolute; + top: 0px; + right: 20px; +} + +.Folder-delete-text { + transform: rotate(45deg); + font-size: 1.25rem; } .Folder-button:hover { diff --git a/src/components/Folder.js b/src/components/Folder.js index ef8e7d9..63d165a 100644 --- a/src/components/Folder.js +++ b/src/components/Folder.js @@ -1,8 +1,9 @@ import React, { Component } from 'react'; import classNames from 'classnames'; -import { getSaveGraphErrors } from '../lib/input-helpers'; -import { saveCurrentGraph } from '../lib/calc-helpers'; -import { getSavedGraphsList } from '../lib/local-storage-helpers'; +import { + getSavedGraphsList, + removeGraphFromLocal +} from '../lib/local-storage-helpers'; import panes from '../constants/pane-types'; import './Folder.css'; @@ -12,12 +13,14 @@ class Folder extends Component { this.state = { name: '', + prevGraphs: getSavedGraphsList(), errors: {} }; this.handleInputUpdate = this.handleInputUpdate.bind(this); this.handleSaveCurrent = this.handleSaveCurrent.bind(this); this.handleLoadGraph = this.handleLoadGraph.bind(this); + this.handleDeleteSavedGraph = this.handleDeleteSavedGraph.bind(this); } handleInputUpdate(evt) { @@ -30,16 +33,23 @@ class Folder extends Component { }); } - handleSaveCurrent() { + handleDeleteSavedGraph(date) { + removeGraphFromLocal(date); + this.setState(st => ({ + prevGraphs: st.prevGraphs.filter(graph => graph[0] !== date) + })); + } + + async handleSaveCurrent() { const { name } = this.state; - const { togglePane } = this.props; + const { togglePane, saveGraph } = this.props; const { frames, frameIDs } = this.props.images; const { errors, ...newState } = this.state; - newState.errors = getSaveGraphErrors(name); + let newGraph = await saveGraph(name, frames, frameIDs); - if (!newState.errors.name) { - saveCurrentGraph(name, frames, frameIDs); + if (newGraph) { newState.name = ''; + newState.prevGraphs = [...newState.prevGraphs, newGraph]; togglePane(panes.FILES); } @@ -53,28 +63,34 @@ class Folder extends Component { } render() { - const { name, errors } = this.state; + const { name, errors, prevGraphs } = this.state; const { expanded } = this.props; if (!expanded) return
    ; - const prevGraphs = getSavedGraphsList(); const savedList = prevGraphs ? (
      {prevGraphs.map(function([date, name, preview]) { return ( -
      this.handleLoadGraph(date)} - key={`${date}-${name}`} - > - {name -
      -
      {name}
      -
      - created on: {date.slice(0, date.lastIndexOf(' '))} +
      +
      this.handleLoadGraph(date)} + > + {name +
      +
      {name}
      +
      + created on: {date.slice(0, date.lastIndexOf(' '))} +
      +
      ); }, this)} @@ -106,7 +122,7 @@ class Folder extends Component { />
      diff --git a/src/components/Folder.css b/src/components/Save.css similarity index 76% rename from src/components/Folder.css rename to src/components/Save.css index dd6fc4f..6c62d01 100644 --- a/src/components/Folder.css +++ b/src/components/Save.css @@ -1,4 +1,4 @@ -.Folder { +.Save { position: absolute; top: 40px; left: 70px; @@ -12,12 +12,12 @@ color: #fff; } -.Folder-expanded { +.Save-expanded { transform: translateX(0); transition: 0.2s transform; } -.Folder-input { +.Save-input { height: 20px; width: 150px; margin-bottom: 15px; @@ -30,32 +30,32 @@ text-align: start; } -.Folder-input-error { +.Save-input-error { border-color: #cc0000; } -.Folder-saved-list { +.Save-saved-list { display: flex; flex-wrap: wrap; justify-content: center; padding: 0; } -.Folder-saved-item { +.Save-saved-item { position: relative; width: 100%; z-index: 1; } -.Folder-saved-item:hover { +.Save-saved-item:hover { cursor: pointer; } -.Folder-saved-item:hover > .Folder-delete-graph { +.Save-saved-item:hover > .Save-delete-graph { visibility: visible; } -.Folder-saved-graph { +.Save-saved-graph { display: flex; margin-bottom: 5px; padding-left: 45px; @@ -63,31 +63,31 @@ text-align: start; } -.Folder-saved-graph > img { +.Save-saved-graph > img { border-radius: 5px; } -.Folder-previous-items { +.Save-previous-items { height: calc(88vh - 175px); margin-top: 15px; overflow: scroll; } -.Folder-titles { +.Save-titles { padding-top: 30px; } -.Folder-item-text { +.Save-item-text { display: block; text-align: start; padding-left: 10px; } -.Folder-small-text { +.Save-small-text { font-size: 0.75rem; } -.Folder-button { +.Save-button { background: transparent; color: #fff; cursor: pointer; @@ -95,7 +95,7 @@ border-radius: 5px; } -.Folder-save { +.Save-save { border: 1px solid #fff; width: 110px; height: 35px; @@ -103,7 +103,7 @@ font-size: 1em; } -.Folder-delete-graph { +.Save-delete-graph { border: transparent; visibility: hidden; position: absolute; @@ -111,20 +111,20 @@ right: 20px; } -.Folder-delete-text { +.Save-delete-text { transform: rotate(45deg); font-size: 1.25rem; } -.Folder-button:hover { +.Save-button:hover { background: #484848; } -.Folder-button:active { +.Save-button:active { background: #3b3b3b; } -.Folder-button:focus { +.Save-button:focus { background: #484848; border-color: #e79600; } diff --git a/src/components/Folder.js b/src/components/Save.js similarity index 74% rename from src/components/Folder.js rename to src/components/Save.js index 25266c4..6e3779b 100644 --- a/src/components/Folder.js +++ b/src/components/Save.js @@ -5,9 +5,9 @@ import { removeGraphFromLocal } from '../lib/local-storage-helpers'; import panes from '../constants/pane-types'; -import './Folder.css'; +import './Save.css'; -class Folder extends Component { +class Save extends Component { constructor(props) { super(props); @@ -66,52 +66,52 @@ class Folder extends Component { const { name, errors, prevGraphs } = this.state; const { expanded } = this.props; - if (!expanded) return
      ; + if (!expanded) return
      ; const savedList = prevGraphs ? ( -
        +
          {prevGraphs.map(function([date, name, preview]) { return ( -
          +
          this.handleLoadGraph(date)} > {name -
          +
          {name}
          -
          +
          created on: {date.slice(0, date.lastIndexOf(' '))}
          ); }, this)}
        ) : ( -
        +
        No Saved Graphs
        ); return (
        -
        Name
        +
        Name
        -
        Saved Graphs
        -
        {savedList}
        +
        Saved Graphs
        +
        {savedList}
        ); } } -export default Folder; +export default Save; diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index 33eeac4..d9dce5e 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -74,7 +74,7 @@ class Sidebar extends Component { /> diff --git a/src/components/SidebarButton.js b/src/components/SidebarButton.js index febdc84..5257b41 100644 --- a/src/components/SidebarButton.js +++ b/src/components/SidebarButton.js @@ -5,7 +5,7 @@ import preview from './icons/preview.svg'; import reset from './icons/reset.svg'; import download from './icons/download.svg'; import burst from './icons/burst.svg'; -import folder from './icons/folder.svg'; +import save from './icons/save.svg'; import settings from './icons/settings.svg'; import './SidebarButton.css'; @@ -16,7 +16,7 @@ const iconMap = { download, burst, settings, - folder + save }; const ariaMap = { @@ -26,7 +26,7 @@ const ariaMap = { download: 'download gif', burst: 'multi-capture panel', settings: 'settings panel', - folder: 'save-graphs panel' + save: 'save-graphs panel' }; const SidebarButton = ({ children, icon, onClick, expanded }) => ( diff --git a/src/components/icons/folder.svg b/src/components/icons/save.svg similarity index 100% rename from src/components/icons/folder.svg rename to src/components/icons/save.svg diff --git a/src/containers/FolderContainer.js b/src/containers/SaveContainer.js similarity index 76% rename from src/containers/FolderContainer.js rename to src/containers/SaveContainer.js index 6655f15..4523cf3 100644 --- a/src/containers/FolderContainer.js +++ b/src/containers/SaveContainer.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import Folder from '../components/Folder'; +import Save from '../components/Save'; import { togglePane, loadFramesFromLocal, saveGraph } from '../actions'; import panes from '../constants/pane-types'; @@ -12,9 +12,9 @@ const mapStateToProps = (state, ownProps) => { }; }; -const FolderContainer = connect( +const SaveContainer = connect( mapStateToProps, { togglePane, loadFramesFromLocal, saveGraph } -)(Folder); +)(Save); -export default FolderContainer; +export default SaveContainer; From 7ccb03077445a235c11b473dceaf8c09ea14ac02 Mon Sep 17 00:00:00 2001 From: Jason Matthias Date: Mon, 17 Jun 2019 22:53:38 -0700 Subject: [PATCH 38/44] change to const declaration, make return values consistent --- src/actions/index.js | 8 ++++---- src/lib/calc-helpers.js | 3 +-- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index 97cecaf..3c2720d 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -242,8 +242,8 @@ export const loadFramesFromLocal = dateString => (dispatch, getState) => { const { frameIDs, frames } = loadSavedGraph(dateString); for (let val = 0; val < frameIDs.length; val += 1) { // get corresponding image - let id = frameIDs[val]; - let imageData = frames[id]; + const id = frameIDs[val]; + const imageData = frames[id]; dispatch(addSavedFrame(imageData, id)); } }; @@ -252,8 +252,8 @@ export const saveGraph = (name, frames, frameIDs) => async dispatch => { const saveErrors = getSaveGraphErrors(name); if (saveErrors.name) { dispatch(flashError(badNameInput(saveErrors.name))); - return null; + return; } - let newGraph = await saveCurrentGraph(name, frames, frameIDs); + const newGraph = await saveCurrentGraph(name, frames, frameIDs); return newGraph; }; diff --git a/src/lib/calc-helpers.js b/src/lib/calc-helpers.js index ce0bb40..107c002 100644 --- a/src/lib/calc-helpers.js +++ b/src/lib/calc-helpers.js @@ -53,8 +53,7 @@ export const saveCurrentGraph = async (name, frames, frameIDs) => { targetPixelRatio: 0.25 }); - let newGraph = saveGraphToLocal(graph, name, preview, frames, frameIDs); - return newGraph; + return saveGraphToLocal(graph, name, preview, frames, frameIDs); }; // retrieves saved graph From 96510575741037e4443d8b6c3bb00559dc6a7099 Mon Sep 17 00:00:00 2001 From: Jason Matthias Date: Tue, 18 Jun 2019 10:29:47 -0700 Subject: [PATCH 39/44] clean up comments, icon consistency, delete button always visible, mobile breakpoints adjusted for Folder component --- src/components/App.js | 4 +- src/components/Folder.css | 198 ++++++++++++++++++ src/components/{Save.js => Folder.js} | 46 ++-- src/components/Save.css | 130 ------------ src/components/Sidebar.js | 2 +- src/components/SidebarButton.js | 6 +- src/components/icons/folder.svg | 1 + src/components/icons/save.svg | 11 - .../{SaveContainer.js => FolderContainer.js} | 8 +- src/lib/calc-helpers.js | 5 - src/lib/input-helpers.js | 4 +- src/lib/local-storage-helpers.js | 27 +-- 12 files changed, 236 insertions(+), 206 deletions(-) create mode 100644 src/components/Folder.css rename src/components/{Save.js => Folder.js} (70%) delete mode 100644 src/components/Save.css create mode 100644 src/components/icons/folder.svg delete mode 100644 src/components/icons/save.svg rename src/containers/{SaveContainer.js => FolderContainer.js} (76%) diff --git a/src/components/App.js b/src/components/App.js index 666c2ec..6706115 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -4,7 +4,7 @@ import SidebarContainer from '../containers/SidebarContainer'; import PreviewContainer from '../containers/PreviewContainer'; import BurstContainer from '../containers/BurstContainer'; import SettingsContainer from '../containers/SettingsContainer'; -import SaveContainer from '../containers/SaveContainer'; +import FolderContainer from '../containers/FolderContainer'; import ErrorToastContainer from '../containers/ErrorToastContainer'; import CALCULATOR_OPTIONS from '../constants/calculator-options'; import './App.css'; @@ -42,7 +42,7 @@ class App extends Component { - +
        diff --git a/src/components/Folder.css b/src/components/Folder.css new file mode 100644 index 0000000..5595589 --- /dev/null +++ b/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; + } +} diff --git a/src/components/Save.js b/src/components/Folder.js similarity index 70% rename from src/components/Save.js rename to src/components/Folder.js index 6e3779b..130f3e9 100644 --- a/src/components/Save.js +++ b/src/components/Folder.js @@ -5,9 +5,9 @@ import { removeGraphFromLocal } from '../lib/local-storage-helpers'; import panes from '../constants/pane-types'; -import './Save.css'; +import './Folder.css'; -class Save extends Component { +class Folder extends Component { constructor(props) { super(props); @@ -66,52 +66,52 @@ class Save extends Component { const { name, errors, prevGraphs } = this.state; const { expanded } = this.props; - if (!expanded) return
        ; + if (!expanded) return
        ; const savedList = prevGraphs ? ( -
          - {prevGraphs.map(function([date, name, preview]) { +
            + {prevGraphs.reverse().map(function([date, name, preview]) { return ( -
            +
            this.handleLoadGraph(date)} > {name -
            -
            {name}
            -
            +
            +
            {name}
            +
            created on: {date.slice(0, date.lastIndexOf(' '))}
            ); }, this)}
          ) : ( -
          +
          No Saved Graphs
          ); return (
          -
          Name
          +
          Name
          -
          Saved Graphs
          -
          {savedList}
          +
          Saved Graphs
          +
          {savedList}
          ); } } -export default Save; +export default Folder; diff --git a/src/components/Save.css b/src/components/Save.css deleted file mode 100644 index 6c62d01..0000000 --- a/src/components/Save.css +++ /dev/null @@ -1,130 +0,0 @@ -.Save { - 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; -} - -.Save-expanded { - transform: translateX(0); - transition: 0.2s transform; -} - -.Save-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; -} - -.Save-input-error { - border-color: #cc0000; -} - -.Save-saved-list { - display: flex; - flex-wrap: wrap; - justify-content: center; - padding: 0; -} - -.Save-saved-item { - position: relative; - width: 100%; - z-index: 1; -} - -.Save-saved-item:hover { - cursor: pointer; -} - -.Save-saved-item:hover > .Save-delete-graph { - visibility: visible; -} - -.Save-saved-graph { - display: flex; - margin-bottom: 5px; - padding-left: 45px; - padding-right: 45px; - text-align: start; -} - -.Save-saved-graph > img { - border-radius: 5px; -} - -.Save-previous-items { - height: calc(88vh - 175px); - margin-top: 15px; - overflow: scroll; -} - -.Save-titles { - padding-top: 30px; -} - -.Save-item-text { - display: block; - text-align: start; - padding-left: 10px; -} - -.Save-small-text { - font-size: 0.75rem; -} - -.Save-button { - background: transparent; - color: #fff; - cursor: pointer; - outline: none !important; - border-radius: 5px; -} - -.Save-save { - border: 1px solid #fff; - width: 110px; - height: 35px; - margin-top: 10px; - font-size: 1em; -} - -.Save-delete-graph { - border: transparent; - visibility: hidden; - position: absolute; - top: 0px; - right: 20px; -} - -.Save-delete-text { - transform: rotate(45deg); - font-size: 1.25rem; -} - -.Save-button:hover { - background: #484848; -} - -.Save-button:active { - background: #3b3b3b; -} - -.Save-button:focus { - background: #484848; - border-color: #e79600; -} diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index d9dce5e..33eeac4 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -74,7 +74,7 @@ class Sidebar extends Component { /> diff --git a/src/components/SidebarButton.js b/src/components/SidebarButton.js index 5257b41..ac8d972 100644 --- a/src/components/SidebarButton.js +++ b/src/components/SidebarButton.js @@ -5,7 +5,7 @@ import preview from './icons/preview.svg'; import reset from './icons/reset.svg'; import download from './icons/download.svg'; import burst from './icons/burst.svg'; -import save from './icons/save.svg'; +import folder from './icons/folder.svg'; import settings from './icons/settings.svg'; import './SidebarButton.css'; @@ -16,7 +16,7 @@ const iconMap = { download, burst, settings, - save + folder }; const ariaMap = { @@ -26,7 +26,7 @@ const ariaMap = { download: 'download gif', burst: 'multi-capture panel', settings: 'settings panel', - save: 'save-graphs panel' + folder: 'folder-graphs panel' }; const SidebarButton = ({ children, icon, onClick, expanded }) => ( diff --git a/src/components/icons/folder.svg b/src/components/icons/folder.svg new file mode 100644 index 0000000..95d07ec --- /dev/null +++ b/src/components/icons/folder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/icons/save.svg b/src/components/icons/save.svg deleted file mode 100644 index aa2658f..0000000 --- a/src/components/icons/save.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - background - - - - Layer 1 - - - \ No newline at end of file diff --git a/src/containers/SaveContainer.js b/src/containers/FolderContainer.js similarity index 76% rename from src/containers/SaveContainer.js rename to src/containers/FolderContainer.js index 4523cf3..6655f15 100644 --- a/src/containers/SaveContainer.js +++ b/src/containers/FolderContainer.js @@ -1,5 +1,5 @@ import { connect } from 'react-redux'; -import Save from '../components/Save'; +import Folder from '../components/Folder'; import { togglePane, loadFramesFromLocal, saveGraph } from '../actions'; import panes from '../constants/pane-types'; @@ -12,9 +12,9 @@ const mapStateToProps = (state, ownProps) => { }; }; -const SaveContainer = connect( +const FolderContainer = connect( mapStateToProps, { togglePane, loadFramesFromLocal, saveGraph } -)(Save); +)(Folder); -export default SaveContainer; +export default FolderContainer; diff --git a/src/lib/calc-helpers.js b/src/lib/calc-helpers.js index 107c002..598ce17 100644 --- a/src/lib/calc-helpers.js +++ b/src/lib/calc-helpers.js @@ -41,10 +41,6 @@ export const setSliderByIndex = (idx, val) => { calculator.setExpression({ id, latex: `${identifier}=${val}` }); }; -/** - * saves the current graph and any gifs to local storage - * returns the new graph info to add to saved graph list - */ export const saveCurrentGraph = async (name, frames, frameIDs) => { const graph = calculator.getState(); const preview = await getImageData({ @@ -56,7 +52,6 @@ export const saveCurrentGraph = async (name, frames, frameIDs) => { return saveGraphToLocal(graph, name, preview, frames, frameIDs); }; -// retrieves saved graph export const loadSavedGraph = dateString => { const { graph, frames, frameIDs } = getGraphFromLocal(dateString); calculator.setState(graph); diff --git a/src/lib/input-helpers.js b/src/lib/input-helpers.js index 62dbb24..cc5140e 100644 --- a/src/lib/input-helpers.js +++ b/src/lib/input-helpers.js @@ -40,8 +40,8 @@ export const getSaveGraphErrors = name => { const errors = {}; if (!name.length) { errors.name = 'Name required'; - } else if (name.length >= 30) { - errors.name = 'Name must be less than 30 characters'; + } else if (name.length > 255) { + errors.name = `Name cannot be longer than 255 characters`; } return errors; }; diff --git a/src/lib/local-storage-helpers.js b/src/lib/local-storage-helpers.js index 9436b43..b3b0b85 100644 --- a/src/lib/local-storage-helpers.js +++ b/src/lib/local-storage-helpers.js @@ -2,19 +2,9 @@ * Helper functions for loading and saving graphs to/from local storage */ -/** - * takes a graph object & graph name, stringifies, and saves to local storage - * in "saved" object with unique key of date string - */ export const saveGraphToLocal = (graph, name, preview, frames, frameIDs) => { let savedGraphs = localStorage.getItem('gifsmos-saved-graphs'); - if (!savedGraphs) { - savedGraphs = { - saved: {} - }; - } else { - savedGraphs = JSON.parse(savedGraphs); - } + savedGraphs = savedGraphs ? JSON.parse(savedGraphs) : { saved: {} }; const newGraph = { name, graph, @@ -22,28 +12,18 @@ export const saveGraphToLocal = (graph, name, preview, frames, frameIDs) => { frames, frameIDs }; - let timeStamp = new Date().toString(); - timeStamp = timeStamp.slice(0, timeStamp.indexOf('(') - 1); + let timeStamp = new Date().toLocaleString(); savedGraphs.saved[timeStamp] = newGraph; localStorage.setItem('gifsmos-saved-graphs', JSON.stringify(savedGraphs)); return [timeStamp, name, preview]; }; -/** - * takes a date string and retrieves the graph object from local storage - * returns graph object - */ - export const getGraphFromLocal = dateString => { let savedGraphs = JSON.parse(localStorage.getItem('gifsmos-saved-graphs')); return savedGraphs.saved[dateString]; }; -/** - * returns an array of objects with a name and dateStrings or - * null if none saved - */ export const getSavedGraphsList = () => { let savedGraphs = JSON.parse(localStorage.getItem('gifsmos-saved-graphs')); @@ -56,9 +36,6 @@ export const getSavedGraphsList = () => { : []; }; -/** - * takes a date string and removes the target graph from local storage - */ export const removeGraphFromLocal = dateString => { let savedGraphs = JSON.parse(localStorage.getItem('gifsmos-saved-graphs')); delete savedGraphs.saved[dateString]; From bda1458c678de442b9fc1652091757b6830504de Mon Sep 17 00:00:00 2001 From: Jason Matthias Date: Tue, 18 Jun 2019 10:33:34 -0700 Subject: [PATCH 40/44] small refactor in Folder Component --- src/components/Folder.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Folder.js b/src/components/Folder.js index 130f3e9..4b7e452 100644 --- a/src/components/Folder.js +++ b/src/components/Folder.js @@ -68,7 +68,7 @@ class Folder extends Component { if (!expanded) return
          ; - const savedList = prevGraphs ? ( + const savedList = prevGraphs.length ? (
            {prevGraphs.reverse().map(function([date, name, preview]) { return ( From 2b03a835c1d3891f76f1c78d3168fe78ad9480a1 Mon Sep 17 00:00:00 2001 From: Haley Date: Tue, 18 Jun 2019 10:35:55 -0700 Subject: [PATCH 41/44] updated code with PR comments --- src/components/Preview.js | 8 -------- src/reducers/images.js | 10 +++------- 2 files changed, 3 insertions(+), 15 deletions(-) diff --git a/src/components/Preview.js b/src/components/Preview.js index 39aa925..a083efb 100644 --- a/src/components/Preview.js +++ b/src/components/Preview.js @@ -114,11 +114,3 @@ class Preview extends Component { } export default Preview; - -// gifFileName={this.props.gifFileName} -// caption={this.props.caption} -// fontColor={this.props.fontColor} -// defaultColor={this.props.fontColor} -// updateText={this.props.updateText} -// updateTextColor={this.props.updateTextColor} -// updateGIFFileName={this.props.updateGIFFileName} diff --git a/src/reducers/images.js b/src/reducers/images.js index e079613..c230568 100644 --- a/src/reducers/images.js +++ b/src/reducers/images.js @@ -27,7 +27,7 @@ const initialState = { gifProgress: 0, gifData: '', caption: '', - fontColor: '#0000', + fontColor: '#000000', gifFileName: '' }; @@ -73,9 +73,7 @@ const images = (state = initialState, { type, payload }) => { case UPDATE_TEXT: return { ...state, - ...{ - caption: payload.text - } + caption: payload.text }; case UPDATE_TEXT_COLOR: @@ -87,9 +85,7 @@ const images = (state = initialState, { type, payload }) => { case UPDATE_GIF_FILENAME: return { ...state, - ...{ - gifFileName: payload.gifFileName - } + gifFileName: payload.gifFileName }; case RESET: From f3bf8f692ab3cb365094e83ab286c96dab9e5919 Mon Sep 17 00:00:00 2001 From: Jason Matthias Date: Thu, 20 Jun 2019 14:21:18 -0700 Subject: [PATCH 42/44] Fix merge conflict --- package.json | 1 + src/actions/index.js | 17 ++++++ src/components/GenerateGifForm.css | 43 +++++++++++++ src/components/GenerateGifForm.js | 70 ++++++++++++++++++++++ src/components/Preview.css | 38 +++--------- src/components/Preview.js | 28 +++++---- src/components/Sidebar.js | 4 +- src/constants/action-types.js | 3 + src/containers/GenerateGifFormContainer.js | 26 ++++++++ src/containers/PreviewContainer.js | 14 ++++- src/containers/SidebarContainer.js | 3 +- src/index.js | 6 +- src/reducers/images.js | 28 ++++++++- 13 files changed, 232 insertions(+), 49 deletions(-) create mode 100644 src/components/GenerateGifForm.css create mode 100644 src/components/GenerateGifForm.js create mode 100644 src/containers/GenerateGifFormContainer.js diff --git a/package.json b/package.json index 8079fd8..212831d 100644 --- a/package.json +++ b/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": { diff --git a/src/actions/index.js b/src/actions/index.js index 3c2720d..e300546 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -72,6 +72,23 @@ export const updateGIFProgress = 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 } diff --git a/src/components/GenerateGifForm.css b/src/components/GenerateGifForm.css new file mode 100644 index 0000000..d3bf4f1 --- /dev/null +++ b/src/components/GenerateGifForm.css @@ -0,0 +1,43 @@ +.GenerateGifForm-input { + display: block; + height: 20px; + width: 200px; + margin: 15px auto 0; + border: 1px solid #000; + font-size: 1em; + border-radius: 5px; + padding: 5px; + outline: none !important; + text-align: center; +} + +.GenerateGifForm-input-error { + border-color: #cc0000; +} + +.GenerateGifForm-button { + width: 210px; + height: 35px; + margin-top: 15px; + font-size: 1em; + background: transparent; + border: 1px solid #fff; + border-radius: 5px; + color: #fff; + cursor: pointer; + outline: none !important; + animation: fade-in 0.5s; +} + +.GenerateGifForm-button:hover { + background: #484848; +} + +.GenerateGifForm-button:active { + background: #3b3b3b; +} + +.GenerateGifForm-button:focus { + border-color: #e79600; + background: #484848; +} diff --git a/src/components/GenerateGifForm.js b/src/components/GenerateGifForm.js new file mode 100644 index 0000000..5378604 --- /dev/null +++ b/src/components/GenerateGifForm.js @@ -0,0 +1,70 @@ +import React, { Component } from 'react'; +import './GenerateGifForm.css'; + +class GenerateGifForm extends Component { + constructor(props) { + super(props); + this.handleInputUpdate = this.handleInputUpdate.bind(this); + this.handleSubmit = this.handleSubmit.bind(this); + } + + handleSubmit(evt) { + evt.preventDefault(); + this.props.handleGenerateGIF(); + } + + handleInputUpdate(evt) { + switch (evt.target.name) { + case 'caption': + this.props.updateText(evt.target.value); + break; + case 'fontColor': + this.props.updateTextColor(evt.target.value); + break; + + case 'name': + this.props.updateGIFFileName(evt.target.value); + break; + + default: + break; + } + } + + render() { + return ( +
            + + + + +
            + ); + } +} + +export default GenerateGifForm; diff --git a/src/components/Preview.css b/src/components/Preview.css index 19f5717..9e864bb 100644 --- a/src/components/Preview.css +++ b/src/components/Preview.css @@ -36,37 +36,10 @@ margin-top: 20px; } -.Preview-create-button { - width: 210px; - height: 35px; - margin-top: 10px; - font-size: 1em; - background: transparent; - border: 1px solid #fff; - border-radius: 5px; - color: #fff; - cursor: pointer; - outline: none !important; - animation: fade-in 0.5s; -} - -.Preview-create-button:hover { - background: #484848; -} - -.Preview-create-button:active { - background: #3b3b3b; -} - -.Preview-create-button:focus { - border-color: #e79600; - background: #484848; -} - .Preview-progress-outer { width: 210px; - height: 10px; - margin: 10px auto; + height: 15px; + margin: 15px auto 0; } .Preview-progress-inner { @@ -74,6 +47,13 @@ border-radius: 3px; } +.Preview-progress-success { + width: 200px; + margin: 15px auto 0; + text-align: center; + color: #fff; +} + @keyframes fade-in { 0% { opacity: 0; diff --git a/src/components/Preview.js b/src/components/Preview.js index 485895a..a083efb 100644 --- a/src/components/Preview.js +++ b/src/components/Preview.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import classNames from 'classnames'; import Frame from './Frame'; +import GenerateGifFormContainer from '../containers/GenerateGifFormContainer'; import './Preview.css'; class Preview extends Component { @@ -26,14 +27,18 @@ class Preview extends Component { height, oversample, interval, - generateGIF + generateGIF, + caption, + fontColor } = this.props; const images = frameIDs.map(id => frames[id]); const multiplier = oversample ? 2 : 1; const opts = { gifWidth: width * multiplier, gifHeight: height * multiplier, - interval: interval / 1000 + interval: interval / 1000, + text: caption, + fontColor: fontColor }; generateGIF(images, opts); } @@ -83,15 +88,11 @@ class Preview extends Component { {numFrames ? `${previewIdx + 1} / ${numFrames}` : '0 / 0'}
          - {!!numFrames && ( - - )} + {!!numFrames && this.props.gifData.length === 0 ? ( + + ) : null}
          + {gifProgress === 1 ? ( +
          + GIF ready for download! +
          + ) : null}
          ); } diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index 33eeac4..fdd3d20 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -32,8 +32,8 @@ class Sidebar extends Component { } handleDownload() { - const { gifData } = this.props; - download(gifData, 'gifsmos.gif', 'image/gif'); + const { gifData, gifFileName } = this.props; + download(gifData, gifFileName || 'gifsmos.gif', 'image/gif'); } handleRequestFrame() { diff --git a/src/constants/action-types.js b/src/constants/action-types.js index 950302c..98d9ab6 100644 --- a/src/constants/action-types.js +++ b/src/constants/action-types.js @@ -11,6 +11,9 @@ export const ADD_FRAME = 'ADD_FRAME'; export const UPDATE_GIF_PROGRESS = 'UPDATE_GIF_PROGRESS'; export const ADD_GIF = 'ADD_GIF'; +export const UPDATE_TEXT = 'UPDATE_TEXT'; +export const UPDATE_TEXT_COLOR = 'UPDATE_TEXT_COLOR'; +export const UPDATE_GIF_FILENAME = 'UPDATE_GIF_FILENAME'; // UI export const UPDATE_PREVIEW_IDX = 'UPDATE_PREVIEW_IDX'; diff --git a/src/containers/GenerateGifFormContainer.js b/src/containers/GenerateGifFormContainer.js new file mode 100644 index 0000000..cbc9fdf --- /dev/null +++ b/src/containers/GenerateGifFormContainer.js @@ -0,0 +1,26 @@ +import { connect } from 'react-redux'; +import GenerateGifForm from '../components/GenerateGifForm'; +import { updateGIFFileName, updateText, updateTextColor } from '../actions'; + +const mapStateToProps = (state, ownProps) => { + const { images } = state; + const { caption, fontColor, gifFileName } = images; + + return { + handleGenerateGIF: ownProps.handleGenerateGIF, + caption, + fontColor, + gifFileName + }; +}; + +const GenerateGifFormContainer = connect( + mapStateToProps, + { + updateText, + updateTextColor, + updateGIFFileName + } +)(GenerateGifForm); + +export default GenerateGifFormContainer; diff --git a/src/containers/PreviewContainer.js b/src/containers/PreviewContainer.js index 1701da2..8e5bca3 100644 --- a/src/containers/PreviewContainer.js +++ b/src/containers/PreviewContainer.js @@ -11,7 +11,7 @@ import panes from '../constants/pane-types'; const mapStateToProps = (state, ownProps) => { const { images, ui, settings } = state; const { expandedPane, previewIdx, playing } = ui; - const { frames, frameIDs, gifProgress } = images; + const { frames, frameIDs, gifProgress, gifData, caption, fontColor } = images; const { width, height, oversample, interval } = settings.image; return { @@ -21,16 +21,24 @@ const mapStateToProps = (state, ownProps) => { frames, frameIDs, gifProgress, + gifData, width, height, oversample, - interval + interval, + caption, + fontColor }; }; const PreviewContainer = connect( mapStateToProps, - { updatePreviewIdx, generateGIF, startAnimation, stopAnimation } + { + updatePreviewIdx, + generateGIF, + startAnimation, + stopAnimation + } )(Preview); export default PreviewContainer; diff --git a/src/containers/SidebarContainer.js b/src/containers/SidebarContainer.js index 29d5cf3..b58be03 100644 --- a/src/containers/SidebarContainer.js +++ b/src/containers/SidebarContainer.js @@ -5,13 +5,14 @@ import { requestFrame, togglePane, reset } from '../actions'; const mapStateToProps = (state, ownProps) => { const { images, settings, ui } = state; const { expandedPane } = ui; - const { gifData, frameIDs } = images; + const { gifData, frameIDs, gifFileName } = images; const { width, height, oversample } = settings.image; return { numFrames: frameIDs.length, expandedPane, gifData, + gifFileName, width, height, oversample diff --git a/src/index.js b/src/index.js index 9605613..da50e73 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { createStore, applyMiddleware } from 'redux'; +import { composeWithDevTools } from 'redux-devtools-extension'; import { Provider } from 'react-redux'; import thunkMiddleware from 'redux-thunk'; import rootReducer from './reducers'; @@ -10,7 +11,10 @@ import { togglePane } from './actions'; import greet from './lib/dev-greeting'; import './index.css'; -const store = createStore(rootReducer, applyMiddleware(thunkMiddleware)); +const store = createStore( + rootReducer, + composeWithDevTools(applyMiddleware(thunkMiddleware)) +); const closePane = () => store.dispatch(togglePane(panes.NONE)); diff --git a/src/reducers/images.js b/src/reducers/images.js index fef790c..c230568 100644 --- a/src/reducers/images.js +++ b/src/reducers/images.js @@ -12,17 +12,23 @@ import { ADD_FRAME, UPDATE_GIF_PROGRESS, ADD_GIF, + UPDATE_GIF_FILENAME, UPDATE_IMAGE_SETTING, UPDATE_BOUNDS_SETTING, UPDATE_STRATEGY, - RESET + RESET, + UPDATE_TEXT, + UPDATE_TEXT_COLOR } from '../constants/action-types'; const initialState = { frames: {}, frameIDs: [], gifProgress: 0, - gifData: '' + gifData: '', + caption: '', + fontColor: '#000000', + gifFileName: '' }; const images = (state = initialState, { type, payload }) => { @@ -64,6 +70,24 @@ const images = (state = initialState, { type, payload }) => { } }; + case UPDATE_TEXT: + return { + ...state, + caption: payload.text + }; + + case UPDATE_TEXT_COLOR: + return { + ...state, + fontColor: payload.fontColor + }; + + case UPDATE_GIF_FILENAME: + return { + ...state, + gifFileName: payload.gifFileName + }; + case RESET: return initialState; From 1f5a38878fd0749202cf1c75ca96a044cd17bff7 Mon Sep 17 00:00:00 2001 From: Jason Matthias Date: Thu, 20 Jun 2019 14:25:23 -0700 Subject: [PATCH 43/44] remove redux-devtools-extension from package.json --- package-lock.json | 6 ------ package.json | 1 - 2 files changed, 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index f14ebb7..bdd24d6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14710,12 +14710,6 @@ "symbol-observable": "^1.2.0" } }, - "redux-devtools-extension": { - "version": "2.13.8", - "resolved": "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz", - "integrity": "sha512-8qlpooP2QqPtZHQZRhx3x3OP5skEV1py/zUdMY28WNAocbafxdG2tRD1MWE7sp8obGMNYuLWanhhQ7EQvT1FBg==", - "dev": true - }, "redux-mock-store": { "version": "1.5.3", "resolved": "https://registry.npmjs.org/redux-mock-store/-/redux-mock-store-1.5.3.tgz", diff --git a/package.json b/package.json index 212831d..8079fd8 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,6 @@ "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": { From aed1b9ed0f6277019ff1f02a81b4cbb5df0c5518 Mon Sep 17 00:00:00 2001 From: Jason Matthias Date: Thu, 20 Jun 2019 14:32:04 -0700 Subject: [PATCH 44/44] remove composeWithDevtools from create store --- src/index.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/index.js b/src/index.js index da50e73..9605613 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { createStore, applyMiddleware } from 'redux'; -import { composeWithDevTools } from 'redux-devtools-extension'; import { Provider } from 'react-redux'; import thunkMiddleware from 'redux-thunk'; import rootReducer from './reducers'; @@ -11,10 +10,7 @@ import { togglePane } from './actions'; import greet from './lib/dev-greeting'; import './index.css'; -const store = createStore( - rootReducer, - composeWithDevTools(applyMiddleware(thunkMiddleware)) -); +const store = createStore(rootReducer, applyMiddleware(thunkMiddleware)); const closePane = () => store.dispatch(togglePane(panes.NONE));