A lot of changes

* No NotePage flickering
* Tailwind JIT
* Fast Refresh returned back
* Fix type errors

apps/harika-mobile-ionic/src/styles.css

@@ -2,7 +2,3 @@
 
 /* For base styles (check out normalize.css) */
 @tailwind base;
-/* Simple reusable components provided by tailwind */
-@tailwind components;
-/* utility classes generated based on our tailwind.config.js */
-@tailwind utilities;

apps/harika-web/src/styles.css

@@ -2,7 +2,3 @@
 
 /* For base styles (check out normalize.css) */
 @tailwind base;
-/* Simple reusable components provided by tailwind */
-@tailwind components;
-/* utility classes generated based on our tailwind.config.js */
-@tailwind utilities;

apps/harika-web/tsconfig.app.json

@@ -6,7 +6,8 @@
   },
   "files": [
     "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
-    "../../node_modules/@nrwl/react/typings/image.d.ts"
+    "../../node_modules/@nrwl/react/typings/image.d.ts",
+    "../../libs/harika-ui/src/lib/app.d.ts"
   ],
   "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
   "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]

apps/harika-web/webpack.config.js

@@ -12,16 +12,16 @@ module.exports = (config, context) => {
     ...config.module.rules[0].options,
     plugins: [
       // ... other plugins
-      // isDevelopment && require.resolve('react-refresh/babel'),
+      isDevelopment && require.resolve('react-refresh/babel'),
     ].filter(Boolean),
   };
 
   return {
     ...config,
     plugins: [
       ...config.plugins,
-      // isDevelopment && new webpack.HotModuleReplacementPlugin(),
-      // isDevelopment && new ReactRefreshWebpackPlugin({overlay: false}),
+      isDevelopment && new webpack.HotModuleReplacementPlugin(),
+      isDevelopment && new ReactRefreshWebpackPlugin({ overlay: false }),
     ],
     module: {
       rules: [

libs/harika-core/src/lib/NoteRepository/models/Vault.ts

@@ -20,10 +20,11 @@ export class VaultModel extends Model({
   name: prop<string>(),
   notesMap: prop<Record<string, NoteModel>>(() => ({})),
   blocksMap: prop<Record<string, NoteBlockModel>>(() => ({})),
-  blocksViewsMap: prop<Record<string, BlocksViewModel>>(() => ({})),
   // TODO: could be optimize with Record
   noteLinks: prop<NoteLinkModel[]>(() => []),
 }) {
+  blocksViewsMap: Record<string, BlocksViewModel> = {};
+
   @modelAction
   newNote(
     attrs: Required<

libs/harika-core/src/lib/NoteRepository/sync.ts

@@ -143,21 +143,26 @@ export class Syncher {
     const noteBlocksChanges = changesOfSession.note_blocks;
 
     const noteBlockIdsToSelect = [
-      ...noteBlocksChanges.created.map(({ id }) => id),
-      ...noteBlocksChanges.updated.map(({ id }) => id),
+      ...noteBlocksChanges.created.map(({ id }: { id: string }) => id),
+      ...noteBlocksChanges.updated.map(({ id }: { id: string }) => id),
     ];
 
     const notesChanges = changesOfSession.notes;
 
     const noteIdsToSelect = [
-      ...notesChanges.created.map(({ id }) => id),
-      ...notesChanges.updated.map(({ id }) => id),
+      ...notesChanges.created.map(({ id }: { id: string }) => id),
+      ...notesChanges.updated.map(({ id }: { id: string }) => id),
     ];
 
     await Promise.all(
       noteBlockIdsToSelect.map(async (noteBlockId) => {
         const noteBlock = await this.queries.getNoteBlockRowById(noteBlockId);
 
+        if (!noteBlock) {
+          console.error('noteBlock note found');
+          return;
+        }
+
         if (this.vault.notesMap[noteBlock.noteId]) {
           if (noteIdsToSelect.indexOf(noteBlock.id) !== -1) {
             noteIdsToSelect.splice(

libs/harika-ui/src/lib/App.css

@@ -10,12 +10,10 @@ body {
   padding-top: constant(safe-area-inset-top);
   padding-top: env(safe-area-inset-top);
 
-  height: calc(100vh - env(safe-area-inset-top));
-
   overflow: hidden;
 
   #root {
-    height: calc(100vh - 20px);
+    height: calc(100vh - env(safe-area-inset-top));
     overflow: hidden;
   }
 }

libs/harika-ui/src/lib/App.tsx

@@ -1,7 +1,7 @@
 import './wdyr';
 import React, { useEffect } from 'react';
 import './App.css';
-import { MainPageRedirect } from './pages/MainPageRedirect';
+import { DailyNotePage } from './pages/DailyNotePage';
 import { NotePage } from './pages/NotePage';
 import { NotesPage } from './pages/NotesPage/NotesPage';
 import Modal from 'react-modal';
@@ -79,7 +79,7 @@ export function App() {
               {vaultRepository && (
                 <VaultLayout vaultRepository={vaultRepository}>
                   <Route exact path={PATHS.VAULT_DAILY_PATH}>
-                    <MainPageRedirect />
+                    <DailyNotePage />
                   </Route>
 
                   <Route exact path={PATHS.VAULT_NOTE_PATH}>

libs/harika-ui/src/lib/app.d.ts

@@ -0,0 +1,9 @@
+declare module 'react-timeago' {
+  const TimeAgo = (props: { date: Date }) => string;
+
+  export default TimeAgo;
+}
+
+declare module 'remotedev' {
+  export const connectViaExtension = (opts: { name: string }) => any;
+}

libs/harika-ui/src/lib/components/Note/Note.tsx

@@ -156,40 +156,13 @@ export const Note: React.FC<{ note: NoteModel }> = observer(({ note }) => {
   const history = useHistory<IFocusBlockState>();
   const focusOnBlockId = (history.location.state || {}).focusOnBlockId;
 
-  const [editState, setEditState] = useState({
-    title: note.title,
-    id: note.$modelId,
-  });
-
-  useEffect(() => {
-    if (note.title === editState.title && note.$modelId === editState.id)
-      return;
-
-    setEditState({ title: note.title, id: note.$modelId });
-  }, [editState.id, editState.title, note.$modelId, note.title]);
-
-  useEffect(() => {
-    if (note.title === editState.title && note.$modelId === editState.id)
-      return;
-    if (editState.id !== note.$modelId) return;
-    if (editState.title === note.title) return;
-
-    note.updateTitle(editState.title);
-  }, [editState.id, editState.title, note]);
-
   const handleChange = useCallback(
     (e: ChangeEvent<HTMLTextAreaElement>) => {
-      setEditState({ id: note.$modelId, title: e.target.value });
+      note.updateTitle(e.target.value);
     },
-    [note.$modelId]
+    [note]
   );
 
-  const handleDestroy = useCallback(() => {
-    note.delete();
-
-    history.replace(`/`);
-  }, [note, history]);
-
   useEffect(() => {
     if (focusOnBlockId) {
       vaultUiState.setFocusedBlock(
@@ -203,7 +176,7 @@ export const Note: React.FC<{ note: NoteModel }> = observer(({ note }) => {
       <h2 className="note__header">
         <TextareaAutosize
           className="note__input"
-          value={editState.title}
+          value={note.title}
           onChange={handleChange}
         />
       </h2>

libs/harika-ui/src/lib/components/VaultLayout/styles.css

@@ -13,7 +13,7 @@
   }
 
   &__sidebar--closed {
-    width: 0;
+    transform: translate3d(-260px, 0, 0);
   }
 
   &__header-wrapper {

libs/harika-ui/src/lib/pages/MainPageRedirect.tsx → libs/harika-ui/src/lib/pages/DailyNotePage.tsx

@@ -8,13 +8,14 @@ import { useCurrentNote } from '../hooks/useCurrentNote';
 import { Note } from '../components/Note/Note';
 import { observer } from 'mobx-react-lite';
 
-export const MainPageRedirect = observer(() => {
+export const DailyNotePage = observer(() => {
   const vault = useCurrentVault();
   const noteRepo = useNoteRepository();
   const history = useHistory();
   const vaultUiState = useCurrentVaultUiState();
 
   useEffect(() => {
+    console.log('init!', vaultUiState.currentNoteId);
     const toExecute = async () => {
       const result = await noteRepo.getOrCreateDailyNote(vault, dayjs());
 
@@ -25,7 +26,7 @@ export const MainPageRedirect = observer(() => {
 
     toExecute();
 
-    return () => vaultUiState.setCurrentNoteId(undefined);
+    /* return () => vaultUiState.setCurrentNoteId(undefined); */
   }, [history, vault, noteRepo, vaultUiState]);
 
   const note = useCurrentNote();

libs/harika-ui/src/lib/pages/NotePage.tsx

@@ -7,6 +7,7 @@ import { useCurrentVaultUiState } from '../contexts/CurrentVaultUiStateContext';
 import { observer } from 'mobx-react-lite';
 import { useCurrentVault } from '../hooks/useCurrentVault';
 import { useCurrentNote } from '../hooks/useCurrentNote';
+import { useUnmount } from 'react-use';
 
 export const NotePage = observer(() => {
   const vault = useCurrentVault();
@@ -25,10 +26,12 @@ export const NotePage = observer(() => {
     };
 
     callback();
-
-    return () => vaultUiState.setCurrentNoteId(undefined);
   }, [vault, noteId, noteRepo, vaultUiState]);
 
+  useUnmount(() => {
+    vaultUiState.setCurrentNoteId(undefined);
+  });
+
   const note = useCurrentNote();
 
   return note ? <Note note={note} /> : null;

libs/harika-ui/tsconfig.lib.json

@@ -6,7 +6,8 @@
   },
   "files": [
     "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
-    "../../node_modules/@nrwl/react/typings/image.d.ts"
+    "../../node_modules/@nrwl/react/typings/image.d.ts",
+    "./src/lib/app.d.ts"
   ],
   "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
   "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]

package.json

@@ -99,6 +99,7 @@
     "@nxtend/capacitor": "^11.0.0",
     "@nxtend/ionic-react": "^11.0.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
+    "@tailwindcss/jit": "^0.1.5",
     "@testing-library/react": "11.1.2",
     "@types/jest": "26.0.8",
     "@types/lodash-es": "^4.17.4",
@@ -118,7 +119,6 @@
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "4.3.0",
     "@typescript-eslint/parser": "4.3.0",
-    "autoprefixer": "^9.8.6",
     "babel-jest": "26.2.2",
     "cypress": "^5.5.0",
     "dotenv": "6.2.0",
@@ -132,17 +132,21 @@
     "jest": "26.2.2",
     "metro-react-native-babel-preset": "0.63.0",
     "pegjs": "^0.10.0",
-    "postcss": "^8.1.14",
-    "postcss-cli": "^8.3.0",
-    "postcss-nested": "^4.2.3",
     "prettier": "2.1.2",
     "react-refresh": "^0.9.0",
     "react-test-renderer": "17.0.1",
-    "tailwindcss": "^2.0.1",
+    "tailwindcss": "^2.0.4",
     "ts-jest": "26.4.0",
     "ts-node": "~7.0.0",
     "tslint": "~6.0.0",
     "typescript": "~4.0.3",
     "worker-loader": "^3.0.6"
+  },
+  "resolutions": {
+    "autoprefixer": "^10.2.5",
+    "postcss": "^8.2.8",
+    "postcss-cli": "^8.0.0",
+    "postcss-import": "^14.0.0",
+    "postcss-nested": "^5.0.5"
   }
 }

postcss.config.js

@@ -4,7 +4,7 @@ module.exports = {
   plugins: [
     require('postcss-nested'),
     require('postcss-import'),
-    tailwindcss('./tailwind.config.js'),
+    require('@tailwindcss/jit'),
     require('autoprefixer'),
   ],
 };

tailwind.config.js

@@ -1,18 +1,18 @@
-const colors = require('tailwindcss/colors')
+const colors = require('tailwindcss/colors');
 
 module.exports = {
-  purge: [],
+  purge: ['./libs/**/*.{js,jsx,ts,tsx,vue}', './apps/**/*.{js,jsx,ts,tsx,vue}'],
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {},
     colors: {
       transparent: 'transparent',
       current: 'currentColor',
-      ...colors
+      ...colors,
     },
   },
   variants: {
     extend: {},
   },
   plugins: [],
-}
+};