From f5489463fedf7fdc3d417120c90def0bade19656 Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Wed, 9 Sep 2020 22:09:57 +0500
Subject: [PATCH] add unpin from pinned note

---
 .../components/DialogManager/dialogActions.js |  1 +
 .../src/components/DialogManager/index.js     |  4 +-
 .../src/components/DialogManager/templates.js |  9 +++
 .../src/components/ExportDialog/index.js      | 33 ++++++----
 apps/mobile/src/components/NoteItem/index.js  | 40 ++----------
 .../src/components/NotebookItem/index.js      | 18 +++--
 .../src/components/PressableButton/index.js   |  3 +-
 .../src/components/SelectionWrapper/index.js  | 65 ++++++++++++++-----
 .../components/SimpleList/NoteItemWrapper.js  |  1 +
 .../src/components/header/HeaderTitle.js      | 35 +++++-----
 apps/mobile/src/components/header/index.js    |  1 +
 11 files changed, 115 insertions(+), 95 deletions(-)

diff --git a/apps/mobile/src/components/DialogManager/dialogActions.js b/apps/mobile/src/components/DialogManager/dialogActions.js
index b02bbd054..3fc9915c2 100644
--- a/apps/mobile/src/components/DialogManager/dialogActions.js
+++ b/apps/mobile/src/components/DialogManager/dialogActions.js
@@ -6,4 +6,5 @@ export const dialogActions = {
   ACTION_TRASH: 515,
   ACTION_PERMANANT_DELETE: 516,
   ACTION_APPLY_CHANGES: 517,
+  ACTION_UPIN:518
 };
diff --git a/apps/mobile/src/components/DialogManager/index.js b/apps/mobile/src/components/DialogManager/index.js
index 4e88dd4e0..c9a3c8001 100644
--- a/apps/mobile/src/components/DialogManager/index.js
+++ b/apps/mobile/src/components/DialogManager/index.js
@@ -299,9 +299,7 @@ export class DialogManager extends Component {
                 }
               : null
           }
