From 188f6fe1e6ccbd40839f52bade0e50070cfe490c Mon Sep 17 00:00:00 2001
From: Yann Bizeul <yann@tynsoe.org>
Date: Wed, 30 Apr 2025 11:57:46 +0200
Subject: [PATCH] new: add a button to extend share validity

---
 html/src/Components/ShareComponent.tsx | 15 ++++++++--
 html/src/Components/ShareEditor.tsx    | 38 ++++++++++++++++++--------
 html/src/hupload.ts                    |  2 +-
 html/src/i18n/config.ts                |  2 ++
 4 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/html/src/Components/ShareComponent.tsx b/html/src/Components/ShareComponent.tsx
index 7b24d6b..88896d9 100644
--- a/html/src/Components/ShareComponent.tsx
+++ b/html/src/Components/ShareComponent.tsx
@@ -1,5 +1,5 @@
 import { ActionIcon, ActionIconGroup, Anchor, Box, Button, CopyButton, Flex, Group, Paper, Popover, Progress, Stack, Text, Tooltip, useMantineTheme } from "@mantine/core";
-import { humanFileSize, prettyfiedCount, Share } from "../hupload";
+import { humanFileSize, prettyfiedCount, Share, ShareDefaults } from "../hupload";
 import { Link } from "react-router-dom";
 import classes from './ShareComponent.module.css';
 import { IconClock, IconDots, IconLink, IconTrash } from "@tabler/icons-react";
@@ -48,6 +48,17 @@ export function ShareComponent(props: {share: Share}) {
         })
     }
 
+    const renew = () => {
+        H.get('/defaults').then((r) => {
+            const d = r as ShareDefaults
+            const shareStartDate = new Date(share.created).getTime()
+            const shareEndDate = Date.now() + d.validity*1000*60*60*24
+            const newValidity = Math.ceil((shareEndDate-shareStartDate) / 1000 / 60 / 60 / 24)
+
+            setNewOptions({ ...newOptions, validity: newValidity})
+        })
+    }
+
     const linkify = (text: string) => {
         const urlRegex = /^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_+.~#?&/=]*)$/
         if (urlRegex.test(text)) {
@@ -172,7 +183,7 @@ export function ShareComponent(props: {share: Share}) {
                                                     <IconDots style={{ width: '70%', height: '70%' }} stroke={1.5}/>
                                                 </ActionIcon>
                                             </Tooltip>
-                                            <ShareEditor buttonTitle={t("update")} onChange={setNewOptions} onClick={updateShare} options={newOptions}/>
+                                            <ShareEditor buttonTitle={t("update")} onChange={setNewOptions} onClick={updateShare} onRenew={renew} options={newOptions}/>
                                         </ResponsivePopover>
                                     </ActionIconGroup>
                                 </Flex>
diff --git a/html/src/Components/ShareEditor.tsx b/html/src/Components/ShareEditor.tsx
index 49794f4..4d41af7 100644
--- a/html/src/Components/ShareEditor.tsx
+++ b/html/src/Components/ShareEditor.tsx
@@ -1,6 +1,6 @@
 import { Share } from "@/hupload";
-import { ActionIcon, Box, BoxComponentProps, Button, Flex, Input, NumberInput, rem, SegmentedControl, Stack, TextInput, useMantineTheme } from "@mantine/core";
-import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import { ActionIcon, Box, BoxComponentProps, Button, Flex, Group, Input, NumberInput, rem, SegmentedControl, Stack, TextInput, Tooltip, useMantineTheme } from "@mantine/core";
+import { IconChevronLeft, IconChevronRight, IconClockPlus } from "@tabler/icons-react";
 import { useDisclosure, useMediaQuery, useUncontrolled } from "@mantine/hooks";
 import classes from './ShareEditor.module.css';
 import { MarkDownEditor } from "./MarkdownEditor";
@@ -10,6 +10,7 @@ import { useTranslation } from "react-i18next";
 interface ShareEditorProps {
   onChange: (options: Share["options"]) => void;
   onClick: () => void;
+  onRenew?: () => void;
   close?: () => void;
   options: Share["options"];
   buttonTitle: string;
@@ -18,7 +19,7 @@ interface ShareEditorProps {
 export function ShareEditor(props: ShareEditorProps&BoxComponentProps) {
     const { t } = useTranslation()
     // Initialize props
-    const { onChange, onClick, close, buttonTitle } = props;
+    const { onChange, onClick, onRenew, close, buttonTitle } = props;
 
     // Initialize state
     const [options, setOptions] = useUncontrolled({
@@ -40,6 +41,9 @@ export function ShareEditor(props: ShareEditorProps&BoxComponentProps) {
         onChange(o)
     }
 
+    const renew = () => {
+        onRenew && onRenew();
+    }
     return (
         <Box miw={rem(200)} h="100%" w="100%" display={"flex"}>
             <Flex direction="column" gap="sm" w="100%" justify={"space-between"}>
@@ -73,15 +77,25 @@ export function ShareEditor(props: ShareEditorProps&BoxComponentProps) {
                         </Input.Wrapper>
 
                         {/* Share validity */}
-                        <NumberInput
-                            label={t("validity")}
-                            description={t("number_of_days_the_share_is_valid")}
-                            value={options.validity}
-                            min={0}
-                            classNames={{wrapper: classes.numberInput}}
-                            onChange={(v) => { notifyChange({...options, validity:v as number}); }}
-                        />
-
+                            <NumberInput
+                                label={t("validity")}
+                                description={t("number_of_days_the_share_is_valid")}
+                                value={options.validity}
+                                min={0}
+                                classNames={{wrapper: classes.numberInput}}
+                                onChange={(v) => { notifyChange({...options, validity:v as number}); }}
+                                inputContainer={(children) => (
+                                    <>
+                                    <Group gap="xs" align="center">
+                                        {children}
+                                        <Tooltip label={t("renew_share")} withArrow>
+                                        <ActionIcon mt="xs" variant="light" radius="xl" onClick={renew} >
+                                            <IconClockPlus style={{ width: '70%', height: '70%' }} stroke={1.5}/>
+                                        </ActionIcon>
+                                        </Tooltip>
+                                    </Group>
+                                    </>)}
+                            />
                         {/* Share description */}
                         <TextInput label={t("description")} value={options.description}
                             onChange={(v) => { notifyChange({...options, description:v.target.value}); }}
diff --git a/html/src/hupload.ts b/html/src/hupload.ts
index fe09c5c..218a1ec 100644
--- a/html/src/hupload.ts
+++ b/html/src/hupload.ts
@@ -32,7 +32,7 @@ export interface Message {
 }
 
 export interface ShareDefaults {
-  expiration: number;
+  validity: number;
   exposure: string;
 }
 
diff --git a/html/src/i18n/config.ts b/html/src/i18n/config.ts
index 8d9f94b..f37f9d2 100644
--- a/html/src/i18n/config.ts
+++ b/html/src/i18n/config.ts
@@ -88,6 +88,7 @@ i18n
           send: "Send",
           receive: "Receive",
           both: "Both",
+          renew_share: "Renew validity",
 
           validity: "Validity",
           number_of_days_the_share_is_valid: "Number of days the share is valid. 0 is unlimited.",
@@ -153,6 +154,7 @@ i18n
             send: "Envoyer",
             receive: "Reçevoir",
             both: "Les deux",
+            renew_share: "Étendre la validité",
 
             validity: "Expiration",
             number_of_days_the_share_is_valid: "Nombre de jours pendant lesquels le partage est valide. 0 signifie illimité.",