From 3940a81321d47d04368e7c2194c6ad57ee3c2536 Mon Sep 17 00:00:00 2001 From: Lukas Petry Date: Fri, 12 Nov 2021 23:05:25 +0100 Subject: [PATCH 01/12] Add isPage toggle --- package-lock.json | 43 ++++++++++++++++++++++++++ src/App.tsx | 1 + src/components/NoteMenu.tsx | 50 +++++++++++++++++++++++++++++++ src/components/NotesComponent.tsx | 18 +++++++++-- src/components/PageIconButton.tsx | 26 ++++++++++++++++ src/noteModel/NotesModel.ts | 9 ++++++ src/noteModel/types.ts | 1 + 7 files changed, 146 insertions(+), 2 deletions(-) create mode 100644 src/components/NoteMenu.tsx create mode 100644 src/components/PageIconButton.tsx diff --git a/package-lock.json b/package-lock.json index a59d0a1..1c57182 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,7 @@ "web-vitals": "^1.1.2" }, "devDependencies": { + "@types/styled-components": "^5.1.15", "autoprefixer": "^9.8.8", "postcss": "^7.0.39", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17" @@ -3455,6 +3456,16 @@ "@types/node": "*" } }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dev": true, + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/html-minifier-terser": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz", @@ -3581,6 +3592,17 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz", "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==" }, + "node_modules/@types/styled-components": { + "version": "5.1.15", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.15.tgz", + "integrity": "sha512-4evch8BRI3AKgb0GAZ/sn+mSeB+Dq7meYtMi7J/0Mg98Dt1+r8fySOek7Sjw1W+Wskyjc93565o5xWAT/FdY0Q==", + "dev": true, + "dependencies": { + "@types/hoist-non-react-statics": "*", + "@types/react": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@types/tapable": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz", @@ -24388,6 +24410,16 @@ "@types/node": "*" } }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "dev": true, + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/html-minifier-terser": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.2.tgz", @@ -24514,6 +24546,17 @@ "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz", "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==" }, + "@types/styled-components": { + "version": "5.1.15", + "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.15.tgz", + "integrity": "sha512-4evch8BRI3AKgb0GAZ/sn+mSeB+Dq7meYtMi7J/0Mg98Dt1+r8fySOek7Sjw1W+Wskyjc93565o5xWAT/FdY0Q==", + "dev": true, + "requires": { + "@types/hoist-non-react-statics": "*", + "@types/react": "*", + "csstype": "^3.0.2" + } + }, "@types/tapable": { "version": "1.0.8", "resolved": "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz", diff --git a/src/App.tsx b/src/App.tsx index c424059..6a14793 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -85,6 +85,7 @@ export default function App() { onSelectNextNote={(id) => notesModel.selectNext(id)} onExpandNote={(id) => notesModel.expandNote(id)} onCollapseNote={(id) => notesModel.collapseNote(id)} + onToggleIsPage={(id) => notesModel.toggleIsPage(id)} /> ))} diff --git a/src/components/NoteMenu.tsx b/src/components/NoteMenu.tsx new file mode 100644 index 0000000..f0d0ced --- /dev/null +++ b/src/components/NoteMenu.tsx @@ -0,0 +1,50 @@ +import styled from "styled-components"; + +interface NoteMenuProps { + isPage: boolean; + onToggleIsPage: () => void; +} + +export default function NoteMenu({ isPage, onToggleIsPage }: NoteMenuProps) { + console.log("render NoteMenu"); + return ( + + {isPage ? ( + + + + ) : ( + + + + )} + + ); +} + +const StyledButton = styled.button` + position: absolute; + left: -54px; + z-index: 1; +`; diff --git a/src/components/NotesComponent.tsx b/src/components/NotesComponent.tsx index 289b8e1..7d43657 100644 --- a/src/components/NotesComponent.tsx +++ b/src/components/NotesComponent.tsx @@ -2,6 +2,8 @@ import { NotesModel } from "../noteModel/NotesModel"; import { Flipped } from "react-flip-toolkit"; import ContentEditable from "./ContentEditable"; import ExpandIcon from "./ExpandButton"; +import PageIconButton from "./PageIconButton"; +import NoteMenu from "./NoteMenu"; interface NoteProps { notesModel: NotesModel; @@ -16,6 +18,7 @@ interface NoteProps { onSelectNextNote: (id: string) => void; onExpandNote: (id: string) => void; onCollapseNote: (id: string) => void; + onToggleIsPage: (id: string) => void; } export default function NotesComponent({ @@ -31,6 +34,7 @@ export default function NotesComponent({ onSelectNextNote, onExpandNote, onCollapseNote, + onToggleIsPage, }: NoteProps) { const note = notesModel.getOne(id); @@ -44,14 +48,23 @@ export default function NotesComponent({
0 ? "border-l-4 border-blue-700 dark:border-green-600" : "") } > + onToggleIsPage(note._id)} + /> + {note.isPage ? ( + alert("noce")} /> + ) : ( +
+ )} onUpdateNote(note._id, value)} @@ -91,6 +104,7 @@ export default function NotesComponent({ onSelectNextNote={onSelectNextNote} onExpandNote={onExpandNote} onCollapseNote={onCollapseNote} + onToggleIsPage={onToggleIsPage} /> ))} diff --git a/src/components/PageIconButton.tsx b/src/components/PageIconButton.tsx new file mode 100644 index 0000000..f6f7208 --- /dev/null +++ b/src/components/PageIconButton.tsx @@ -0,0 +1,26 @@ +interface PageIconButtonProps { + onClick: () => void; +} + +export default function PageIconButton({ onClick }: PageIconButtonProps) { + console.log("render PageIconButton"); + return ( + + ); +} diff --git a/src/noteModel/NotesModel.ts b/src/noteModel/NotesModel.ts index 2655673..9ebc589 100644 --- a/src/noteModel/NotesModel.ts +++ b/src/noteModel/NotesModel.ts @@ -333,4 +333,13 @@ export class NotesModel { }); }); } + + toggleIsPage(id: string) { + this.transactionManager.runTransaction((transaction) => { + transaction.patchOne(id, (note) => ({ + isPage: !note.isPage, + isExpanded: false, + })); + }); + } } diff --git a/src/noteModel/types.ts b/src/noteModel/types.ts index 57d053f..df73bee 100644 --- a/src/noteModel/types.ts +++ b/src/noteModel/types.ts @@ -4,4 +4,5 @@ export interface Note { childrenIds: string[]; isExpanded: boolean; needsFocus?: true; + isPage?: boolean; } From c80d5de0947e60ffbecefdb595c2dc5308b690f1 Mon Sep 17 00:00:00 2001 From: Lukas Petry Date: Fri, 12 Nov 2021 23:07:56 +0100 Subject: [PATCH 02/12] Add styled-components typescript defininitions --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index f2de810..a8e7aa9 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ ] }, "devDependencies": { + "@types/styled-components": "^5.1.15", "autoprefixer": "^9.8.8", "postcss": "^7.0.39", "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17" From c68eec82e1b3e6bfed5e64e5b054c9fa2a516543 Mon Sep 17 00:00:00 2001 From: Lukas Petry Date: Fri, 12 Nov 2021 23:08:08 +0100 Subject: [PATCH 03/12] Activate tailwind JIT compiler --- package.json | 2 +- tailwind.config.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index a8e7aa9..4f0c8fe 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "web-vitals": "^1.1.2" }, "scripts": { - "start": "craco start", + "start": "TAILWIND_MODE=watch craco start", "build": "craco build", "test": "craco test", "eject": "react-scripts eject" diff --git a/tailwind.config.js b/tailwind.config.js index 53f8afd..61e0fed 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,5 +1,6 @@ module.exports = { - purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"], + mode: "jit", + purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/**/*.html"], darkMode: "media", // or 'media' or 'class' theme: { extend: {}, From ed72f08f79ebb1f22a53493038a00239cf9a70ea Mon Sep 17 00:00:00 2001 From: Lukas Petry Date: Fri, 12 Nov 2021 23:24:52 +0100 Subject: [PATCH 04/12] adjust isPage toggle styling and behavior --- src/components/NoteMenu.tsx | 2 +- src/components/PageIconButton.tsx | 2 +- src/noteModel/NotesModel.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/NoteMenu.tsx b/src/components/NoteMenu.tsx index f0d0ced..35a64db 100644 --- a/src/components/NoteMenu.tsx +++ b/src/components/NoteMenu.tsx @@ -10,7 +10,7 @@ export default function NoteMenu({ isPage, onToggleIsPage }: NoteMenuProps) { return ( {isPage ? ( { transaction.patchOne(id, (note) => ({ isPage: !note.isPage, - isExpanded: false, + isExpanded: note.isPage ? note.isExpanded : false, })); }); } From 8a246612e13010f1f271af28a4de7ede3d6288e6 Mon Sep 17 00:00:00 2001 From: Lukas Petry Date: Fri, 12 Nov 2021 23:47:35 +0100 Subject: [PATCH 05/12] Change toggle isPage icon --- src/components/NoteMenu.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/NoteMenu.tsx b/src/components/NoteMenu.tsx index 35a64db..7f5d5be 100644 --- a/src/components/NoteMenu.tsx +++ b/src/components/NoteMenu.tsx @@ -10,7 +10,7 @@ export default function NoteMenu({ isPage, onToggleIsPage }: NoteMenuProps) { return ( {isPage ? ( @@ -34,7 +34,7 @@ export default function NoteMenu({ isPage, onToggleIsPage }: NoteMenuProps) { > From 7b419250138636fbec9562ff8e5e262d03f57c20 Mon Sep 17 00:00:00 2001 From: Lukas Petry Date: Sun, 14 Nov 2021 20:04:22 +0100 Subject: [PATCH 06/12] Install react-router-dom --- package-lock.json | 59 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 2 ++ src/index.tsx | 12 +++++----- 3 files changed, 67 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1c57182..def1184 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,11 +16,13 @@ "@types/node": "^12.20.33", "@types/react": "^17.0.30", "@types/react-dom": "^17.0.9", + "history": "^5.1.0", "lodash": "^4.17.21", "nanoid": "^3.1.30", "react": "^17.0.2", "react-dom": "^17.0.2", "react-flip-toolkit": "^7.0.13", + "react-router-dom": "^6.0.2", "react-scripts": "4.0.3", "styled-components": "^5.3.1", "typescript": "^4.4.4", @@ -9856,6 +9858,14 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "node_modules/history": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.1.0.tgz", + "integrity": "sha512-zPuQgPacm2vH2xdORvGGz1wQMuHSIB56yNAy5FnLuwOwgSYyPKptJtcMm6Ev+hRGeS+GzhbmRacHzvlESbFwDg==", + "dependencies": { + "@babel/runtime": "^7.7.6" + } + }, "node_modules/hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -16485,6 +16495,30 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.0.2.tgz", + "integrity": "sha512-8/Wm3Ed8t7TuedXjAvV39+c8j0vwrI5qVsYqjFr5WkJjsJpEvNSoLRUbtqSEYzqaTUj1IV+sbPJxvO+accvU0Q==", + "dependencies": { + "history": "^5.1.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.0.2.tgz", + "integrity": "sha512-cOpJ4B6raFutr0EG8O/M2fEoyQmwvZWomf1c6W2YXBZuFBx8oTk/zqjXghwScyhfrtnt0lANXV2182NQblRxFA==", + "dependencies": { + "history": "^5.1.0", + "react-router": "6.0.2" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz", @@ -29411,6 +29445,14 @@ "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==" }, + "history": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.1.0.tgz", + "integrity": "sha512-zPuQgPacm2vH2xdORvGGz1wQMuHSIB56yNAy5FnLuwOwgSYyPKptJtcMm6Ev+hRGeS+GzhbmRacHzvlESbFwDg==", + "requires": { + "@babel/runtime": "^7.7.6" + } + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -34517,6 +34559,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz", "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==" }, + "react-router": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.0.2.tgz", + "integrity": "sha512-8/Wm3Ed8t7TuedXjAvV39+c8j0vwrI5qVsYqjFr5WkJjsJpEvNSoLRUbtqSEYzqaTUj1IV+sbPJxvO+accvU0Q==", + "requires": { + "history": "^5.1.0" + } + }, + "react-router-dom": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.0.2.tgz", + "integrity": "sha512-cOpJ4B6raFutr0EG8O/M2fEoyQmwvZWomf1c6W2YXBZuFBx8oTk/zqjXghwScyhfrtnt0lANXV2182NQblRxFA==", + "requires": { + "history": "^5.1.0", + "react-router": "6.0.2" + } + }, "react-scripts": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz", diff --git a/package.json b/package.json index 4f0c8fe..8981a48 100644 --- a/package.json +++ b/package.json @@ -12,11 +12,13 @@ "@types/node": "^12.20.33", "@types/react": "^17.0.30", "@types/react-dom": "^17.0.9", + "history": "^5.1.0", "lodash": "^4.17.21", "nanoid": "^3.1.30", "react": "^17.0.2", "react-dom": "^17.0.2", "react-flip-toolkit": "^7.0.13", + "react-router-dom": "^6.0.2", "react-scripts": "4.0.3", "styled-components": "^5.3.1", "typescript": "^4.4.4", diff --git a/src/index.tsx b/src/index.tsx index ef2edf8..ad9cbbb 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,14 +1,14 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import reportWebVitals from './reportWebVitals'; +import React from "react"; +import ReactDOM from "react-dom"; +import "./index.css"; +import App from "./App"; +import reportWebVitals from "./reportWebVitals"; ReactDOM.render( , - document.getElementById('root') + document.getElementById("root") ); // If you want to start measuring performance in your app, pass a function From cb2af894daeb8c248f8911a561bfaa9e93aad536 Mon Sep 17 00:00:00 2001 From: Lukas Petry Date: Sun, 14 Nov 2021 20:05:16 +0100 Subject: [PATCH 07/12] Install classnames --- package-lock.json | 11 +++++++++++ package.json | 1 + 2 files changed, 12 insertions(+) diff --git a/package-lock.json b/package-lock.json index def1184..4266aa1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@types/node": "^12.20.33", "@types/react": "^17.0.30", "@types/react-dom": "^17.0.9", + "classnames": "^2.3.1", "history": "^5.1.0", "lodash": "^4.17.21", "nanoid": "^3.1.30", @@ -5883,6 +5884,11 @@ "node": ">=0.10.0" } }, + "node_modules/classnames": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" + }, "node_modules/clean-css": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", @@ -26400,6 +26406,11 @@ } } }, + "classnames": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" + }, "clean-css": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", diff --git a/package.json b/package.json index 8981a48..7cefc0a 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@types/node": "^12.20.33", "@types/react": "^17.0.30", "@types/react-dom": "^17.0.9", + "classnames": "^2.3.1", "history": "^5.1.0", "lodash": "^4.17.21", "nanoid": "^3.1.30", From 26d116357ec397a2baadbe99b3d5903076f6d577 Mon Sep 17 00:00:00 2001 From: Lukas Petry Date: Mon, 15 Nov 2021 16:48:01 +0100 Subject: [PATCH 08/12] Implement Page view --- src/App.tsx | 57 ++++------------------ src/components/BackButton.tsx | 32 ++++++++++++ src/components/Header.tsx | 77 +++++++++++++++++++++++++++++ src/components/NotesComponent.tsx | 81 ++++++++++--------------------- src/components/NotesPage.tsx | 41 ++++++++++++++++ src/components/PageLink.tsx | 28 +++++++++++ src/noteModel/NotesModel.ts | 8 +-- 7 files changed, 219 insertions(+), 105 deletions(-) create mode 100644 src/components/BackButton.tsx create mode 100644 src/components/Header.tsx create mode 100644 src/components/NotesPage.tsx create mode 100644 src/components/PageLink.tsx diff --git a/src/App.tsx b/src/App.tsx index 6a14793..26a6b36 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,6 @@ import { useEffect, useState } from "react"; -import { Flipper } from "react-flip-toolkit"; -import ContentEditable from "./components/ContentEditable"; -import NotesComponent from "./components/NotesComponent"; +import { BrowserRouter, Routes, Route } from "react-router-dom"; +import NotesPage from "./components/NotesPage"; import { NotesModel } from "./noteModel/NotesModel"; import { SubscribableStore } from "./noteModel/SubscribableStore"; import { loadNotes, saveNotes } from "./utils/autoSaveSingleton"; @@ -47,50 +46,14 @@ export default function App() { const rootNote = notesModel.getOne("ROOT")!; return ( - <> -
- notesModel.updateNoteText(rootNote._id, value)} - onEnter={() => {}} - onDelete={() => {}} - onFocusTriggered={() => {}} - onIndent={() => {}} - onOutdent={() => {}} - onSelectPrevious={() => {}} - onSelectNext={() => {}} - onExpand={() => {}} - onCollapse={() => {}} + + + } /> + } /> -
-
- -
    - {rootNote.childrenIds.map((id) => ( - notesModel.updateNoteText(id, text)} - onAddNote={(sponsoringNoteId) => - notesModel.addNoteBelow(sponsoringNoteId) - } - onDeleteNote={(id) => notesModel.deleteNote(id)} - onFocusTriggered={(id) => notesModel.removeNeedsFocus(id)} - onIndentNote={(id) => notesModel.indentNote(id)} - onOutdentNote={(id) => notesModel.outdentNote(id)} - onSelectPreviousNote={(id) => notesModel.selectPrevious(id)} - onSelectNextNote={(id) => notesModel.selectNext(id)} - onExpandNote={(id) => notesModel.expandNote(id)} - onCollapseNote={(id) => notesModel.collapseNote(id)} - onToggleIsPage={(id) => notesModel.toggleIsPage(id)} - /> - ))} -