-          initialOffsetFromBottom={
-            DDS.isTab || item?.type !== 'note' || item.dateDeleted ? 1 : 0.5
-          }
+          initialOffsetFromBottom={1}
           bounceOnOpen={true}
           gestureEnabled={true}
           onClose={() => {
diff --git a/apps/mobile/src/components/DialogManager/templates.js b/apps/mobile/src/components/DialogManager/templates.js
index 7e1f696a2..7ade59cb2 100644
--- a/apps/mobile/src/components/DialogManager/templates.js
+++ b/apps/mobile/src/components/DialogManager/templates.js
@@ -84,3 +84,12 @@ export const TEMPLATE_EMPTY_TRASH = {
   negativeText: 'Cancel',
   action: dialogActions.ACTION_EMPTY_TRASH,
 };
+
+export const TEMPLATE_UNPIN = (type) => { return {
+  title: 'Unpin' + type,
+  paragraph: 'Are you sure you want to unpin this ' + type  + '?',
+  icon: 'pin-off-outline',
+  positiveText: 'Unpin',
+  negativeText: 'Cancel',
+  action: dialogActions.ACTION_UPIN
+}};
diff --git a/apps/mobile/src/components/ExportDialog/index.js b/apps/mobile/src/components/ExportDialog/index.js
index bdd5df28a..9f9fec6bc 100644
--- a/apps/mobile/src/components/ExportDialog/index.js
+++ b/apps/mobile/src/components/ExportDialog/index.js
@@ -21,6 +21,7 @@ const {
   eCloseExportDialog,
 } = require('../../services/events');
 import {Button} from '../Button/index';
+import Seperator from '../Seperator';
 
 const ExportDialog = () => {
   const [state, dispatch] = useTracked();
@@ -102,7 +103,10 @@ const ExportDialog = () => {
               Note
             </Text>
           </View>
-
+          <Text style={[{color: colors.pri,fontSize:SIZE.xs + 1,alignSelf:'center'}]}>
+            Export your note in any of the following formats.
+          </Text>
+                <Seperator half />
           {exporting ? (
             <Loading
               done={complete}
@@ -117,18 +121,21 @@ const ExportDialog = () => {
           ) : (
             <View style={styles.buttonContainer}>
               {actions.map((item) => (
-                <Button
-                  width="100%"
-                  title={item.title}
-                  icon={item.icon}
-                  activeOpacity={opacity}
-                  onPress={() => {
-                    setExporting(true);
-                    setTimeout(() => {
-                      setComplete(true);
-                    }, 1000);
-                  }}
-                />
+                <>
+                  <Seperator half />
+                  <Button
+                    width="100%"
+                    title={item.title}
+                    icon={item.icon}
+                    activeOpacity={opacity}
+                    onPress={() => {
+                      setExporting(true);
+                      setTimeout(() => {
+                        setComplete(true);
+                      }, 1000);
+                    }}
+                  />
+                </>
               ))}
             </View>
           )}
diff --git a/apps/mobile/src/components/NoteItem/index.js b/apps/mobile/src/components/NoteItem/index.js
index afb3d11f3..5c1d81828 100644
--- a/apps/mobile/src/components/NoteItem/index.js
+++ b/apps/mobile/src/components/NoteItem/index.js
@@ -1,13 +1,9 @@
 import React from 'react';
-import {Dimensions, Text, TouchableOpacity, View} from 'react-native';
+import { Dimensions, Text, TouchableOpacity, View } from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import {ph, pv, SIZE, WEIGHT} from '../../common/common';
-import {eSendEvent, openVault} from '../../services/eventManager';
-import {eOnLoadNote, eShowMergeDialog} from '../../services/events';
-import {openEditorAnimation} from '../../utils/animations';
-import {DDS, timeSince} from '../../utils/utils';
-import {ActionSheetEvent, simpleDialogEvent} from '../DialogManager/recievers';
-import {TEMPLATE_TRASH} from '../DialogManager/templates';
+import { ph, SIZE, WEIGHT } from '../../common/common';
+import { timeSince } from '../../utils/utils';
+import { ActionSheetEvent } from '../DialogManager/recievers';
 
 const w = Dimensions.get('window').width;
 const h = Dimensions.get('window').height;
@@ -54,30 +50,6 @@ export default class NoteItem extends React.Component {
     }
   }
 
-  _onPress = async () => {
-    if (item.conflicted) {
-      eSendEvent(eShowMergeDialog, item);
-
-      return;
-    }
-    if (this.props.selectionMode) {
-      this.props.onLongPress();
-      return;
-    } else if (item.locked) {
-      openVault(item, true, true, false, true, false);
-
-      return;
-    }
-    if (DDS.isTab) {
-      eSendEvent(eOnLoadNote, item);
-    } else if (isTrash) {
-      simpleDialogEvent(TEMPLATE_TRASH(item.type));
-    } else {
-      eSendEvent(eOnLoadNote, item);
-      openEditorAnimation();
-    }
-  };
-
   render() {
     let {colors, item, customStyle, isTrash} = this.props;
     return (
@@ -105,7 +77,7 @@ export default class NoteItem extends React.Component {
             numberOfLines={1}
             style={{
               color: colors.heading,
-              fontSize: SIZE.sm + 1,
+              fontSize: SIZE.md,
               fontFamily: WEIGHT.bold,
               maxWidth: '100%',
             }}>
@@ -120,7 +92,7 @@ export default class NoteItem extends React.Component {
             <Text
               numberOfLines={2}
               style={{
-                fontSize: SIZE.sm - 1,
+                fontSize: SIZE.xs + 1,
                 color: colors.pri + 'B3',
                 fontFamily: WEIGHT.regular,
                 width: '100%',
diff --git a/apps/mobile/src/components/NotebookItem/index.js b/apps/mobile/src/components/NotebookItem/index.js
index 10478f461..ced2560f4 100644
--- a/apps/mobile/src/components/NotebookItem/index.js
+++ b/apps/mobile/src/components/NotebookItem/index.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import { Text, TouchableOpacity, View } from 'react-native';
+import {Text, TouchableOpacity, View} from 'react-native';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
-import { ph, pv, SIZE, WEIGHT } from '../../common/common';
-import { useTracked } from '../../provider';
-import { ACTIONS } from '../../provider/actions';
-import { db, ToastEvent } from '../../utils/utils';
-import { Button } from '../Button';
-import { ActionSheetEvent, moveNoteHideEvent } from '../DialogManager/recievers';
+import {ph, pv, SIZE, WEIGHT} from '../../common/common';
+import {useTracked} from '../../provider';
+import {ACTIONS} from '../../provider/actions';
+import {db, ToastEvent} from '../../utils/utils';
+import {Button} from '../Button';
+import {ActionSheetEvent, moveNoteHideEvent} from '../DialogManager/recievers';
 import Seperator from '../Seperator';
 
 export const NotebookItem = ({
@@ -56,15 +56,13 @@ export const NotebookItem = ({
         </Text>
         {isTopic || !item.description ? null : (
           <Text
-            numberOfLines={numColumns === 2 ? 3 : 2}
+            numberOfLines={2}
             style={{
               fontFamily: WEIGHT.regular,
               fontSize: SIZE.xs + 1,
-              lineHeight: SIZE.sm,
               color: colors.pri,
               maxWidth: '100%',
               paddingVertical: 5,
-              height: numColumns === 2 ? SIZE.sm * 3.5 : null,
             }}>
             {item.description}
           </Text>
diff --git a/apps/mobile/src/components/PressableButton/index.js b/apps/mobile/src/components/PressableButton/index.js
index df1c19956..900847613 100644
--- a/apps/mobile/src/components/PressableButton/index.js
+++ b/apps/mobile/src/components/PressableButton/index.js
@@ -10,7 +10,8 @@ export const PressableButton = ({
   radius,
   children,
   onPress,
-  customStyle,alpha=-0.1,
+  customStyle,
+  alpha=-0.1,
   opacity=1,
   onLongPress
 }) => {
diff --git a/apps/mobile/src/components/SelectionWrapper/index.js b/apps/mobile/src/components/SelectionWrapper/index.js
index d281a03b8..f03bbe769 100644
--- a/apps/mobile/src/components/SelectionWrapper/index.js
+++ b/apps/mobile/src/components/SelectionWrapper/index.js
@@ -4,7 +4,7 @@ import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 import { SIZE } from '../../common/common';
 import { useTracked } from '../../provider';
 import { ACTIONS } from '../../provider/actions';
-import { getElevation } from '../../utils/utils';
+import { db, getElevation, ToastEvent } from '../../utils/utils';
 import { PressableButton } from '../PressableButton';
 
 const SelectionWrapper = ({
@@ -15,7 +15,7 @@ const SelectionWrapper = ({
   background,
   pinned,
   onLongPress,
-  onPress
+  onPress,
 }) => {
   const [state, dispatch] = useTracked();
   const {colors, selectionMode, selectedItemsList} = state;
@@ -36,24 +36,51 @@ const SelectionWrapper = ({
     }
   }, [selectedItemsList]);
 
-
-
-
-
+  const onPressPin = async () => {
+    let func = async () => {
+      if (!item.id) return;
+      if (item.type === 'note') {
+        await db.notes.note(note.id).pin();
+        dispatch({type: ACTIONS.PINNED});
+        dispatch({type: ACTIONS.NOTES});
+      } else {
+        await db.notebooks.notebook(note.id).pin();
+        dispatch({type: ACTIONS.PINNED});
+        dispatch({type: ACTIONS.NOTEBOOKS});
+      }
+    };
+    func();
+    ToastEvent.show(
+      item.type + ' has been unpinned.',
+      'success',
+      'global',
+      6000,
+      () => {
+        func();
+        ToastEvent.hide('unpin');
+      },
+      'Undo',
+    );
+  };
 
   return (
     <PressableButton
-      color={currentEditingNote === item.dateCreated || pinned
-        ? colors.shade
-        : background
-        ? background
-        : 'transparent'
+      color={
+        currentEditingNote === item.dateCreated || pinned
+          ? colors.shade
+          : background
+          ? background
+          : 'transparent'
       }
       onLongPress={onLongPress}
       onPress={onPress}
-      selectedColor={currentEditingNote === item.dateCreated || pinned? colors.accent :  colors.nav}
+      selectedColor={
+        currentEditingNote === item.dateCreated || pinned
+          ? colors.accent
+          : colors.nav
+      }
       alpha={!colors.night ? -0.02 : 0.02}
-      opacity={ currentEditingNote === item.dateCreated || pinned? 0.12 : 1}
+      opacity={currentEditingNote === item.dateCreated || pinned ? 0.12 : 1}
       customStyle={{
         flexDirection: 'row',
         justifyContent: 'space-between',
@@ -68,18 +95,22 @@ const SelectionWrapper = ({
             : 0,
       }}>
       {pinned ? (
-        <View
-          style={{
+        <PressableButton
+          color={colors.accent}
+          selectedColor={colors.accent}
+          alpha={!colors.night ? -0.1 : 0.1}
+          onPress={onPressPin}
+          customStyle={{
             ...getElevation(3),
             width: 30,
             height: 30,
-            backgroundColor: colors.accent,
             borderRadius: 100,
             position: 'absolute',
             right: 20,
             top: -15,
             justifyContent: 'center',
             alignItems: 'center',
+            zIndex: 10,
           }}>
           <View
             style={{
@@ -89,7 +120,7 @@ const SelectionWrapper = ({
               borderRadius: 100,
             }}
           />
-        </View>
+        </PressableButton>
       ) : null}
 
       <View
diff --git a/apps/mobile/src/components/SimpleList/NoteItemWrapper.js b/apps/mobile/src/components/SimpleList/NoteItemWrapper.js
index c28fd853f..03bf845f7 100644
--- a/apps/mobile/src/components/SimpleList/NoteItemWrapper.js
+++ b/apps/mobile/src/components/SimpleList/NoteItemWrapper.js
@@ -8,6 +8,7 @@ import {eShowMergeDialog, eOnLoadNote} from '../../services/events';
 import {simpleDialogEvent} from '../DialogManager/recievers';
 import {TEMPLATE_TRASH} from '../DialogManager/templates';
 import {openEditorAnimation} from '../../utils/animations';
+import {DDS} from '../../utils/utils';
 
 export const NoteItemWrapper = ({
   item,
diff --git a/apps/mobile/src/components/header/HeaderTitle.js b/apps/mobile/src/components/header/HeaderTitle.js
index 82e4609dc..03ecc2063 100644
--- a/apps/mobile/src/components/header/HeaderTitle.js
+++ b/apps/mobile/src/components/header/HeaderTitle.js
@@ -1,5 +1,5 @@
-import React, {createRef, useEffect} from 'react';
-import {Text, Platform} from 'react-native';
+import React from 'react';
+import {Text} from 'react-native';
 import {SIZE, WEIGHT} from '../../common/common';
 import {useTracked} from '../../provider';
 
@@ -9,24 +9,25 @@ export const HeaderTitle = ({root}) => {
   let headerTextState = root ? state.headerTextState : state.indHeaderTextState;
 
   return (
-    <Text
-      style={{
-        fontSize: SIZE.xl,
-        color: headerTextState.color ? headerTextState.color : colors.heading,
-        fontFamily: WEIGHT.bold,
-        alignSelf:'center',
-      
-      }}>
+    <>
       <Text
         style={{
-          color: colors.accent,
+          fontSize: SIZE.xl,
+          color: headerTextState.color ? headerTextState.color : colors.heading,
+          fontFamily: WEIGHT.bold,
+          alignSelf: 'center',
         }}>
-        {headerTextState.heading.slice(0, 1) === '#' ? '#' : null}
-      </Text>
+        <Text
+          style={{
+            color: colors.accent,
+          }}>
+          {headerTextState.heading.slice(0, 1) === '#' ? '#' : null}
+        </Text>
 
-      {headerTextState.heading.slice(0, 1) === '#'
-        ? headerTextState.heading.slice(1)
-        : headerTextState.heading}
-    </Text>
+        {headerTextState.heading.slice(0, 1) === '#'
+          ? headerTextState.heading.slice(1)
+          : headerTextState.heading}
+      </Text>
+    </>
   );
 };
diff --git a/apps/mobile/src/components/header/index.js b/apps/mobile/src/components/header/index.js
index a9ea05f73..a3e7d1ac3 100644
--- a/apps/mobile/src/components/header/index.js
+++ b/apps/mobile/src/components/header/index.js
@@ -94,6 +94,7 @@ export const Header = ({showSearch, root}) => {
               ? 0
               : insets.top,
           backgroundColor: colors.bg,
+          overflow:"hidden"
         },
       ]}>
       <Animatable.View