Add favicon.

Hsins-Lab · Jul 4, 2019 · 098dc90 · 098dc90
1 parent d926a31
commit 098dc90
Show file tree

Hide file tree

Showing 10 changed files with 41 additions and 54 deletions.
diff --git a/client/public/favicon.ico b/client/public/favicon.ico
diff --git a/client/public/favicon.png b/client/public/favicon.png
diff --git a/client/public/index.html b/client/public/index.html
@@ -2,26 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <!--
-      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/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <!-- FontAwesome 5.8.1 -->
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"
     />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>MERN Stack Todo-List</title>
   </head>
   <body>

diff --git a/client/src/actions/index.js b/client/src/actions/index.js
@@ -1,23 +1,23 @@
 import axios from 'axios';
 import {
-  FETCH_TODOS,
-  ADD_TODO,
+  GETALL_TODO,
+  ADDNEW_TODO,
   TOGGLE_TODO,
   UPDATE_TODO,
   DELETE_TODO,
   TOGGLE_TAB
 } from './types';
 
-export const fetchTodos = () => async dispatch => {
+export const getAllTodo = () => async dispatch => {
   const res = await axios.get('/api/todos');
 
-  dispatch({ type: FETCH_TODOS, payload: res.data });
+  dispatch({ type: GETALL_TODO, payload: res.data });
 };
 
-export const addTodo = name => async dispatch => {
+export const addNewTodo = name => async dispatch => {
   const res = await axios.post('/api/todos', { name });
 
-  dispatch({ type: ADD_TODO, payload: res.data });
+  dispatch({ type: ADDNEW_TODO, payload: res.data });
 };
 
 export const toggleTodo = id => async dispatch => {

diff --git a/client/src/actions/types.js b/client/src/actions/types.js
@@ -1,8 +1,9 @@
-export const FETCH_TODOS = 'FETCH_TODOS';
-export const ADD_TODO = 'ADD_TODO';
+export const GETALL_TODO = 'GETALL_TODO';
+export const ADDNEW_TODO = 'ADDNEW_TODO';
 export const TOGGLE_TODO = 'TOGGLE_TODO';
 export const UPDATE_TODO = 'UPDATE_TODO';
 export const DELETE_TODO = 'DELETE_TODO';
+
 export const TOGGLE_TAB = 'TOGGLE_TAB';
 export const SHOW_ALL = 'all';
 export const SHOW_ACTIVE = 'active';

diff --git a/client/src/components/Task.js b/client/src/components/Task.js
@@ -3,30 +3,33 @@ import { connect } from 'react-redux';
 import { updateTodo } from '../actions';
 
 class Task extends Component {
-  state = { editing: false, text: '' };
+  constructor(props) {
+    super(props);
+    this.state = { editing: false, text: '' };
+  }
 
   componentDidMount = () => this.setState({ text: this.props.name });
 
-  handleDeleteTodo = e => {
-    e.stopPropagation();
+  handleDeleteTodo = event => {
+    event.stopPropagation();
     this.props.deleteTodo();
   };
 
-  showEditForm = e => {
-    e.stopPropagation();
+  showEditForm = event => {
+    event.stopPropagation();
     this.setState(prevState => ({ editing: !prevState.editing }));
   };
 
-  onInputClick = e => {
-    e.stopPropagation();
+  onInputClick = event => {
+    event.stopPropagation();
   };
 
-  onInputChange = e => {
-    this.setState({ text: e.target.value });
+  onInputChange = event => {
+    this.setState({ text: event.target.value });
   };
 
-  onFormSubmit = e => {
-    e.preventDefault();
+  onFormSubmit = event => {
+    event.preventDefault();
     this.setState(prevState => ({ editing: !prevState.editing }));
     this.props.updateTodo(this.props.id, this.state.text);
   };

diff --git a/client/src/components/TodoForm.js b/client/src/components/TodoForm.js
@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { addTodo } from '../actions';
+import { addNewTodo } from '../actions';
 
 class TodoForm extends Component {
-  constructor() {
-    super();
+  constructor(props) {
+    super(props);
     this.state = { text: '' };
   }
 
@@ -14,7 +14,7 @@ class TodoForm extends Component {
 
   onFormSubmit = event => {
     event.preventDefault();
-    this.props.addTodo(this.state.text);
+    this.props.addNewTodo(this.state.text);
     this.setState({ text: '' });
   };
 
@@ -35,5 +35,5 @@ class TodoForm extends Component {
 
 export default connect(
   null,
-  { addTodo }
+  { addNewTodo }
 )(TodoForm);
diff --git a/client/src/components/TodoList.js b/client/src/components/TodoList.js
@@ -2,18 +2,17 @@ import React, { Component } from 'react';
 import TodoForm from './TodoForm';
 import Task from './Task';
 import { connect } from 'react-redux';
-import { fetchTodos, toggleTodo, deleteTodo, toggleTab } from '../actions';
+import { getAllTodo, toggleTodo, deleteTodo, toggleTab } from '../actions';
 import { TABS } from '../actions/types';
 
 class TodoList extends Component {
   componentDidMount = async () => {
-    this.props.fetchTodos();
+    this.props.getAllTodo();
     try {
-      setInterval(async () => {
-        this.props.fetchTodos();
-      }, 10000);
-    } catch (e) {
-      console.log(e);
+      await this.props.getAllTodo();
+    } catch (err) {
+      console.log('[ERROR]');
+      console.log(err.message);
     }
   };
 
@@ -95,5 +94,5 @@ const mapStateToProps = ({ todos, currTab }) => {
 
 export default connect(
   mapStateToProps,
-  { fetchTodos, toggleTodo, deleteTodo, toggleTab }
+  { getAllTodo, toggleTodo, deleteTodo, toggleTab }
 )(TodoList);
diff --git a/client/src/reducers/index.js b/client/src/reducers/index.js
@@ -2,7 +2,4 @@ import { combineReducers } from 'redux';
 import todos from './todos';
 import currTab from './currTab';
 
-export default combineReducers({
-  todos,
-  currTab
-});
+export default combineReducers({ todos, currTab });
diff --git a/client/src/reducers/todos.js b/client/src/reducers/todos.js
@@ -1,16 +1,16 @@
 import {
-  FETCH_TODOS,
-  ADD_TODO,
+  GETALL_TODO,
+  ADDNEW_TODO,
   TOGGLE_TODO,
   UPDATE_TODO,
   DELETE_TODO
 } from '../actions/types';
 
 export default function(state = [], action) {
   switch (action.type) {
-    case FETCH_TODOS:
+    case GETALL_TODO:
       return action.payload;
-    case ADD_TODO:
+    case ADDNEW_TODO:
       return [action.payload, ...state];
     case TOGGLE_TODO:
       return state.map(todo =>