diff --git a/src/Note.tsx b/src/Note.tsx
index 74759b1..078c2f4 100644
--- a/src/Note.tsx
+++ b/src/Note.tsx
@@ -1,6 +1,6 @@
import React from "react";
-import { View, useEventHandler, Text, Button } from "@nodegui/react-nodegui";
-import { QPushButtonEvents, NativeEvent } from "@nodegui/nodegui";
+import { View, Text, Button } from "@nodegui/react-nodegui";
+import { QPushButtonEvents } from "@nodegui/nodegui";
export type NoteType = {
id: number;
@@ -8,25 +8,19 @@ export type NoteType = {
text: string;
};
-const Note: React.FC<{ note: NoteType; onRemove: (id: number) => void }> = ({
- note,
- onRemove
-}) => {
- const deleteHandler = useEventHandler(
- {
- [QPushButtonEvents.clicked]: () => {
- console.log("removing note id ", note.id);
- onRemove(note.id);
- }
- },
- [onRemove]
- );
-
+const Note: React.FC<{
+ note: NoteType;
+ onRemove: (id: number) => () => void;
+}> = ({ note, onRemove }) => {
return (
{note.createdAt.toDateString()}
-
+
{note.text}
diff --git a/src/index.tsx b/src/index.tsx
index b3dc4f4..7ee6eb1 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from "react";
+import React, { useState, useMemo, Reducer, useReducer } from "react";
import {
Renderer,
View,
@@ -17,10 +17,46 @@ import {
import Note, { NoteType } from "./Note";
const fixedSize = { width: 500, height: 500 };
+
+interface state {
+ notes: NoteType[];
+}
+interface action {
+ type: "create" | "remove";
+ value: string;
+}
+
+const reducer: Reducer = (state, action) => {
+ const newState = { ...state };
+ switch (action.type) {
+ case "create": {
+ newState.notes = [
+ ...state.notes,
+ {
+ id: Math.floor(Math.random() * 10000),
+ createdAt: new Date(),
+ text: action.value
+ }
+ ];
+ break;
+ }
+ case "remove": {
+ console.log(state.notes.map(n => n.text));
+ const filteredNotes = state.notes.filter(
+ note => note.id.toString() !== action.value
+ );
+ console.log(filteredNotes.map(n => n.text));
+ newState.notes = filteredNotes;
+ break;
+ }
+ }
+ return newState;
+};
+
const App = () => {
const [theme, setTheme] = useState(darkTheme);
const [newNote, setNewNote] = useState("");
- const [notes, setNotes] = useState([]);
+ const [state, dispatch] = useReducer(reducer, { notes: [] });
const lineEditHandler = useMemo(
() => ({
@@ -38,25 +74,15 @@ const App = () => {
const buttonHandler = useEventHandler(
{
[QPushButtonEvents.clicked]: () => {
- setNotes([
- ...notes,
- {
- id: Math.floor(Math.random() * 10000),
- createdAt: new Date(),
- text: newNote
- }
- ]);
+ dispatch({ type: "create", value: newNote });
setNewNote("");
}
},
- [notes, newNote]
+ [state.notes, newNote]
);
- const removeNote = (id: number) => {
- console.log(notes.length);
- const filteredNotes = notes.filter(note => note.id !== id);
- console.log(filteredNotes.length);
- setNotes(filteredNotes);
+ const removeNote = (id: number) => () => {
+ dispatch({ type: "remove", value: id.toString() });
};
return (
@@ -67,9 +93,8 @@ const App = () => {
>
- {`Notes (${notes.length})`}
-
- {notes.map(note => (
+ {`Notes (${state.notes.length})`}
+ {state.notes.map(note => (
))}