Adds Redux. Creates action and reducer files for state management

package.json

@@ -13,12 +13,17 @@
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^16.13.1",
     "react-firebase": "^2.2.8",
+    "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.1",
     "react-toast-notifications": "^2.4.0",
     "react-toastify": "^6.0.8",
     "react-tooltip": "^4.2.7",
+    "redux": "^4.1.0",
+    "redux-persist": "^6.0.0",
+    "redux-thunk": "^2.3.0",
     "sanitize.css": "^12.0.1",
+    "thunk": "^0.0.1",
     "wcag-contrast": "^3.0.0"
   },
   "scripts": {

public/index.html

@@ -9,7 +9,6 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

public/manifest.json

@@ -1,23 +1,6 @@
 {
   "short_name": "React App",
   "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",

src/App.js

@@ -1,120 +1,31 @@
 import React, { Component } from 'react'
+import { connect } from 'react-redux'
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
 import './App.css';
 import ContrastChecker from './components/ContrastChecker'
 import ContrastSuggestions from './components/ContrastSuggestions'
 import ColorPickerDisplay from './components/ColorPickerDisplay'
 import Palette from './components/Palette'
-// import StoredPalettes from './helpers/StoredPalettes'
 import SavedPalettes from './components/SavedPalettes'
 import { ChromePicker} from 'react-color'
 import Navbar from './components/Navbar'
 import About from './components/About'
 import {db} from './FirebaseDB'
 import { ToastContainer, toast } from 'react-toastify';
+import {setPickerColor} from "./store/actions/toolsActions"
 import 'react-toastify/dist/ReactToastify.css';
 
+
 class App extends Component {
   constructor(props) {
     super(props);   
     this.state = {   
-      backgroundColor: '#FFF',
-      textColor: '#000',
-      contrastColor: {
-        hex: '#ffffff',
-        rgb:{a:1,b:255,g:255,r:255},
-        hsl: {a:1, h:0, l:1, s:0}
-      },
-      pickerColor: {hex: '#fff'},
-      newColor: {
-        hex: '#ffffff',
-      },
       showColorPicker: true,
-      palette: [],
-      palettes:[]
     }
   }
-
-  componentDidMount(){
-    let palette = JSON.parse(localStorage.getItem('palette')) || []
-    let pickerColor = JSON.parse(localStorage.getItem('pickerColor')) || {hex: '#fff'}
-    let backgroundColor = JSON.parse(localStorage.getItem('backgroundColor')) || '#FFF'
-    let textColor = JSON.parse(localStorage.getItem('textColor')) || '#000'
-
-    this.setState({
-      palette, 
-      pickerColor, 
-      backgroundColor, 
-      textColor
-    })
-  }
-
-  componentDidUpdate(){
-    localStorage.setItem('palette', JSON.stringify(this.state.palette))
-    localStorage.setItem('pickerColor', JSON.stringify(this.state.pickerColor))
-    localStorage.setItem('backgroundColor', 
-      JSON.stringify(this.state.backgroundColor)
-    )
-    localStorage.setItem('textColor', JSON.stringify(this.state.textColor))
-    localStorage.setItem('palettes', JSON.stringify(this.state.palettes))
-  }
 
-  setBackgroundColor = (backgroundColor) => {
-    this.setState({backgroundColor})
-  }
-
-  setTextColor = (textColor) => {
-    this.setState({textColor})
-  }
-
-  setContrastColor = (contrastColor) => {
-    this.setState({contrastColor})
-  }
-
-  setPickerColor = (hex) => {
-
-    let newColor = {hex:hex}
-    this.setState({pickerColor:hex, newColor})
-  }
-
-  handleColorPickerChange = (color) => {
-    this.setState({
-      pickerColor:color.hex, 
-      newColor:color
-    })
-  }
-
-  addToPalette = (color, alert) => {
-    let palette = [...this.state.palette,color]
-    let hex = color.hex
-    this.setState({palette})
-    if(alert){toast.dark(` ${hex} added to palette!`)};
-  }
-
-  removeFromPalette = (index) => {
-    let palette = [...this.state.palette]
-    console.log('?',index)
-    if (palette.length > 0 ){
-      palette = palette.filter((element, idx) => {return idx !== index} ) 
-      this.setState({ palette })
-    }
-  }
-
-  savePalette = (palette) => {
-    db.collection("palettes").add({
-      colors: palette,
-      created: new Date()
-  })
-  .then(function(docRef) {
-      console.log("Document written with ID: ", docRef.id);
-  })
-  .catch(function(error) {
-      console.error("Error adding document: ", error);
-  });
-  }
-
   render() {
-    const {backgroundColor, textColor} = this.state
+
     return (
       <Router>
         <Navbar/>
@@ -126,38 +37,20 @@ class App extends Component {
           <Route exact path='/' render={props =>
             <main className='app-grid' style={{padding: '1rem'}}>
               <section style={{border: '3px solid #181416'}}>
-                <Palette
-                  savePalette = {this.savePalette}
-                  palette = {this.state.palette}
-                  setContrastColor = {this.setContrastColor}
-                  setPickerColor = {this.setPickerColor}
-                  deleteColor = {this.removeFromPalette}
-                />
-                <ContrastSuggestions
-                  contrastColor={this.state.contrastColor}
-                  setPickerColor={this.setPickerColor}
-                  palette={this.state.palette}
-                />
+                <Palette/>
+                <ContrastSuggestions/>
               </section>
               <section style={{border: '3px solid #181416'}}>
                 <ColorPickerDisplay
-                  color={this.state.pickerColor}
-                  setBackgroundColor={this.setBackgroundColor}
-                  setTextColor={this.setTextColor}
                   toggleShowColorPicker={this.toggleShowColorPicker}
-                  addToPalette={this.addToPalette}
-                  newColor={this.state.newColor}
-                  palette={this.state.palette}
                 />
-                <article style={{backgroundColor:this.state.pickerColor}}>
+                <article style={{backgroundColor:this.props.pickerColor.hex}}>
                   <ChromePicker
-                    color={ this.state.pickerColor}
-                    onChangeComplete={ this.handleColorPickerChange }
+                    color={ this.props.pickerColor}
+                    onChangeComplete={ this.props.setPickerColor }
                   />
                 </article>
                 <ContrastChecker
-                  backgroundColor={backgroundColor}
-                  textColor={textColor}
                 />
               </section>
             </main>
@@ -174,6 +67,15 @@ class App extends Component {
   }
 }
 
-export default App
+const mapStateToProps = (state) => ({
+  backgroundColor: state.tools.backgroundColor,
+  pickerColor: state.tools.pickerColor
+})
+const mapDispatchToProps = (dispatch) => {
+  return{
+    setPickerColor: (color) => dispatch(setPickerColor(color))
+  }
+}
+export default connect(mapStateToProps, mapDispatchToProps)(App)
 
 

src/components/About.js

@@ -63,18 +63,6 @@ const About = () => {
                 accessibility guidlines help designers pick text and background colors that have enough luminosity contrast to be easily read by people how experince low vision or don't see color.
                 There are differnt standards for large and bold text than for small text.  
             </p>
-
-            <h3 style={{paddingTop: '40px', textAlign: 'center'}}>
-                Ally Palette was made as part of a {' '}
-                <a
-                    href="https://mlh.io/"
-                    target="_blank"
-                    rel="noreferrer"
-                    className='link'
-                >
-                    Major League Hacking
-                </a> Hackathon!
-            </h3>
         </article>
     );
 };

src/components/Color.js

@@ -4,21 +4,19 @@ import {CopyToClipboard} from 'react-copy-to-clipboard';
 import {toast} from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import ReactTooltip from 'react-tooltip';
+import { useDispatch, useSelector, shallowEqual } from "react-redux";
+import { setContrastColor, setPickerColor } from "../store/actions/toolsActions";
+import { savePalette, removeFromPalette } from "../store/actions/paletteActions"
 
 const wcagContrast = require("wcag-contrast");
 
 const Color = ({
     color,
-    deleteColor, 
-    setContrastColor,
-    setPickerColor,
     idx
     }) => { 
-    const {hex} = color;
 
-    const getComplements = (color) => {
-        setContrastColor(color);
-    };
+    const dispatch = useDispatch();
+    const {hex} = color;
 
     const whiteHexContrast = wcagContrast.hex('#fff', hex);
     const blackHexContrast = wcagContrast.hex('#000', hex);
@@ -47,17 +45,18 @@ const Color = ({
             >
                 <i
                     style={{padding: '0 7px'}}
-                    onClick={()=>setPickerColor(hex)}
+                    onClick={()=>console.log(color)}
+                    onClick={()=>dispatch(setPickerColor(color))}
                     className="fa fa-eyedropper icon" aria-hidden="true"
                     data-tip="pick"
                 ></i>
-                <i style={{padding: '0 7px'}} 
-                    onClick={()=>getComplements(color)} 
+                <i style={{padding: '0 7px'}}
+                    onClick={()=>dispatch(setContrastColor(color))}
                     className="fa fa-adjust icon" aria-hidden="true"
                     data-tip="contrast"
                 ></i>
                 <i style={{padding: '0 7px'}}
-                    onClick={()=>deleteColor(idx)}
+                    onClick={()=>dispatch(removeFromPalette(idx))}
                     className="fa fa-times icon"
                     aria-hidden="true"
                     data-tip="delete"