Добавили заметки в сайдбар (#126)

* added notes sidebar

* added note dropping and editing

* added sidebar navigation

* handling sidebarchanges over time

* using router back for closing sidebar

* fixed tripping inside single sidebar

* added superpowers toggle to sidebar

* user button opens sidebar now

* added profile cover for profile sidebar

* removed profile sidebar completely

* ran prettier over project

* added note not found error literal

src/components/notes/NoteCard/index.tsx

@@ -1,4 +1,4 @@
-import React, { VFC } from 'react';
+import React, { useCallback, useState, VFC } from 'react';
 
 import { Card } from '~/components/containers/Card';
 import { Markdown } from '~/components/containers/Markdown';
@@ -6,22 +6,56 @@ import { Padder } from '~/components/containers/Padder';
 import { NoteMenu } from '~/components/notes/NoteMenu';
 import { formatText, getPrettyDate } from '~/utils/dom';
 
+import { NoteCreationForm } from '../NoteCreationForm';
+
 import styles from './styles.module.scss';
 
 interface NoteCardProps {
   content: string;
+  remove: () => Promise<void>;
+  update: (text: string, callback?: () => void) => Promise<void>;
   createdAt: string;
 }
 
-const NoteCard: VFC<NoteCardProps> = ({ content, createdAt }) => (
-  <Card className={styles.note}>
-    <Padder>
-      <NoteMenu onEdit={console.log} onDelete={console.log} />
-      <Markdown className={styles.wrap} dangerouslySetInnerHTML={{ __html: formatText(content) }} />
-    </Padder>
+const NoteCard: VFC<NoteCardProps> = ({
+  content,
+  createdAt,
+  remove,
+  update,
+}) => {
+  const [editing, setEditing] = useState(false);
 
-    <Padder className={styles.footer}>{getPrettyDate(createdAt)}</Padder>
-  </Card>
-);
+  const toggleEditing = useCallback(() => setEditing(v => !v), []);
+  const onUpdate = useCallback(
+    (text: string, callback?: () => void) =>
+      update(text, () => {
+        setEditing(false);
+        callback?.();
+      }),
+    [],
+  );
+
+  return (
+    <Card className={styles.note}>
+      {editing ? (
+        <NoteCreationForm
+          text={content}
+          onSubmit={onUpdate}
+          onCancel={toggleEditing}
+        />
+      ) : (
+        <>
+          <Padder>
+            <NoteMenu onEdit={toggleEditing} onDelete={remove} />
+
+            <Markdown className={styles.wrap}>{formatText(content)}</Markdown>
+          </Padder>
+
+          <Padder className={styles.footer}>{getPrettyDate(createdAt)}</Padder>
+        </>
+      )}
+    </Card>
+  );
+};
 
 export { NoteCard };

src/components/notes/NoteCard/styles.module.scss

@@ -6,10 +6,6 @@
   word-break: break-word;
   padding: 0;
   position: relative;
-
-  & > * {
-    @include row_shadow;
-  }
 }
 
 .footer {