Merge 8fdc1e9 into e68838d

taniarascia · Oct 18, 2020 · 1759ea9 · 1759ea9
2 parents e68838d + 8fdc1e9
commit 1759ea9
Show file tree

Hide file tree

Showing 27 changed files with 288 additions and 263 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -81,6 +81,7 @@
     "react-markdown": "^4.3.1",
     "react-redux": "^7.2.1",
     "react-router-dom": "^5.2.0",
+    "react-split-pane": "^0.1.92",
     "redux": "^4.0.5",
     "redux-saga": "^1.1.3",
     "stream-browserify": "^3.0.0",
@@ -110,6 +111,7 @@
     "@types/react-redux": "^7.1.9",
     "@types/react-router": "^5.1.8",
     "@types/react-router-dom": "^5.1.6",
+    "@types/testing-library__cypress": "^5.0.8",
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^4.4.1",
     "@typescript-eslint/parser": "^4.4.1",

diff --git a/src/client/components/AppSidebar/AddCategoryButton.tsx b/src/client/components/AppSidebar/AddCategoryButton.tsx
@@ -21,8 +21,7 @@ export const AddCategoryButton: React.FC<AddCategoryButtonProps> = ({
       onClick={() => handler(true)}
       aria-label={label}
     >
-      <Plus size={15} color={iconColor} />
-      {label}
+      <Plus size={16} color={iconColor} />
     </button>
   )
 }
diff --git a/src/client/components/Editor/PreviewEditor.tsx b/src/client/components/Editor/PreviewEditor.tsx
@@ -4,22 +4,10 @@ import ReactMarkdown from 'react-markdown'
 export interface PreviewEditorProps {
   noteText: string
   directionText: string
-  togglePreviewMarkdown: () => {}
 }
