feat: Basic version of notes (#2)

* fix: update to build process and more fixes

* fix: updated NotesList

* feat: basic version of Markdown Notes

package.json

@@ -8,7 +8,8 @@
     "build:prod": "webpack -p --mode production",
     "changelog": "github_changelog_generator",
     "postinstall": "gem install github_changelog_generator",
-    "preversion": "npm run changelog && git add CHANGELOG.md && git commit --amend --no-edit"
+    "preversion": "npm run changelog && git add CHANGELOG.md && git commit --amend --no-edit",
+    "start": "PORT=8082 webpack-dev-server"
   },
   "repository": {
     "type": "git",
@@ -27,13 +28,16 @@
   },
   "homepage": "https://github.com/kamthamc/MarkdownNotes#readme",
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^5.8.1",
     "immer": "^3.0.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-intl-universal": "^1.15.7",
     "react-redux": "^7.0.2",
     "react-router": "^5.0.0",
+    "react-router-dom": "latest",
     "redux": "^4.0.1",
+    "redux-devtools-extension": "latest",
     "redux-saga": "^1.0.2",
     "reselect": "^4.0.0",
     "styled-components": "^4.2.0",
@@ -47,6 +51,8 @@
     "@types/react": "^16.8.13",
     "@types/react-dom": "^16.8.4",
     "@types/react-redux": "^7.0.7",
+    "@types/react-router-dom": "^4.3.2",
+    "@types/styled-components": "^4.1.14",
     "babel-loader": "^8.0.5",
     "clean-webpack-plugin": "^2.0.1",
     "html-webpack-plugin": "^3.2.0",

src/App.tsx

@@ -1,11 +1,20 @@
 import * as React from 'react';
+import styled, { ThemeProvider } from 'styled-components';
+import defaultTheme from './Themes/Default';
 
-interface Props {
-    name: string
-}
+import { NotesListContainer } from './Containers';
+import { Route } from 'react-router';
 
-export class App extends React.Component<Props> {
-    render() {
-        return <div>Hello {this.props.name}</div>;
-    }
-}
+const Container = styled('div')`
+  height: 100%;
+`;
+
+const App = () => (
+    <ThemeProvider theme={defaultTheme}>
+        <Container>
+            <Route path="/" component={NotesListContainer} />
+        </Container>
+    </ThemeProvider>
+);
+
+export default App;

src/Components/Layout/Row.tsx

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+export const Row = styled('div')`
+    display: flex;
+    flex-direction: row;
+`;
+
+export const Column = styled('div')`
+    display: flex;
+    flex-direction: column;
+`;

src/Containers/NotesList/Actions/Note.tsx

@@ -1,8 +1,7 @@
 import { ActionTypes } from '../Constants';
 
