Merge pull request #9892 from kashaf-ansari-dev/fix-remove-unset-expiry-date

mobile: fix unset note expiry date

apps/mobile/app/components/date-picker/index.tsx

@@ -19,7 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import React from "react";
 import { useThemeColors } from "@notesnook/theme";
 import { useRef } from "react";
-import { View } from "react-native";
+import { useWindowDimensions, View } from "react-native";
 import { defaultBorderRadius } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
 import DatePicker from "react-native-date-picker";
@@ -32,7 +32,10 @@ export default function DatePickerComponent(props: {
   onCancel: () => void;
 }) {
   const { colors, isDark } = useThemeColors();
-  const dateRef = useRef<Date>(dayjs().add(1, "day").toDate());
+  const dateRef = useRef<Date>(dayjs().add(1, "week").toDate());
+
+  const { width } = useWindowDimensions();
+
   return (
     <View
       style={{
@@ -46,6 +49,9 @@ export default function DatePickerComponent(props: {
       }}
     >
       <DatePicker
+        style={{
+          width: width * 0.8 - DefaultAppStyles.GAP * 2
+        }}
         theme={isDark ? "dark" : "light"}
         mode="date"
         minimumDate={dayjs().add(1, "day").toDate()}

apps/mobile/app/components/list-items/note/index.tsx

@@ -55,6 +55,7 @@ import { TimeSince } from "../../ui/time-since";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import dayjs from "dayjs";
+import { ExpiryDate } from "../../ui/expiry-date";
 
 type NoteItemProps = {
   item: Note | BaseTrashItem<Note>;
@@ -266,6 +267,21 @@ const NoteItem = ({
                   />
                 ) : null}
 
+                {item.expiryDate?.value ? (
+                  <ExpiryDate
+                    note={item as Note}
+                    color={color?.colorCode}
+                    textStyle={{ fontSize: AppFontSize.xxs }}
+                    short
+                    iconSize={AppFontSize.xxs}
+                    style={{
+                      justifyContent: "flex-start",
+                      paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL / 2,
+                      alignSelf: "flex-start"
+                    }}
+                  />
+                ) : null}
+
                 {notebooks?.items
                   ?.filter(
                     (item) =>

apps/mobile/app/components/ui/expiry-date/index.tsx

@@ -0,0 +1,71 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero 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 Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import { Note } from "@notesnook/core";
+import { useThemeColors } from "@notesnook/theme";
+import React from "react";
+import { TextStyle, ViewStyle } from "react-native";
+import { AppFontSize, defaultBorderRadius } from "../../../utils/size";
+import { DefaultAppStyles } from "../../../utils/styles";
+import { Button, ButtonProps } from "../button";
+import dayjs from "dayjs";
+
+export const ExpiryDate = ({
+  note,
+  color,
+  style,
+  textStyle,
+  iconSize,
+  short,
+  ...props
+}: {
+  note: Note;
+  color?: string;
+  style?: ViewStyle;
+  textStyle?: TextStyle;
+  iconSize?: number;
+  short?: boolean;
+} & ButtonProps) => {
+  const { colors } = useThemeColors();
+  const expiryValue = note?.expiryDate?.value;
+  if (!expiryValue) return null;
+
+  const formattedDate = dayjs(expiryValue).format("DD MMM YYYY");
+
+  return (
+    <Button
+      title={formattedDate}
+      icon="bomb"
+      fontSize={textStyle?.fontSize || AppFontSize.xs}
+      iconSize={iconSize || AppFontSize.sm}
+      type="secondary"
+      textStyle={{
+        marginRight: 0,
+        ...textStyle
+      }}
+      style={{
+        height: "auto",
+        borderRadius: defaultBorderRadius,
+        borderColor: colors.primary.border,
+        paddingHorizontal: DefaultAppStyles.GAP_SMALL,
+        ...(style as ViewStyle)
+      }}
+      {...props}
+    />
+  );
+};

apps/mobile/app/hooks/use-actions.tsx

@@ -69,7 +69,11 @@ import { useSelectionStore } from "../stores/use-selection-store";
 import { useSettingStore } from "../stores/use-setting-store";
 import { useTagStore } from "../stores/use-tag-store";
 import { useUserStore } from "../stores/use-user-store";
-import { eCloseSheet, eUpdateNoteInEditor } from "../utils/events";
+import {
+  eCloseSheet,
+  eMenuItemUpdate,
+  eUpdateNoteInEditor
+} from "../utils/events";
 import { deleteItems } from "../utils/functions";
 import { convertNoteToText } from "../utils/note-to-text";
 import { NotesnookModule } from "../utils/notesnook-module";
@@ -1180,12 +1184,22 @@ export const useActions = ({
       },
       {
         id: "expiry-date",
-        title: item.expiryDate ? strings.unsetExpiry() : strings.setExpiry(),
-        icon: item.expiryDate ? "bomb-off" : "bomb",
+        title: item.expiryDate?.value
+          ? strings.unsetExpiry()
+          : strings.setExpiry(),
+        icon: item.expiryDate?.value ? "bomb-off" : "bomb",
         locked: !features?.expiringNotes?.isAllowed,
         onPress: async () => {
-          if (item.expiryDate) {
+          if (item.expiryDate?.value) {
             await db.notes.setExpiryDate(null, item.id);
+            Navigation.queueRoutesForUpdate();
+            eSendEvent(eMenuItemUpdate);
+            ToastManager.show({
+              message: strings.expiryDateRemoved(),
+              type: "success",
+              context: "local"
+            });
+
             setItem((await db.notes.note(item.id)) as Item);
           } else {
             if (features && !features?.expiringNotes.isAllowed) {
@@ -1209,6 +1223,14 @@ export const useActions = ({
                   onConfirm={async (date) => {
                     close?.();
                     await db.notes.setExpiryDate(date.getTime(), item.id);
+                    Navigation.queueRoutesForUpdate();
+                    eSendEvent(eMenuItemUpdate);
+                    ToastManager.show({
+                      message: strings.expiryDateSet(),
+                      type: "success",
+                      context: "local"
+                    });
+
                     setItem((await db.notes.note(item.id)) as Item);
                   }}
                 />

packages/intl/locale/en.po

@@ -2783,6 +2783,10 @@ msgstr "Expiry date cannot be more than 1 year in the future"
 msgid "Expiry date must be in the future"
 msgstr "Expiry date must be in the future"
 
+#: src/strings.ts:2706
+msgid "Expiry date removed"
+msgstr "Expiry date removed"
+
 #: src/strings.ts:2693
 msgid "Expiry date set"
 msgstr "Expiry date set"

packages/intl/locale/pseudo-LOCALE.po

@@ -2772,6 +2772,10 @@ msgstr ""
 msgid "Expiry date must be in the future"
 msgstr ""
 
+#: src/strings.ts:2706
+msgid "Expiry date removed"
+msgstr ""
+
 #: src/strings.ts:2693
 msgid "Expiry date set"
 msgstr ""

packages/intl/src/strings.ts

@@ -2702,5 +2702,6 @@ Continue without attachments?`,
     t`We couldn't load this theme. The file appears to be incomplete or missing required theme properties.`,
   copyLogs: () => t`Copy logs`,
   permissionRequiredToSaveQRCode: () =>
-    t`Permission required to save QR-Code to Gallery`
+    t`Permission required to save QR-Code to Gallery`,
+  expiryDateRemoved: () => t`Expiry date removed`
 };