-export const PreviewEditor: React.FC<PreviewEditorProps> = ({
-  noteText,
-  directionText,
-  togglePreviewMarkdown,
-}) => {
+
+export const PreviewEditor: React.FC<PreviewEditorProps> = ({ noteText, directionText }) => {
   return (
-    <>
-      <ReactMarkdown
-        className={`previewer previewer_direction-${directionText}`}
-        source={noteText}
-      />
-      <button className="preview-button" onClick={togglePreviewMarkdown}>
-        Edit
-      </button>
-    </>
+    <ReactMarkdown className={`previewer previewer_direction-${directionText}`} source={noteText} />
   )
 }
diff --git a/src/client/components/SettingsModal/Option.tsx b/src/client/components/SettingsModal/Option.tsx
@@ -10,7 +10,7 @@ export interface OptionProps {
 
 export const Option: React.FC<OptionProps> = ({ title, toggle, checked }) => {
   return (
-    <div className="settings-options">
+    <div className="settings-option">
       <div>{title}</div>
       <Switch toggle={toggle} checked={checked} />
     </div>

diff --git a/src/client/components/SettingsModal/SelectOptions.tsx b/src/client/components/SettingsModal/SelectOptions.tsx
@@ -16,7 +16,7 @@ export const SelectOptions: React.FC<OptionProps> = ({
   options,
 }) => {
   return (
-    <div className="settings-options">
+    <div className="settings-option">
       <div>{title}</div>
       <Select options={options} onChange={onChange} selectedValue={selectedValue} />
     </div>

diff --git a/src/client/containers/AppSidebar.tsx b/src/client/containers/AppSidebar.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Loader, Plus, Settings, RefreshCw } from 'react-feather'
+import { Plus, Settings } from 'react-feather'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { LabelText } from '@resources/LabelText'
@@ -78,64 +78,59 @@ export const AppSidebar: React.FC = () => {
   const settingsHandler = () => _toggleSettingsModal()
 
   return (
-    <>
-      <aside className="app-sidebar">
-        <ActionButton
-          dataTestID={TestID.SIDEBAR_ACTION_CREATE_NEW_NOTE}
-          handler={newNoteHandler}
-          icon={Plus}
-          label={LabelText.CREATE_NEW_NOTE}
-          text="New note"
+    <aside className="app-sidebar">
+      <ActionButton
+        dataTestID={TestID.SIDEBAR_ACTION_CREATE_NEW_NOTE}
+        handler={newNoteHandler}
+        icon={Plus}
+        label={LabelText.CREATE_NEW_NOTE}
+        text="New note"
+      />
+      <section className="app-sidebar-main">
+        <ScratchpadOption active={activeFolder === Folder.SCRATCHPAD} swapFolder={_swapFolder} />
+        <FolderOption
+          active={activeFolder === Folder.ALL}
+          swapFolder={_swapFolder}
+          text={LabelText.NOTES}
+          dataTestID={TestID.FOLDER_NOTES}
+          folder={Folder.ALL}
+          addNoteType={_unassignTrashFromNotes}
         />
-        <section className="app-sidebar-main">
-          <ScratchpadOption active={activeFolder === Folder.SCRATCHPAD} swapFolder={_swapFolder} />
-          <FolderOption
-            active={activeFolder === Folder.ALL}
-            swapFolder={_swapFolder}
-            text={LabelText.NOTES}
-            dataTestID={TestID.FOLDER_NOTES}
-            folder={Folder.ALL}
-            addNoteType={_unassignTrashFromNotes}
-          />
-          <FolderOption
-            active={activeFolder === Folder.FAVORITES}
-            text={LabelText.FAVORITES}
-            dataTestID={TestID.FOLDER_FAVORITES}
-            folder={Folder.FAVORITES}
-            swapFolder={_swapFolder}
-            addNoteType={_assignFavoriteToNotes}
-          />
-          <FolderOption
-            active={activeFolder === Folder.TRASH}
-            text={LabelText.TRASH}
-            dataTestID={TestID.FOLDER_TRASH}
-            folder={Folder.TRASH}
-            swapFolder={_swapFolder}
-            addNoteType={_assignTrashToNotes}
-          />
-          <div className="category-title">
-            <h2>Categories</h2>
-          </div>
-          <CategoryList />
-        </section>
-        <button
-          className="app-sidebar-settings"
-          data-test-id={TestID.SIDEBAR_ACTION_SETTINGS}
-          onClick={settingsHandler}
-          aria-label={LabelText.SETTINGS}
-        >
-          <div>
-            <img src={currentUser.avatar_url} alt="Profile" className="user-avatar" />
-          </div>
-          <div>
-            <div className="user-name">{currentUser.name}</div>
-            <div className="user-subtitle">Settings</div>
-          </div>
-          <div className="user-settings-icon">
-            <Settings size={16} />
-          </div>
-        </button>
-      </aside>
-    </>
+        <FolderOption
+          active={activeFolder === Folder.FAVORITES}
+          text={LabelText.FAVORITES}
+          dataTestID={TestID.FOLDER_FAVORITES}
+          folder={Folder.FAVORITES}
+          swapFolder={_swapFolder}
+          addNoteType={_assignFavoriteToNotes}
+        />
+        <FolderOption
+          active={activeFolder === Folder.TRASH}
+          text={LabelText.TRASH}
+          dataTestID={TestID.FOLDER_TRASH}
+          folder={Folder.TRASH}
+          swapFolder={_swapFolder}
+          addNoteType={_assignTrashToNotes}
+        />
+        <CategoryList />
+      </section>
+      <button
+        className="app-sidebar-settings"
+        data-test-id={TestID.SIDEBAR_ACTION_SETTINGS}
+        onClick={settingsHandler}
+        aria-label={LabelText.SETTINGS}
+      >
+        <div>
+          <img src={currentUser.avatar_url} alt="Profile" className="user-avatar" />
+        </div>
+        <div>
+          <div className="user-name">{currentUser.name}</div>
+          <div className="user-subtitle">Settings</div>
+        </div>
+        <div className="user-settings-icon">
+          <Settings size={16} />
+        </div>
+      </button>
+    </aside>
   )
 }
diff --git a/src/client/containers/CategoryList.tsx b/src/client/containers/CategoryList.tsx
@@ -134,6 +134,14 @@ export const CategoryList: React.FC = () => {
 
   return (
     <>
+      <div className="category-title">
+        <h2>Categories</h2>
+        <AddCategoryButton
+          dataTestID={TestID.ADD_CATEGORY_BUTTON}
+          handler={setAddingTempCategory}
+          label={LabelText.ADD_CATEGORY}
+        />
+      </div>
       <Droppable type="CATEGORY" droppableId="Category list">
         {(droppableProvided) => (
           <div
@@ -160,7 +168,7 @@ export const CategoryList: React.FC = () => {
           </div>
         )}
       </Droppable>
-      {addingTempCategory ? (
+      {addingTempCategory && (
         <AddCategoryForm
           dataTestID={TestID.NEW_CATEGORY_FORM}
           submitHandler={onSubmitNewCategory}
@@ -169,12 +177,6 @@ export const CategoryList: React.FC = () => {
           editingCategoryId={editingCategoryId}
           tempCategoryName={tempCategoryName}
         />
-      ) : (
-        <AddCategoryButton
-          dataTestID={TestID.ADD_CATEGORY_BUTTON}
-          handler={setAddingTempCategory}
-          label={LabelText.ADD_CATEGORY}
-        />
       )}
     </>
   )

diff --git a/src/client/containers/KeyboardShortcuts.tsx b/src/client/containers/KeyboardShortcuts.tsx
@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import prettier from 'prettier/standalone'
 import parserMarkdown from 'prettier/parser-markdown'
 import parserHtml from 'prettier/parser-html'
-// import parserCss from 'prettier/parser-postcss'
+import parserCss from 'prettier/parser-postcss'
 import parserTs from 'prettier/parser-typescript'
 import parserJs from 'prettier/parser-babel'
 
@@ -101,7 +101,7 @@ export const KeyboardShortcuts: React.FC = () => {
     if (activeNote && activeNote.text) {
       const formattedText = prettier.format(activeNote.text, {
         parser: 'markdown',
-        plugins: [parserMarkdown, parserHtml, parserTs, parserJs],
+        plugins: [parserMarkdown, parserHtml, parserTs, parserJs, parserCss],
       })
 
       const updatedNote = {