-export const addNewNote = (payload: any) => ({
+export const addNewNote = () => ({
     type: ActionTypes.ADD_NEW_NOTE,
-    payload
 });
 
 export const deleteNote = (payload: any) => ({
@@ -14,3 +13,14 @@ export const openNote = (payload: any) => ({
     type: ActionTypes.OPEN_NOTE,
     payload
 });
+
+export const updateNote = (payload: any) => ({
+    type: ActionTypes.UPDATE_NOTE,
+    payload
+});
+
+
+export const toggleEditMode = (payload: any) => ({
+    type: ActionTypes.TOGGLE_EDIT_MODE,
+    payload
+});

src/Containers/NotesList/Actions/index.tsx

@@ -1 +1 @@
-export { addNewNote } from './Note';
+export { addNewNote, deleteNote, openNote, updateNote } from './Note';

src/Containers/NotesList/Constants/ActionTypes.tsx

@@ -9,10 +9,17 @@ enum ActionTypes {
     OPEN_NOTE_COMPLETED = 'NOTES_LIST/OPEN_NOTE_COMPLETED',
     OPEN_NOTE_FAILED = 'NOTES_LIST/OPEN_NOTE_FAILED',
 
+    UPDATE_NOTE = 'NOTES_LIST/UPDATE_NOTE',
+    UPDATE_NOTE_IN_PROGRESS = 'NOTES_LIST/UPDATE_NOTE_IN_PROGRESS',
+    UPDATE_NOTE_COMPLETED = 'NOTES_LIST/UPDATE_NOTE_COMPLETED',
+    UPDATE_NOTE_FAILED = 'NOTES_LIST/UPDATE_NOTE_FAILED',
+
     DELETE_NOTE = 'NOTES_LIST/DELETE_NOTE',
     DELETE_NOTE_IN_PROGRESS = 'NOTES_LIST/DELETE_NOTE',
     DELETE_NOTE_COMPLETED = 'NOTES_LIST/DELETE_NOTE_COMPLETED',
     DELETE_NOTE_FAILED = 'NOTES_LIST/DELETE_NOTE_FAILED',
+
+    TOGGLE_EDIT_MODE = 'NOTES_LIST/TOGGLE_EDIT_MODE',
 }
 
 export default ActionTypes;

src/Containers/NotesList/Container.tsx

@@ -0,0 +1,29 @@
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+
+import NotesList from './NotesList';
+
+import {activeNoteIdSelector, editModeSelector, notesListSelector, notesMapSelector} from './Selectors';
+
+import { openNote, deleteNote, addNewNote, updateNote } from './Actions';
+import {toggleEditMode} from "./Actions/Note";
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+    openNote: (payload: any) => dispatch(openNote(payload)),
+    updateNote: (payload: any) => dispatch(updateNote(payload)),
+    deleteNote: (payload: any) => dispatch(deleteNote(payload)),
+    addNewNote: () => dispatch(addNewNote()),
+    toggleEditMode: (payload: any) => dispatch(toggleEditMode(payload)),
+});
+
+const mapState = (state: any) => ({
+    notes: notesListSelector(state),
+    notesMap: notesMapSelector(state),
+    activeNoteId: activeNoteIdSelector(state),
+    editMode: editModeSelector(state),
+});
+
+export default connect(
+    mapState,
+    mapDispatchToProps,
+)(NotesList);

src/Containers/NotesList/EmptyNotesList.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import {Column} from "../../Components/Layout/Row";
+
+const NewButton = styled('div')`
+  color: ${props => props.theme.colors.primaryHoverText};
+  border: 1px solid ${props => props.theme.colors.border};
+  font-weight: ${props => props.theme.fontWeights.primaryText};
+  width: 150px;
+  height: 25px;
+  line-height: 1.5;
+  text-align: center;
+  padding: 5px;
+  cursor: pointer;
+  z-index: 1;
+  transition: background-color 0.5s;
+  
+  &:hover {
+    background-color: ${props => props.theme.colors.primaryHoverBackground};
+    color: ${props => props.theme.colors.primaryHoverText};
+  }
+`;
+
+const EmptyNotesListContainer = styled(Column)`
+  align-items: center;
+  padding: 5px;
+  // background-color: ${props => props.theme.colors.primaryHoverBackground};
+`;
+
+interface EmptyNotesListProps {
+
+}
+
+export default class EmptyNotesList extends React.PureComponent<EmptyNotesListProps> {
+    keyUpEventListener = (evt: KeyboardEvent) => {
+        // console.log(evt);
+        if(evt.key === 'n') {
+            evt.preventDefault();
+            // console.log('wohoo');
+        }
+    };
+
+    componentDidMount(): void {
+        document.addEventListener('keyup', this.keyUpEventListener);
+    }
+
+    componentWillUnmount(): void {
+        document.removeEventListener('keyup', this.keyUpEventListener);
+    }
+
+    render() {
+        return (
+            <EmptyNotesListContainer>
+                Add New Note by clicking on '+' icon
+            </EmptyNotesListContainer>
+        );
+    }
+}

src/Containers/NotesList/EmptySelection.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+class EmptySelection extends React.PureComponent {
+
+    keyUpEventListener = (evt: KeyboardEvent) => {
+        // console.log(evt);
+        if(evt.key === 'n') {
+            evt.preventDefault();
+            // console.log('wohoo');
+        }
+    };
+
+    componentDidMount(): void {
+        document.addEventListener('keyup', this.keyUpEventListener);
+    }
+
+    componentWillUnmount(): void {
+        document.removeEventListener('keyup', this.keyUpEventListener);
+    }
+
+    render(): React.ReactNode {
+        return (
+            <div>
+                Please select a note continue.
+            </div>
+        );
+    }
+}
+
+export default EmptySelection;

src/Containers/NotesList/MarkdownEditor/Editor.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import {Note} from "../typings";
+import {ChangeEvent} from "react";
+
+interface Props {
+    note: Note,
+    updateNote: (note: Note) => void
+}
+
+const EmptyNotesList = (props: Props) => {
+    const onChange = (evt: ChangeEvent<HTMLTextAreaElement>) => {
+        const content = evt.target.value;
+        const newNote = { ...props.note, content };
+        props.updateNote(newNote);
+    };
+    return (
+        <div>
+            <textarea
+                value={props.note.content}
+                onChange={onChange}
+                style={{ width: '100%', height: '100%' }}
+                rows={10}
+            />
+        </div>
+    );
+};
+
+export default EmptyNotesList;

src/Containers/NotesList/MarkdownEditor/index.tsx

@@ -0,0 +1 @@
+export { default as MarkdownEditor } from './Editor';