Criando modelo Nota e separando a exibição em um novo componente

Author: acmesquita

src/components/ComponentList/index.js

@@ -2,6 +2,9 @@ import React, { useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Types } from '../../store/reducer/example-reducer';
 
+import Note from '../../models/Note';
+import ItemList from '../ItemList'
+
 export default function ComponentList() {
 
   const qty = 20
@@ -13,7 +16,9 @@ export default function ComponentList() {
   const dispatch = useDispatch();
 
   function add() {
-    dispatch({ type: Types.ADD, title: text })
+    let note = new Note(text)
+    dispatch({ type: Types.ADD, note })
+    setText('')
   }
 
   return (
@@ -26,7 +31,7 @@ export default function ComponentList() {
       />
       <button type="button" onClick={add}>ADD</button>
       <ul>
-        {list.map(item => <li key={item}>{item}</li>)}
+        {list.map(item => <li key={item.id}><ItemList item={item} /> </li>)}
       </ul>
     </>
   );

src/components/ItemList/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+// import { Container } from './styles';
+
+export default function ItemList({ item }) {
+  return (
+    <span>
+      {item.text} - {item.createAt}
+    </span>
+  );
+}

src/models/Note.js

@@ -0,0 +1,11 @@
+import crypto from 'crypto';
+
+export default class Note {
+
+  constructor(text) {
+    this.id = crypto.randomBytes(4).toString('HEX')
+    this.text = text
+    this.createAt = new Date().toLocaleDateString()
+  }
+
+}

src/store/reducer/example-reducer.js

@@ -5,15 +5,15 @@ import { createActions, createReducer } from 'reduxsauce';
  *  Ex.: Type.ADD e add = { type: Type.ADD, params }
  */
 export const { Types, Creators } = createActions({
-  add: ["title"]
+  add: ["note"]
 })
 
 const INITIAL_STATE = {
   data: []
 }
 
 const add = (state = INITIAL_STATE, action) => {
-  return { ...state, data: [...state.data, action.title] }
+  return { ...state, data: [...state.data, action.note] }
 }
 
 /**