refactor: Remove duplicate code and improve organization in EntryPage…

… component
bramses · Sep 10, 2024 · 81f3448 · 81f3448
1 parent 5ed7c10
commit 81f3448
Show file tree

Hide file tree

Showing 2 changed files with 113 additions and 66 deletions.
diff --git a/src/components/EntryPage.tsx b/src/components/EntryPage.tsx
@@ -314,72 +314,6 @@ const EntryPage = () => {
         'Loading...'
       )}
 
-      {(hasAliases || temporaryAliases.length > 0) && (
-        <h2 className="my-4 text-4xl font-extrabold">Comments</h2>
-      )}
-
-      {temporaryAliases.length > 0 && (
-        <div>
-          {temporaryAliases.map((alias) => (
-            <div key={alias} className="mb-4 flex flex-col items-start">
-              <div className="flex items-center">
-                <div className="mr-2 flex size-6 shrink-0 items-center justify-center rounded-full bg-gray-300 text-xs font-bold text-white">
-                  {firstLastName.firstName && firstLastName.lastName ? (
-                    <>
-                      {firstLastName.firstName[0]}
-                      {firstLastName.lastName[0]}
-                    </>
-                  ) : (
-                    'YCB'
-                  )}
-                </div>
-                <button
-                  className="text-black hover:underline"
-                  type="button"
-                  onClick={() => toDashboard(alias)}
-                >
-                  {alias}
-                </button>
-              </div>
-              <span className="text-sm text-gray-500">
-                Added to yCb: {new Date().toLocaleString()}
-              </span>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {hasAliases && (
-        <div>
-          {data?.metadata?.aliasData?.map((alias: any) => (
-            <div key={alias.aliasId} className="mb-4 flex flex-col items-start">
-              <div className="flex items-center">
-                <div className="mr-2 flex size-6 shrink-0 items-center justify-center rounded-full bg-gray-300 text-xs font-bold text-white">
-                  {firstLastName.firstName && firstLastName.lastName ? (
-                    <>
-                      {firstLastName.firstName[0]}
-                      {firstLastName.lastName[0]}
-                    </>
-                  ) : (
-                    'YCB'
-                  )}
-                </div>
-                <button
-                  className="text-black hover:underline"
-                  type="button"
-                  onClick={() => toDashboard(alias.aliasData)}
-                >
-                  {alias.aliasData}
-                </button>
-              </div>
-              <span className="text-sm text-gray-500">
-                Added to yCb: {alias.aliasCreatedAt}
-              </span>
-            </div>
-          ))}
-        </div>
-      )}
-
       <h2 className="my-4 text-4xl font-extrabold">Add Comment</h2>
       <div className="">
         <textarea
@@ -509,6 +443,73 @@ const EntryPage = () => {
           </button>
         )}
       </div>
+
+      {(hasAliases || temporaryAliases.length > 0) && (
+        <h2 className="my-4 text-4xl font-extrabold">Comments</h2>
+      )}
+
+      {temporaryAliases.length > 0 && (
+        <div>
+          {temporaryAliases.map((alias) => (
+            <div key={alias} className="mb-4 flex flex-col items-start">
+              <div className="flex items-center">
+                <div className="mr-2 flex size-6 shrink-0 items-center justify-center rounded-full bg-gray-300 text-xs font-bold text-white">
+                  {firstLastName.firstName && firstLastName.lastName ? (
+                    <>
+                      {firstLastName.firstName[0]}
+                      {firstLastName.lastName[0]}
+                    </>
+                  ) : (
+                    'YCB'
+                  )}
+                </div>
+                <button
+                  className="text-black hover:underline"
+                  type="button"
+                  onClick={() => toDashboard(alias)}
+                >
+                  {alias}
+                </button>
+              </div>
+              <span className="text-sm text-gray-500">
+                Added to yCb: {new Date().toLocaleString()}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {hasAliases && (
+        <div>
+          {data?.metadata?.aliasData?.map((alias: any) => (
+            <div key={alias.aliasId} className="mb-4 flex flex-col items-start">
+              <div className="flex items-center">
+                <div className="mr-2 flex size-6 shrink-0 items-center justify-center rounded-full bg-gray-300 text-xs font-bold text-white">
+                  {firstLastName.firstName && firstLastName.lastName ? (
+                    <>
+                      {firstLastName.firstName[0]}
+                      {firstLastName.lastName[0]}
+                    </>
+                  ) : (
+                    'YCB'
+                  )}
+                </div>
+                <button
+                  className="text-black hover:underline"
+                  type="button"
+                  onClick={() => toDashboard(alias.aliasData)}
+                >
+                  {alias.aliasData}
+                </button>
+              </div>
+              <span className="text-sm text-gray-500">
+                Added to yCb: {alias.aliasCreatedAt}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+
       {showAliasError && (
         <div className="text-red-500">Error adding alias. Try again.</div>
       )}

diff --git a/src/helpers/favicon_cahce.ts b/src/helpers/favicon_cahce.ts
@@ -0,0 +1,46 @@
+const CACHE_KEY = 'faviconCache';
+const CACHE_EXPIRATION = 10 * 60 * 1000 * 60; // 10 hours in milliseconds
+
+export const getFaviconCache = () => {
+  if (typeof window === 'undefined' || typeof localStorage === 'undefined') {
+    return { favicon: {} }; // Check for client-side and localStorage
+  }
+  const cache = localStorage.getItem(CACHE_KEY);
+  if (cache) {
+    const parsedCache = JSON.parse(cache);
+    if (Date.now() - parsedCache.timestamp < CACHE_EXPIRATION) {
+      return parsedCache.data;
+    }
+  }
+  return { favicon: {} };
+};
+
+export const setFaviconCache = (data: any) => {
+  if (typeof window === 'undefined' || typeof localStorage === 'undefined')
+    return; // Check for client-side and localStorage
+  const cache = {
+    timestamp: Date.now(),
+    data,
+  };
+  localStorage.setItem(CACHE_KEY, JSON.stringify(cache));
+};
+
+export const appendFaviconToCache = (query: string, url: any) => {
+  const cache = getFaviconCache();
+
+  cache.favicon[query] = url;
+
+  setFaviconCache(cache);
+};
+
+export const invalidateFaviconFromCache = (query: string) => {
+  const cache = getFaviconCache();
+
+  delete cache.favicon[query];
+
+  setFaviconCache(cache);
+};
+
+export const clearFaviconCache = () => {
+  localStorage.removeItem(CACHE_KEY);
+};