feature:adding theme maker

package.json

@@ -11,6 +11,7 @@
     "material-ui": "^0.18.1",
     "prop-types": "^15.5.10",
     "react": "^16.4.1",
+    "react-color": "^2.14.1",
     "react-dom": "^16.4.1",
     "react-flexbox-grid": "^2.1.2",
     "react-fontawesome": "^1.6.1",
@@ -20,6 +21,7 @@
     "redux": "^3.6.0",
     "redux-form": "^6.7.0",
     "redux-form-material-ui": "^4.2.0",
+    "redux-persist": "^5.10.0",
     "redux-thunk": "^2.2.0",
     "whatwg-fetch": "^2.0.3"
   },

src/App.css

@@ -1,3 +1,12 @@
+body, html, #root, main {
+  height: 100%;
+}
+
+.app-wrap {
+  height: 100%;
+  background-color: #aa73ff
+}
+
 .form-control {
     display: block;
     width: 100%;
@@ -25,7 +34,7 @@ textarea {
 }
 
 .sticky{
-    background-color: yellow !important;
+    background-color: yellow;
     font-family: Gloria Hallelujah, cursive;
     display: block;
     padding: 1em;
@@ -76,4 +85,4 @@ textarea {
     font-family: Gloria Hallelujah, cursive;
     color:rgb(94, 94, 94);
     font-size: 16px;
-}
+}

src/App.js

@@ -4,6 +4,8 @@ import { connect } from "react-redux";
 import Snackbar from "material-ui/Snackbar";
 import * as actions from "./actions";
 import Home from "./components/Home";
+import Theme from "./components/Theme";
+
 import "./App.css";
 class App extends Component {
   closeSnackbar = () => {
@@ -20,10 +22,16 @@ class App extends Component {
       snackbarOpen = this.props.message.payload.show;
       snackbarMessage = this.props.message.payload.message;
     }
+
+    const theme = {
+      backgroundColor: this.props.theme.background
+    }
+
     return (
-      <div className="app-wrap">
+      <div className="app-wrap" style={theme}>
         <link href='https://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css' />
         <Route exact path="/" component={Home} />
+        <Route path="/theme" component={Theme} />
         {/*message*/}
         <Snackbar
           open={snackbarOpen}
@@ -38,7 +46,8 @@ class App extends Component {
 
 function mapStateToProps(state) {
   return {
-    message: state.message
+    message: state.message,
+    theme: state.theme
   };
 }
 

src/actions/theme.js

@@ -0,0 +1,6 @@
+import { CHANGE_THEME } from './types'
+
+export const changeTheme = (payload) => ({
+  type: CHANGE_THEME,
+  payload
+})

src/actions/types.js

@@ -1,2 +1,3 @@
-export const SHOW_MESSAGE = 'show_message';
-export const DELETE_MESSAGE = 'DELETE_MESSAGE'
+export const SHOW_MESSAGE = 'show_message'
+export const DELETE_MESSAGE = 'DELETE_MESSAGE'
+export const CHANGE_THEME = 'CHANGE_THEME'

src/components/Home.js

@@ -1,7 +1,10 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import FloatingActionButton from "material-ui/FloatingActionButton";
+import Button from '@material-ui/core/Button';
+import Icon from '@material-ui/core/Icon';
 import ContentAdd from "material-ui/svg-icons/content/add";
+import ContentEdit from "material-ui/svg-icons/content/create";
 import { Grid, Row } from "react-flexbox-grid";
 import _ from "lodash";
 import * as actions from "./../actions";
@@ -61,12 +64,19 @@ class Home extends Component {
     this.setState({ notesData });
   };
   render() {
+    console.log(this.props.theme)
     const styles = {
       floatingButton: {
         marginRight: "20px",
         position: "fixed",
         right: "20px",
         bottom: "20px"
+      },
+      floatingEditButton: {
+        marginRight: "20px",
+        position: "fixed",
+        left: "20px",
+        bottom: "20px"
       }
     };
     return (
@@ -81,6 +91,8 @@ class Home extends Component {
                   noteData={JSON.stringify(noteData)}
                   updateNote={this.updateNote}
                   remove={() => this.removeNote(noteData.id)}
+                  bgColor={this.props.theme.cardBackground}
+                  color={this.props.theme.cardText}
                 />
               );
             })}
@@ -92,13 +104,23 @@ class Home extends Component {
         >
           <ContentAdd />
         </FloatingActionButton>
+        <FloatingActionButton
+          style={styles.floatingEditButton}
+          onClick={() => {
+            this.props.history.push('theme')
+          }}
+        >
+          <ContentEdit />
+        </FloatingActionButton>
       </div>
     );
   }
 }
 
 function mapStateToProps(state) {
-  return {};
+  return {
+    theme: state.theme
+  };
 }
 
 export default connect(

src/components/Notepad.js

@@ -18,7 +18,7 @@ class Notepad extends Component {
     } else if (event.target.name === "message") {
       noteData.content = event.target.value;
     }
-    console.log(noteData);
+
     this.props.updateNote(noteData);
   };
 
@@ -31,11 +31,24 @@ class Notepad extends Component {
         border: "none"
       }
     };
+
+    const theme = {
+      backgroundColor: `${this.props.bgColor}` || '',
+      color: `${this.props.color}` || ''
+    }
+
+    console.log(this.props.color)
+
+    const cardStyle = {
+      ...this.props.style
+    }
+
     return (
-      <Col xs={12} md={3} className="notepad-wrap">
-        <Card className="sticky">
+      <Col xs={12} md={3} className="notepad-wrap" style={cardStyle}>
+        <Card className="sticky" style={theme}>
           <div>
             <input
+              style={{ color: theme.color }}
               hintText="Title"
               fullWidth={true}
               value={JSON.parse(this.props.noteData).title}
@@ -44,6 +57,7 @@ class Notepad extends Component {
               placeholder="Title..."
             />
             <textarea
+              style={{ color: theme.color }}
               id="message"
               name="message"
               className="form-control"

src/components/Theme.js

@@ -0,0 +1,94 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { Grid, Row, Col } from "react-flexbox-grid"
+import { TwitterPicker } from 'react-color'
+import { changeTheme } from '../actions/theme'
+
+import Notepad from './Notepad'
+
+const ThemePiker = ({ title, changeHandler, color }) => (
+  <React.Fragment>
+    <h3>{title}</h3>
+    <TwitterPicker
+      color={ color }
+      onChangeComplete={ changeHandler }
+    />
+  </React.Fragment>
+)
+
+class Theme extends Component {
+  state = {
+    background: '#fff',
+    cardBackground: '#fff',
+    cardText: '#fff'
+  }
+
+  handleChange = (color, stateProp) => {
+    this.setState({ [stateProp]: color.hex })
+    this.props.changeTheme({
+      [stateProp]: color.hex
+    })
+  }
+
+  render () {
+    const { background, cardBackground, cardText } = this.state
+    const noteData = {
+      title: 'Title test',
+      content: 'Content test'
+    }
+    return (
+      <Grid fluid>
+        <h1>Make your own theme!</h1>
+
+        <Row>
+          <Col xs={4}>
+            <ThemePiker
+              title='Background'
+              color={background}
+              changeHandler={(color) => this.handleChange(color, 'background')}
+            />
+          </Col>
+          <Col xs={4}>
+            <ThemePiker
+              title='Card'
+              color={cardBackground}
+              changeHandler={(color) => this.handleChange(color, 'cardBackground')}
+            />
+            <Notepad
+              style={{
+                maxWidth: '100%',
+                top: '5%',
+                left: '50%',
+                position: 'relative'
+              }}
+              bgColor={this.props.theme.cardBackground}
+              color={this.props.theme.cardText}
+              noteData={JSON.stringify(noteData)}
+            />
+          </Col>
+          <Col xs={4}>
+            <ThemePiker
+              title='Card Text'
+              color={cardText}
+              changeHandler={(color) => this.handleChange(color, 'cardText')}
+            />
+          </Col>
+        </Row>
+      </Grid>
+    )
+  }
+}
+
+const mapStaetToProps = (state) => ({
+  theme: state.theme
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  changeTheme: bindActionCreators(changeTheme, dispatch)
+})
+
+export default connect(
+  mapStaetToProps,
+  mapDispatchToProps
+)(Theme)

src/index.css

@@ -3,10 +3,15 @@ body {
   padding: 0;
   font-family: sans-serif;
   overflow-x: hidden !important;
-  background-color:#aa73ff;
+  /* background-color:#aa73ff; */
   font-family: Gloria Hallelujah, cursive;
   color:white;
 }
+
+h1 {
+  margin: 0
+}
+
 .display-inline-block{
   display: inline-block !important;
 }

src/index.js

@@ -4,32 +4,45 @@ import ReactDOM from 'react-dom';
 import {
   BrowserRouter as Router,
   Route,
-  Switch
+  Switch,
 } from 'react-router-dom';
 import { Provider } from 'react-redux';
-import App from './App';
-import registerServiceWorker from './registerServiceWorker';
 import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 import './index.css';
 import { createStore, applyMiddleware } from 'redux';
-import reducers from './reducers';
 import reduxThunk from 'redux-thunk';
+import { persistStore, persistReducer } from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
+import { PersistGate } from 'redux-persist/integration/react';
+import registerServiceWorker from './registerServiceWorker';
+import App from './App';
+import reducers from './reducers';
 
-// injectTapEventPlugin(); // removed this because https://github.com/zilverline/react-tap-event-plugin#deprecated
+const persistConfig = {
+  key: 'root',
+  storage,
+  whitelist: ['theme'],
+};
 
+// injectTapEventPlugin(); // removed this because https://github.com/zilverline/react-tap-event-plugin#deprecated
+const persistedReducer = persistReducer(persistConfig, reducers);
 const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
+const store = createStoreWithMiddleware(persistedReducer);
+const persistor = persistStore(store);
 
 const Main = () => (
-  <Provider store={createStoreWithMiddleware(reducers)}>
-    <Router>
-    <MuiThemeProvider>
-      <main>
-        <Switch>
-          <Route path='/' component={App}/>
-        </Switch>
-      </main>
-    </MuiThemeProvider>
-  </Router>
+  <Provider store={store}>
+    <PersistGate persistor={persistor}>
+      <Router>
+        <MuiThemeProvider>
+          <main>
+            <Switch>
+              <Route path='/' component={App}/>
+            </Switch>
+          </main>
+      </MuiThemeProvider>
+      </Router>
+    </PersistGate>
   </Provider>
 );
 

src/reducers/index.js

@@ -1,9 +1,11 @@
 import { combineReducers } from 'redux';
 import messageReducer from './message';
+import theme from './theme'
 import { reducer as formReducer } from 'redux-form';
 const rootReducer = combineReducers({
   form: formReducer,
-  message:messageReducer
+  message: messageReducer,
+  theme
 });
 
 export default rootReducer;