// InputNoteInput.tsx 
import React, { ChangeEvent } from "react";

interface NewNoteInputProps {
    addNote(note:string): void
}
export const NewNoteInput: React.FC<NewNoteInputProps> = ({ addNote }) => {
    const [note, setNote] = React.useState("")
    const updateNote = (event:ChangeEvent<HTMLInputElement>) => {
        setNote(event.target.value)
    }

    const onAddNoteClick = () => {
        addNote(note)
        setNote("")
    }
    
  return (<div>
      <input onChange={updateNote} value={note} name="note" type="text" placeholder="note" />
      <button onClick={onAddNoteClick}>Add note</button>
  </div>)
};


// App.tsx
import React from 'react';
import { NewNoteInput } from './NewNoteInput';

function App() {
  return (
   <>
    <NewNoteInput addNote={alert}/>
   </> 
  );
}

export default App;

// store.ts

import { createStore } from "redux";
import { noteReducer } from "./noteReducer";
export const store = createStore(noteReducer);


// index.ts
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {Provider} from 'react-redux'
import {store} from './store'
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
    <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();



// noteReducer.ts
export interface NotesState {
  notes: string[];
}

const initialState = {
  notes: [],
};

type Action = { type: "ADD_NOTE"; payload: string };

export const noteReducer = (
  state: NotesState = initialState,
  action: Action
) => {
  switch (action.type) {
    case "ADD_NOTE": {
      return { ...state, notes: [...state.notes, action.payload] };
    }
    default:
      return state;
  }
};





// App.ts

import { useDispatch, useSelector } from "react-redux";
import { NewNoteInput } from "./NewNoteInput";
import { NotesState } from "./noteReducer";

function App() {
  const notes = useSelector<NotesState, NotesState["notes"]>(
    (state) => state.notes
  );
  const dispatch = useDispatch();
  const addNote = (note: string) => {
    console.log(note)
    dispatch({ type: "ADD_NOTE", payload: note });
  };
  return (
    <>
      <NewNoteInput addNote={addNote} />
      <hr />
      <ul>
        {notes.map((note) => (
          <li key={note}>{note}</li>
        ))}
      </ul>
    </>
  );
}

export default App;

// actions.ts
export type Action = {type:"ADD_NOTE", payload:string}

export const addNote = (note:string):Action => ({
    type:"ADD_NOTE", payload:note
});

// noteReducer.ts
import { Action } from "./actions";

export interface NotesState {
  notes: string[];
}

const initialState = {
  notes: [],
};

export const noteReducer = (
  state: NotesState = initialState,
  action: Action
) => {
  switch (action.type) {
    case "ADD_NOTE": {
      return { ...state, notes: [...state.notes, action.payload] };
    }
    default:
      return state;
  }
};




// App.tsx
import { useDispatch, useSelector } from "react-redux";
import { NewNoteInput } from "./NewNoteInput";
import { NotesState } from "./noteReducer";
import {addNote} from "./actions"

function App() {
  const notes = useSelector<NotesState, NotesState['notes']>(
    (state) => state.notes
  );
  const dispatch = useDispatch();
  const onAddNote = (note: string) => {
    console.log(note)
    dispatch(addNote(note));
  };
  return (
    <>
      <NewNoteInput addNote={onAddNote} />
      <hr />
      <ul>
        {notes.map((note) => (
          <li key={note}>{note}</li>
        ))}
      </ul>
    </>
  );
}

export default App;