From 5409ac666e7ca389a3b48ed3f4c966aeb84a3ca5 Mon Sep 17 00:00:00 2001
From: ammarahm-ed <ammarahmed6506@gmail.com>
Date: Wed, 11 Jan 2023 17:15:00 +0500
Subject: [PATCH] mobile: improve reminder time design

---
 .../app/components/list-items/note/index.js   | 57 +++++--------
 .../components/list-items/reminder/index.tsx  | 47 ++++-------
 .../list-items/selection-wrapper/index.js     |  2 +-
 .../mobile/app/components/properties/index.js | 36 ++------
 .../sheets/reminder-notify/index.tsx          |  2 +-
 .../app/components/sheets/reminder/index.tsx  | 37 +++-----
 .../app/components/ui/reminder-time/index.tsx | 84 +++++++++++++++++++
 .../app/screens/settings/settings-data.tsx    |  2 +-
 apps/mobile/app/utils/constants.js            |  2 +-
 9 files changed, 142 insertions(+), 127 deletions(-)
 create mode 100644 apps/mobile/app/components/ui/reminder-time/index.tsx

diff --git a/apps/mobile/app/components/list-items/note/index.js b/apps/mobile/app/components/list-items/note/index.js
index 63020a532..fe49f45b0 100644
--- a/apps/mobile/app/components/list-items/note/index.js
+++ b/apps/mobile/app/components/list-items/note/index.js
@@ -37,6 +37,7 @@ import { SIZE } from "../../../utils/size";
 import { Properties } from "../../properties";
 import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
+import { ReminderTime } from "../../ui/reminder-time";
 import { TimeSince } from "../../ui/time-since";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
