Merge pull request #3079 from amitsingh-007/f-shortcut-panel-improvment

apps/extension/src/HomePopup/components/LastVisitedButton.tsx

@@ -2,7 +2,7 @@ import { syncLastVisitedToStorage } from '@/HomePopup/utils/lastVisited';
 import { trpcApi } from '@/apis/trpcApi';
 import useCurrentTab from '@/hooks/useCurrentTab';
 import useFirebaseStore from '@/store/firebase/useFirebaseStore';
-import { ILastVisited } from '@bypass/shared';
+import { getlastVisitedText } from '@/utils/lastVisited';
 import { getLastVisited } from '@helpers/fetchFromStorage';
 import { Button, Text, Tooltip } from '@mantine/core';
 import md5 from 'md5';
@@ -14,23 +14,14 @@ const LastVisitedButton = memo(function LastVisitedButton() {
   const currentTab = useCurrentTab();
   const [isFetching, setIsFetching] = useState(false);
   const [lastVisited, setLastVisited] = useState('');
-  const [lastVisitedObj, setLastVisitedObj] = useState<ILastVisited>({});
 
   const initLastVisited = useCallback(async () => {
-    setIsFetching(true);
-    const lastVisitedData = await getLastVisited();
     if (!currentTab?.url) {
       return;
     }
-    const { hostname } = new URL(currentTab.url);
-    const lastVisitedDate = lastVisitedData[md5(hostname)];
-    let displayInfo = '';
-    if (lastVisitedDate) {
-      const date = new Date(lastVisitedDate);
-      displayInfo = `${date.toDateString()}, ${date.toLocaleTimeString()}`;
-    }
-    setLastVisited(displayInfo);
-    setLastVisitedObj(lastVisitedData);
+    setIsFetching(true);
+    const lastVisitedText = await getlastVisitedText(currentTab.url);
+    setLastVisited(lastVisitedText);
     setIsFetching(false);
   }, [currentTab?.url]);
 
@@ -42,10 +33,11 @@ const LastVisitedButton = memo(function LastVisitedButton() {
   }, [initLastVisited, isSignedIn, lastVisited]);
 
   const handleUpdateLastVisited = async () => {
-    setIsFetching(true);
     if (!currentTab?.url) {
       return;
     }
+    const lastVisitedObj = await getLastVisited();
+    setIsFetching(true);
     const { hostname } = new URL(currentTab.url);
     lastVisitedObj[md5(hostname)] = Date.now();
     const isSuccess =

apps/extension/src/ShortcutsPanel/components/RedirectionRule.tsx

@@ -1,10 +1,22 @@
+import { getlastVisitedText } from '@/utils/lastVisited';
 import { IRedirection } from '@bypass/shared';
 import { useSortable } from '@dnd-kit/sortable';
-import { ActionIcon, Center, Checkbox, Group, TextInput } from '@mantine/core';
+import {
+  ActionIcon,
+  Center,
+  Checkbox,
+  Flex,
+  Group,
+  Text,
+  TextInput,
+  Tooltip,
+  useMantineTheme,
+} from '@mantine/core';
 import useHistoryStore from '@store/history';
 import clsx from 'clsx';
-import { memo, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 import { CgWebsite } from 'react-icons/cg';
+import { FaCalendarCheck } from 'react-icons/fa';
 import { IoSave } from 'react-icons/io5';
 import { MdOutlineDelete, MdShortcut } from 'react-icons/md';
 import { RxDragHandleDots2, RxExternalLink } from 'react-icons/rx';
@@ -30,12 +42,22 @@ const RedirectionRule = memo(function RedirectionRule({
   handleSaveRule,
   dndProps,
 }: Props) {
+  const theme = useMantineTheme();
   const startHistoryMonitor = useHistoryStore(
     (state) => state.startHistoryMonitor
   );
   const [ruleAlias, setRuleAlias] = useState(alias);
   const [ruleWebsite, setRuleWebsite] = useState(website);
   const [isDefaultRule, setIsDefaultRule] = useState(isDefault);
+  const [lastVisited, setLastVisited] = useState<string>();
+
+  useEffect(() => {
+    const initLastVisited = async () => {
+      const lastVisitedText = await getlastVisitedText(website);
+      setLastVisited(lastVisitedText);
+    };
+    initLastVisited();
+  }, [website]);
 
   const handleRemoveClick = () => {
     handleRemoveRule(pos);
@@ -91,6 +113,20 @@ const RedirectionRule = memo(function RedirectionRule({
           value={ruleWebsite}
           onChange={(e) => setRuleWebsite(e.target.value.trim())}
           leftSection={<CgWebsite />}
+          rightSection={
+            lastVisited ? (
+              <Tooltip
+                label={<Text>{lastVisited}</Text>}
+                withArrow
+                radius="md"
+                color="gray"
+              >
+                <Flex>
+                  <FaCalendarCheck color={theme.colors.teal[5]} />
+                </Flex>
+              </Tooltip>
+            ) : null
+          }
           error={!ruleWebsite}
         />
       </Group>

apps/extension/src/utils/lastVisited.ts

@@ -0,0 +1,13 @@
+import { getLastVisited } from '@/helpers/fetchFromStorage';
+import md5 from 'md5';
+
+export const getlastVisitedText = async (url: string) => {
+  const lastVisitedData = await getLastVisited();
+  const { hostname } = new URL(url);
+  const lastVisitedDate = lastVisitedData[md5(hostname)];
+  if (!lastVisitedDate) {
+    return '';
+  }
+  const date = new Date(lastVisitedDate);
+  return `${date.toDateString()}, ${date.toLocaleTimeString()}`;
+};

packages/configs/manifest/manifest.json

@@ -1,6 +1,6 @@
 {
   "key": "fdnekjijeofacghkammknogmiapepano",
-  "version": "20.7.0",
+  "version": "20.8.0",
   "manifest_version": 3,
   "short_name": "Bypass Links",
   "name": "Bypass Links",