- - - + + ); } diff --git a/src/components/BackButton.tsx b/src/components/BackButton.tsx new file mode 100644 index 0000000..f76ca8c --- /dev/null +++ b/src/components/BackButton.tsx @@ -0,0 +1,32 @@ +import { useNavigate } from "react-router-dom"; +import classNames from "classnames"; + +export default function BackButton() { + const navigate = useNavigate(); + return ( + + ); +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..d55cdc7 --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,77 @@ +import classNames from "classnames"; +import { Flipped } from "react-flip-toolkit"; +import { NotesModel } from "../noteModel/NotesModel"; +import { Note } from "../noteModel/types"; +import BackButton from "./BackButton"; +import ContentEditable from "./ContentEditable"; + +export function Header({ + mainNote, + notesModel, +}: { + mainNote: Note; + notesModel: NotesModel; +}) { + const bgClassNames = [ + "bg-gradient-to-br", + "from-white", + "to-blue-50", + "dark:from-gray-900", + "dark:to-blue-900", + ]; + + return ( +
+ +
+ {mainNote._id !== "ROOT" && } + + notesModel.updateNoteText(mainNote._id, value) + } + onEnter={() => { + notesModel.addNoteBelow(mainNote._id, true); + }} + onDelete={() => {}} + onFocusTriggered={() => {}} + onIndent={() => {}} + onOutdent={() => {}} + onSelectPrevious={() => {}} + onSelectNext={() => {}} + onExpand={() => {}} + onCollapse={() => {}} + /> +
+ +
+ ); +} diff --git a/src/components/NotesComponent.tsx b/src/components/NotesComponent.tsx index 7d43657..74fc019 100644 --- a/src/components/NotesComponent.tsx +++ b/src/components/NotesComponent.tsx @@ -2,50 +2,32 @@ import { NotesModel } from "../noteModel/NotesModel"; import { Flipped } from "react-flip-toolkit"; import ContentEditable from "./ContentEditable"; import ExpandIcon from "./ExpandButton"; -import PageIconButton from "./PageIconButton"; +import PageLink from "./PageLink"; import NoteMenu from "./NoteMenu"; interface NoteProps { notesModel: NotesModel; id: string; - onUpdateNote: (id: string, value: string) => void; - onAddNote: (id: string) => void; - onDeleteNote: (id: string) => void; - onFocusTriggered: (id: string) => void; - onIndentNote: (id: string) => void; - onOutdentNote: (id: string) => void; - onSelectPreviousNote: (id: string) => void; - onSelectNextNote: (id: string) => void; - onExpandNote: (id: string) => void; - onCollapseNote: (id: string) => void; - onToggleIsPage: (id: string) => void; } -export default function NotesComponent({ - notesModel, - id, - onUpdateNote, - onAddNote, - onDeleteNote, - onFocusTriggered, - onIndentNote, - onOutdentNote, - onSelectPreviousNote, - onSelectNextNote, - onExpandNote, - onCollapseNote, - onToggleIsPage, -}: NoteProps) { +export default function NotesComponent({ notesModel, id }: NoteProps) { const note = notesModel.getOne(id); if (!note) { console.error("Note not found", id); return null; } - return (
  • - + { + element.animate([{ opacity: 0 }, { opacity: 1 }], { + duration: 500, + fill: "forwards", + }); + }} + >
    onToggleIsPage(note._id)} + onToggleIsPage={() => notesModel.toggleIsPage(note._id)} /> {note.isPage ? ( - alert("noce")} /> + ) : (
    )} onUpdateNote(note._id, value)} - onEnter={() => onAddNote(note._id)} - onDelete={() => onDeleteNote(note._id)} - onFocusTriggered={() => onFocusTriggered(note._id)} - onIndent={() => onIndentNote(note._id)} - onOutdent={() => onOutdentNote(note._id)} - onSelectPrevious={() => onSelectPreviousNote(note._id)} - onSelectNext={() => onSelectNextNote(note._id)} - onExpand={() => onExpandNote(note._id)} - onCollapse={() => onCollapseNote(note._id)} + onNewValue={(value) => notesModel.updateNoteText(note._id, value)} + onEnter={() => notesModel.addNoteBelow(note._id, false)} + onDelete={() => notesModel.deleteNote(note._id)} + onFocusTriggered={() => notesModel.removeNeedsFocus(note._id)} + onIndent={() => notesModel.indentNote(note._id)} + onOutdent={() => notesModel.outdentNote(note._id)} + onSelectPrevious={() => notesModel.selectPrevious(note._id)} + onSelectNext={() => notesModel.selectNext(note._id)} + onExpand={() => notesModel.expandNote(note._id)} + onCollapse={() => notesModel.collapseNote(note._id)} /> {note.childrenIds.length > 0 && ( onExpandNote(note._id)} - onCollapse={() => onCollapseNote(note._id)} + onExpand={() => notesModel.expandNote(note._id)} + onCollapse={() => notesModel.collapseNote(note._id)} /> )}
    @@ -94,17 +76,6 @@ export default function NotesComponent({ key={childId} notesModel={notesModel} id={childId} - onUpdateNote={onUpdateNote} - onAddNote={onAddNote} - onDeleteNote={onDeleteNote} - onFocusTriggered={onFocusTriggered} - onIndentNote={onIndentNote} - onOutdentNote={onOutdentNote} - onSelectPreviousNote={onSelectPreviousNote} - onSelectNextNote={onSelectNextNote} - onExpandNote={onExpandNote} - onCollapseNote={onCollapseNote} - onToggleIsPage={onToggleIsPage} /> ))} diff --git a/src/components/NotesPage.tsx b/src/components/NotesPage.tsx new file mode 100644 index 0000000..ed70e00 --- /dev/null +++ b/src/components/NotesPage.tsx @@ -0,0 +1,41 @@ +import classNames from "classnames"; +import { useEffect } from "react"; +import { Flipper } from "react-flip-toolkit"; +import { useLocation, useParams } from "react-router-dom"; +import { NotesModel } from "../noteModel/NotesModel"; +import { Header } from "./Header"; +import NotesComponent from "./NotesComponent"; + +interface NotesPageProps { + notesModel: NotesModel; +} + +export default function NotesPage({ notesModel }: NotesPageProps) { + const { pathname } = useLocation(); + useEffect(() => { + window.scrollTo(0, 0); + }, [pathname]); + + let { mainNoteId } = useParams(); + if (!mainNoteId) { + mainNoteId = "ROOT"; + } + const mainNote = notesModel.getOne(mainNoteId); + + if (!mainNote) { + return
    Not found
    ; + } + + return ( + +
    +
    +
      + {mainNote.childrenIds.map((id) => ( + + ))} +
    +
    + + ); +} diff --git a/src/components/PageLink.tsx b/src/components/PageLink.tsx new file mode 100644 index 0000000..56bed89 --- /dev/null +++ b/src/components/PageLink.tsx @@ -0,0 +1,28 @@ +import { Link } from "react-router-dom"; + +interface PageLinkProps { + to: string; +} + +export default function PageLink({ to }: PageLinkProps) { + return ( + + + Open as Page + + + + ); +} diff --git a/src/noteModel/NotesModel.ts b/src/noteModel/NotesModel.ts index 8ce2cf6..8985539 100644 --- a/src/noteModel/NotesModel.ts +++ b/src/noteModel/NotesModel.ts @@ -124,7 +124,7 @@ export class NotesModel { }); } - addNoteBelow(sponsoringNoteId: string) { + addNoteBelow(sponsoringNoteId: string, alwaysAsChild: boolean) { this.transactionManager.runTransaction((transaction) => { const sponsoringNote = transaction.getOne(sponsoringNoteId); if (!sponsoringNote) { @@ -143,7 +143,10 @@ export class NotesModel { transaction.addOne(newNote); // if the sponsoring note has expanded children, add new note to the top of the children - if (sponsoringNote.isExpanded && sponsoringNote.childrenIds.length > 0) { + if ( + alwaysAsChild || + (sponsoringNote.isExpanded && sponsoringNote.childrenIds.length > 0) + ) { transaction.patchOne(sponsoringNoteId, { childrenIds: [newNote._id, ...sponsoringNote.childrenIds], }); @@ -338,7 +341,6 @@ export class NotesModel { this.transactionManager.runTransaction((transaction) => { transaction.patchOne(id, (note) => ({ isPage: !note.isPage, - isExpanded: note.isPage ? note.isExpanded : false, })); }); } From e8665ab1bd542ddcff9fdc964b522a12d1c087a1 Mon Sep 17 00:00:00 2001 From: Lukas Petry Date: Mon, 15 Nov 2021 17:16:24 +0100 Subject: [PATCH 09/12] fix last commit --- src/App.tsx | 4 +--- src/components/PageIconButton.tsx | 26 -------------------------- 2 files changed, 1 insertion(+), 29 deletions(-) delete mode 100644 src/components/PageIconButton.tsx diff --git a/src/App.tsx b/src/App.tsx index 26a6b36..4da7402 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,7 +6,7 @@ import { SubscribableStore } from "./noteModel/SubscribableStore"; import { loadNotes, saveNotes } from "./utils/autoSaveSingleton"; export default function App() { - const [refresh, setRefresh] = useState(0); + const [, setRefresh] = useState(0); const [notesModel, setNotesModel] = useState(null as NotesModel | null); useEffect(() => { @@ -43,8 +43,6 @@ export default function App() { return null; } - const rootNote = notesModel.getOne("ROOT")!; - return ( diff --git a/src/components/PageIconButton.tsx b/src/components/PageIconButton.tsx deleted file mode 100644 index 7a3a9f0..0000000 --- a/src/components/PageIconButton.tsx +++ /dev/null @@ -1,26 +0,0 @@ -interface PageIconButtonProps { - onClick: () => void; -} - -export default function PageIconButton({ onClick }: PageIconButtonProps) { - console.log("render PageIconButton"); - return ( - - ); -} From 9c59c7d4e97885528c5c57569ba920200eef5a7c Mon Sep 17 00:00:00 2001 From: Lukas Petry Date: Mon, 15 Nov 2021 17:16:57 +0100 Subject: [PATCH 10/12] add title texts to imgs --- public/index.html | 7 ++----- src/components/ExpandButton.tsx | 2 ++ src/components/NoteMenu.tsx | 2 ++ 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/public/index.html b/public/index.html index ef5a8e3..5fca2a1 100644 --- a/public/index.html +++ b/public/index.html @@ -5,10 +5,7 @@ - + - React App + notes app diff --git a/src/components/ExpandButton.tsx b/src/components/ExpandButton.tsx index f2827c7..433ef2e 100644 --- a/src/components/ExpandButton.tsx +++ b/src/components/ExpandButton.tsx @@ -20,6 +20,7 @@ export default function ExpandIcon({ viewBox="0 0 24 24" stroke="currentColor" > + Collapse + Expand + Turn Note into Page + Turn Page into Note Date: Tue, 16 Nov 2021 00:10:01 +0100 Subject: [PATCH 11/12] Edit initial notes --- src/noteModel/initialNotes.ts | 71 ++++++++++++++++++++++++++++++++--- 1 file changed, 65 insertions(+), 6 deletions(-) diff --git a/src/noteModel/initialNotes.ts b/src/noteModel/initialNotes.ts index fdef72f..ccaa4cb 100644 --- a/src/noteModel/initialNotes.ts +++ b/src/noteModel/initialNotes.ts @@ -4,7 +4,13 @@ export const initialNotes: Note[] = [ { _id: "ROOT", text: "I am Groot!", - childrenIds: ["2", "3", "5"], + childrenIds: [ + "2", + "3", + "5", + "e7Gh8g7hXE9-jDnPKYTPQ", + "wh7GpX3LY2p_dsagiCo-L", + ], isExpanded: true, }, { @@ -15,25 +21,78 @@ export const initialNotes: Note[] = [ }, { _id: "2", - text: "This is a note", + text: "Hello,", childrenIds: [], isExpanded: true, + isPage: false, }, { _id: "3", - text: "This is another note", - childrenIds: ["4"], + text: "Welcome to a new way of note taking ", + childrenIds: ["4", "XhuyzNJtehlngZbsKe8vp", "qGsn9pjYGVRSUsQ7pGxhU"], isExpanded: true, + isPage: false, }, { _id: "4", - text: "This is another note", + text: "This doesn't do much now", childrenIds: [], isExpanded: true, }, { _id: "5", - text: "This is another note what???", + text: "Enjoy the app...", + childrenIds: [], + isExpanded: true, + }, + { + _id: "XhuyzNJtehlngZbsKe8vp", + text: "But maybe, it will one day", + childrenIds: [], + isExpanded: true, + }, + { + _id: "qGsn9pjYGVRSUsQ7pGxhU", + text: "Behind this are hidden notes", + childrenIds: ["F23J4bS6dmM46VxaKTA6_", "fzYIQVGPfCG0_PepGu9yt"], + isExpanded: false, + isPage: true, + }, + { + _id: "F23J4bS6dmM46VxaKTA6_", + text: "Isn't this fun?", + childrenIds: ["jAwojYlHuHWT6StVeq-Ab"], + isExpanded: false, + isPage: true, + }, + { + _id: "jAwojYlHuHWT6StVeq-Ab", + text: "yes it is 🕺", + childrenIds: [], + isExpanded: true, + }, + { + _id: "fzYIQVGPfCG0_PepGu9yt", + text: "some more hidden notes", + childrenIds: ["YtrXgja7v61bwTDffPS3k"], + isExpanded: false, + isPage: false, + }, + { + _id: "e7Gh8g7hXE9-jDnPKYTPQ", + text: "Your words here...", + childrenIds: [], + isExpanded: true, + }, + { + _id: "wh7GpX3LY2p_dsagiCo-L", + text: "", + childrenIds: [], + isExpanded: true, + }, + { + _id: "YtrXgja7v61bwTDffPS3k", + text: "I am a big secret", childrenIds: [], isExpanded: true, }, From fd2dbf091da02035b601eac8c34ccad3ee95f7c6 Mon Sep 17 00:00:00 2001 From: Lukas Petry Date: Tue, 16 Nov 2021 00:12:59 +0100 Subject: [PATCH 12/12] Edit initial notes --- src/noteModel/initialNotes.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/noteModel/initialNotes.ts b/src/noteModel/initialNotes.ts index ccaa4cb..9a3a5c4 100644 --- a/src/noteModel/initialNotes.ts +++ b/src/noteModel/initialNotes.ts @@ -62,7 +62,7 @@ export const initialNotes: Note[] = [ _id: "F23J4bS6dmM46VxaKTA6_", text: "Isn't this fun?", childrenIds: ["jAwojYlHuHWT6StVeq-Ab"], - isExpanded: false, + isExpanded: true, isPage: true, }, { @@ -73,7 +73,7 @@ export const initialNotes: Note[] = [ }, { _id: "fzYIQVGPfCG0_PepGu9yt", - text: "some more hidden notes", + text: "some more hidden notes hiding here...", childrenIds: ["YtrXgja7v61bwTDffPS3k"], isExpanded: false, isPage: false,