@@ -92,9 +93,9 @@ const NoteItem = ({
   const attachmentCount = db.attachments?.ofNote(item.id, "all")?.length || 0;
   const notebooks = React.useMemo(() => getNotebook(item), [item]);
   const reminders = db.relations.from(item, "reminder");
-  const current = getUpcomingReminder(reminders);
+  const reminder = getUpcomingReminder(reminders);
   const _update = useRelationStore((state) => state.updater);
-
+  const noteColor = COLORS_NOTE[item.color?.toLowerCase()];
   return (
     <>
       <View
@@ -110,14 +111,15 @@ const NoteItem = ({
               alignItems: "center",
               zIndex: 10,
               elevation: 10,
-              marginBottom: 2.5
+              marginBottom: 2.5,
+              flexWrap: "wrap"
             }}
           >
             {notebooks?.map((_item) => (
               <Button
                 title={_item.title}
                 key={_item}
-                height={20}
+                height={25}
                 icon="book-outline"
                 type="grayBg"
                 fontSize={SIZE.xs}
@@ -130,11 +132,23 @@ const NoteItem = ({
                   marginRight: 5,
                   borderWidth: 0.5,
                   borderColor: colors.icon,
-                  paddingHorizontal: 6
+                  paddingHorizontal: 6,
+                  marginBottom: 5
                 }}
                 onPress={() => navigateToTopic(_item.topic)}
               />
             ))}
+
+            <ReminderTime
+              reminder={reminder}
+              color={noteColor}
+              onPress={() => {
+                Properties.present(reminder);
+              }}
+              style={{
+                height: 25
+              }}
+            />
           </View>
         ) : null}
 
@@ -162,39 +176,6 @@ const NoteItem = ({
           </Paragraph>
         ) : null}
 
-        {current &&
-        current.date && !current.disabled &&
-        (current.mode !== "once" || current.date > Date.now() || current.snoozeUntil > Date.now()) ? (
-          <TouchableOpacity
-            activeOpacity={1}
-            onPress={() => {
-              Properties.present(current);
-            }}
-            style={{
-              backgroundColor: colors.nav,
-              borderRadius: 5,
-              flexDirection: "row",
-              paddingHorizontal: 5,
-              paddingVertical: 3,
-              alignItems: "center",
-              marginTop: 5,
-              justifyContent: "flex-start",
-              alignSelf: "flex-start"
-            }}
-          >
-            <>
-              <Icon name="clock-outline" size={SIZE.md} color={colors.accent} />
-              <Paragraph
-                size={SIZE.xs + 1}
-                color={colors.icon}
-                style={{ marginLeft: 5 }}
-              >
-                {formatReminderTime(current)}
-              </Paragraph>
-            </>
-          </TouchableOpacity>
-        ) : null}
-
         <View
           style={{
             flexDirection: "row",
diff --git a/apps/mobile/app/components/list-items/reminder/index.tsx b/apps/mobile/app/components/list-items/reminder/index.tsx
index 8043e8fb7..bdde81e4c 100644
--- a/apps/mobile/app/components/list-items/reminder/index.tsx
+++ b/apps/mobile/app/components/list-items/reminder/index.tsx
@@ -30,6 +30,7 @@ import SelectionWrapper from "../selection-wrapper";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import ReminderSheet from "../../sheets/reminder";
 import { formatReminderTime } from "@notesnook/core/collections/reminders";
+import { ReminderTime } from "../../ui/reminder-time";
 
 const ReminderItem = React.memo(
   ({
@@ -57,7 +58,7 @@ const ReminderItem = React.memo(
         <View
           style={{
             flexWrap: "wrap",
-            flexShrink: 1, 
+            flexShrink: 1,
             opacity: item.disabled ? 0.5 : 1
           }}
         >
@@ -88,7 +89,6 @@ const ReminderItem = React.memo(
               flexWrap: "wrap"
             }}
           >
-            
             {item.disabled ? (
               <View
                 style={{
@@ -145,36 +145,19 @@ const ReminderItem = React.memo(
                 </Paragraph>
               </View>
             ) : null}
-            {item.date && !item.disabled ? (
-              <View
-                style={{
-                  backgroundColor: colors.nav,
-                  borderRadius: 5,
-                  flexDirection: "row",
-                  paddingHorizontal: 5,
-                  paddingVertical: 3,
-                  alignItems: "center",
-                  marginTop: 5,
-                  justifyContent: "flex-start",
-                  alignSelf: "flex-start"
-                }}
-              >
-                <>
-                  <Icon
-                    name="clock-outline"
-                    size={SIZE.md}
-                    color={colors.accent}
-                  />
-                  <Paragraph
-                    size={SIZE.xs + 1}
-                    color={colors.icon}
-                    style={{ marginLeft: 5 }}
-                  >
-                    {formatReminderTime(item)}
-                  </Paragraph>
-                </>
-              </View>
-            ) : null}
+
+            <ReminderTime
+              reminder={item}
+              checkIsActive={false}
+              fontSize={SIZE.xs + 1}
+              style={{
+                justifyContent: "flex-start",
+                borderWidth: 0,
+                height: 30,
+                alignSelf: "flex-start",
+                marginTop: 5
+              }}
+            />
           </View>
         </View>
         <IconButton
diff --git a/apps/mobile/app/components/list-items/selection-wrapper/index.js b/apps/mobile/app/components/list-items/selection-wrapper/index.js
index e03b72fe9..a61b74d27 100644
--- a/apps/mobile/app/components/list-items/selection-wrapper/index.js
+++ b/apps/mobile/app/components/list-items/selection-wrapper/index.js
@@ -103,7 +103,7 @@ const SelectionWrapper = ({
         paddingHorizontal: 12,
         paddingVertical: compactMode ? 8 : 12,
         borderRadius: isSheet ? 10 : 0,
-        marginBottom: isSheet ? 12 : undefined
+        marginBottom: isSheet ? 12 : undefined,
       }}
     >
       {item.type === "note" ? (
diff --git a/apps/mobile/app/components/properties/index.js b/apps/mobile/app/components/properties/index.js
index d41f04750..33e9274d4 100644
--- a/apps/mobile/app/components/properties/index.js
+++ b/apps/mobile/app/components/properties/index.js
@@ -42,6 +42,7 @@ import {
   formatReminderTime,
   getUpcomingReminder
 } from "@notesnook/core/collections/reminders";
+import { ReminderTime } from "../ui/reminder-time";
 export const Properties = ({
   close = () => {},
   item,
@@ -119,37 +120,16 @@ export const Properties = ({
             ) : null}
 
             {item.type === "reminder" ? (
-              <View
+              <ReminderTime
+                reminder={item}
                 style={{
-                  backgroundColor: colors.nav,
-                  borderRadius: 5,
-                  flexDirection: "row",
-                  paddingHorizontal: 5,
-                  paddingVertical: 3,
-                  alignItems: "center",
                   justifyContent: "flex-start",
-                  alignSelf: "flex-start",
-                  marginBottom: 5,
-                  marginTop: !item.description ? 5 : 0
+                  borderWidth: 0,
+                  height: 30,
+                  alignSelf: "flex-start"
                 }}
-              >
-                {item.date ? (
-                  <>
-                    <Icon
-                      name="clock-outline"
-                      size={SIZE.md}
-                      color={colors.accent}
-                    />
-                    <Paragraph
-                      size={SIZE.xs + 1}
-                      color={colors.icon}
-                      style={{ marginLeft: 5 }}
-                    >
-                      {formatReminderTime(item)}
-                    </Paragraph>
-                  </>
-                ) : null}
-              </View>
+                fontSize={SIZE.xs + 1}
+              />
             ) : null}
 
             {item.type === "note" ? <Tags close={close} item={item} /> : null}
diff --git a/apps/mobile/app/components/sheets/reminder-notify/index.tsx b/apps/mobile/app/components/sheets/reminder-notify/index.tsx
index 5584aef8d..b9a64f2ff 100644
--- a/apps/mobile/app/components/sheets/reminder-notify/index.tsx
+++ b/apps/mobile/app/components/sheets/reminder-notify/index.tsx
@@ -101,7 +101,7 @@ export default function ReminderNotify({
           alignItems: "center"
         }}
       >
-        <Icon name="clock-outline" size={20} color={colors.accent} />
+        <Icon name="bell" size={20} color={colors.accent} />
         <Paragraph style={{ marginLeft: 5 }}>
           {dayjs(reminder?.date).format("ddd, YYYY-MM-DD hh:mm A")}
         </Paragraph>
diff --git a/apps/mobile/app/components/sheets/reminder/index.tsx b/apps/mobile/app/components/sheets/reminder/index.tsx
index 046b9c3f1..fd86df45d 100644
--- a/apps/mobile/app/components/sheets/reminder/index.tsx
+++ b/apps/mobile/app/components/sheets/reminder/index.tsx
@@ -46,6 +46,7 @@ import { useRelationStore } from "../../../stores/use-relation-store";
 import Paragraph from "../../ui/typography/paragraph";
 import PremiumService from "../../../services/premium";
 import DatePicker from "react-native-date-picker";
+import { ReminderTime } from "../../ui/reminder-time";
 
 type ReminderSheetProps = {
   actionSheetRef: RefObject<ActionSheet>;
@@ -528,31 +529,17 @@ export default function ReminderSheet({
           </View>
         )}
 
-        {reminder && reminder.date ? (
-          <View
-            style={{
-              borderRadius: 5,
-              flexDirection: "row",
-              paddingVertical: 6,
-              paddingHorizontal: 12,
-              alignItems: "center",
-              justifyContent: "flex-start",
-              marginBottom: 10,
-              backgroundColor: colors.nav
-            }}
-          >
-            <>
-              <Icon name="clock-outline" size={SIZE.md} color={colors.accent} />
-              <Paragraph
-                size={SIZE.xs + 1}
-                color={colors.icon}
-                style={{ marginLeft: 5 }}
-              >
-                {formatReminderTime(reminder)}
-              </Paragraph>
-            </>
-          </View>
-        ) : null}
+        <ReminderTime
+          reminder={reminder}
+          style={{
+            width: "100%",
+            justifyContent: "flex-start",
+            borderWidth: 0,
+            height: 30,
+            alignSelf: "flex-start"
+          }}
+        />
+        
       </ScrollView>
       <Button
         style={{
diff --git a/apps/mobile/app/components/ui/reminder-time/index.tsx b/apps/mobile/app/components/ui/reminder-time/index.tsx
new file mode 100644
index 000000000..f388b8457
--- /dev/null
+++ b/apps/mobile/app/components/ui/reminder-time/index.tsx
@@ -0,0 +1,84 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2022 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import React from "react";
+import {
+  formatReminderTime,
+  isReminderActive
+} from "@notesnook/core/collections/reminders";
+import { ViewStyle } from "react-native";
+
+import { Reminder } from "../../../services/notifications";
+import { Button, ButtonProps } from "../button";
+import { useThemeStore } from "../../../stores/use-theme-store";
+import { SIZE } from "../../../utils/size";
+
+export const ReminderTime = ({
+  checkIsActive = true,
+  style,
+  ...props
+}: {
+  short?: boolean;
+  onPress?: () => void;
+  reminder?: Reminder;
+  color?: string;
+  style?: ViewStyle;
+  checkIsActive?: boolean;
+} & ButtonProps) => {
+  const colors = useThemeStore((state) => state.colors);
+  const reminder = props.reminder;
+  const time = !reminder ? undefined : formatReminderTime(reminder);
+  const isTodayOrTomorrow =
+    (time?.includes("Today") || time?.includes("Tomorrow")) &&
+    !time?.includes("Last");
+  const isActive =
+    checkIsActive && reminder ? isReminderActive(reminder) : true;
+
+  return reminder && isActive ? (
+    <Button
+      title={time}
+      key={reminder.id}
+      height={20}
+      icon="bell"
+      fontSize={SIZE.xs}
+      iconSize={SIZE.sm}
+      type="grayBg"
+      buttonType={
+        isTodayOrTomorrow
+          ? {
+              text: props.color || colors.accent
+            }
+          : undefined
+      }
+      textStyle={{
+        marginRight: 0
+      }}
+      style={{
+        borderRadius: 5,
+        marginRight: 5,
+        borderWidth: 0.5,
+        borderColor: colors.icon,
+        paddingHorizontal: 6,
+        marginBottom: 5,
+        ...(style as ViewStyle)
+      }}
+      {...props}
+      onPress={props.onPress}
+    />
+  ) : null;
+};
diff --git a/apps/mobile/app/screens/settings/settings-data.tsx b/apps/mobile/app/screens/settings/settings-data.tsx
index b4acecc87..c17e8f807 100644
--- a/apps/mobile/app/screens/settings/settings-data.tsx
+++ b/apps/mobile/app/screens/settings/settings-data.tsx
@@ -837,7 +837,7 @@ export const settingsGroups: SettingSection[] = [
         id: "reminders",
         type: "screen",
         name: "Reminders",
-        icon: "clock-outline",
+        icon: "bell",
         description: "Manage and configure reminders in app",
         sections: [
           {
diff --git a/apps/mobile/app/utils/constants.js b/apps/mobile/app/utils/constants.js
index ab76ea724..d76e81478 100644
--- a/apps/mobile/app/utils/constants.js
+++ b/apps/mobile/app/utils/constants.js
@@ -130,7 +130,7 @@ export const MenuItemsList = [
   },
   {
     name: "Reminders",
-    icon: "clock-outline",
+    icon: "bell",
     close: true
   },
   {