Bounty: Dead Code Cleanup and Code Formatting (React)

src/App.tsx

@@ -5,12 +5,11 @@ import SignUp from './pages/signup'
 import { UserData } from './common/constants/SignupData'
 import Profile from './pages/profile'
 
-
 import { MyData } from './pages/profile/components/MyData'
 import useFetch from './common/hooks/useFetch'
 function App(): ReactElement {
   const emptyStringArray: string[] = []
-  const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(true)
   const [isLoggedIn, setIsLoggedIn] = useState(false)
   const [user, setUser] = useState<UserData>({
     about: '',
@@ -33,10 +32,10 @@ function App(): ReactElement {
   const { fetchData: fetchUser, data: userDataFromDB } = useFetch<UserData>()
 
   useEffect(() => {
-    const token = localStorage.getItem('token');
-    setIsLoggedIn(!!token); // Update isLoggedIn based on token presence
-    setIsLoading(false); // Mark loading as complete
-  }, []);
+    const token = localStorage.getItem('token')
+    setIsLoggedIn(!!token) // Update isLoggedIn based on token presence
+    setIsLoading(false) // Mark loading as complete
+  }, [])
 
   function makeUserUpdationUrl(address_string: string): string {
     const address = localStorage.getItem('address') || ''
@@ -56,12 +55,16 @@ function App(): ReactElement {
         }
       }
     })
-    setIsLoggedIn(!!token); // Set isLoggedIn based on token presence
-    setIsLoading(false); // Indicate loading is complete
+    setIsLoggedIn(!!token) // Set isLoggedIn based on token presence
+    setIsLoading(false) // Indicate loading is complete
   }, []) // Empty dependency array: run only on initial render
 
   if (isLoading) {
-    return <div className='h-screen w-screen flex justify-center items-center'><div className="w-8 h-8 border-4 border-t-4 border-gray-200 border-t-purple-500 rounded-full animate-spin"></div></div>;
+    return (
+      <div className="h-screen w-screen flex justify-center items-center">
+        <div className="w-8 h-8 border-4 border-t-4 border-gray-200 border-t-purple-500 rounded-full animate-spin"></div>
+      </div>
+    )
   }
 
   return (
@@ -100,24 +103,17 @@ function App(): ReactElement {
             }
           />
           <Route path="/privacy" element={<PrivacyPolicy />} />
-          <Route
-            path="/profile/:address"
-            element={<Profile />}
-          />
+          <Route path="/profile/:address" element={<Profile />} />
 
-          {isLoggedIn && <Route path='my-data/:address' element={<MyData />} />}
+          {isLoggedIn && <Route path="my-data/:address" element={<MyData />} />}
           {isLoggedIn ? (
-            <Route
-              path="*"
-              element={<Profile />}
-            />
+            <Route path="*" element={<Profile />} />
           ) : (
             <Route path="*" element={<Navigate to="/" />} />
           )}
         </Routes>
       </div>
     </div>
-
   )
 }
 

src/common/components/Navbar.tsx

@@ -1,4 +1,4 @@
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom'
 import { ReactComponent as Logo } from '../../assets/images/nameLogo.svg'
 
 export enum PAGE_NAMES {
@@ -7,18 +7,19 @@ export enum PAGE_NAMES {
 }
 
 interface NavbarProps {
-  userAddress: string;
+  userAddress: string
   page: PAGE_NAMES
 }
 
 const Navbar = ({ userAddress, page }: NavbarProps) => {
-  const navigate = useNavigate();
+  const navigate = useNavigate()
 
   const getButtonClasses = (isActive: boolean) =>
-    `py-2 px-4 rounded-lg font-medium transition duration-300 ${isActive
-      ? 'bg-gray-800 text-white'
-      : 'bg-[#f8f9fc] text-gray-700 hover:bg-gray-700 hover:text-white'
-    }`;
+    `py-2 px-4 rounded-lg font-medium transition duration-300 ${
+      isActive
+        ? 'bg-gray-800 text-white'
+        : 'bg-[#f8f9fc] text-gray-700 hover:bg-gray-700 hover:text-white'
+    }`
 
   return (
     <div className="w-full bg-[#f8f9fc] fixed z-10 shadow-md">

src/common/hooks/useFetch.ts

@@ -35,7 +35,6 @@ export enum FetchStatus {
 }
 
 function useFetch<T>(url?: string, options?: Options<T>): FetchResponse<T> {
-
   const navigate = useNavigate()
 
   const [data, setData] = useState<T | null>(null)

src/common/utils.ts

@@ -20,29 +20,32 @@ export function replaceSlugInURL(url: string, slug?: string) {
 }
 
 // Constant for milliseconds in a day
-const MILLISECONDS_IN_A_DAY = 1000 * 3600 * 24;
+const MILLISECONDS_IN_A_DAY = 1000 * 3600 * 24
 
-export function getDaysAgo(date: string | number, currentTimestamp: number = Date.now()): string {
-  const givenDate = new Date(date);
-  const differenceInTime = currentTimestamp - givenDate.getTime(); // date is already a timestamp
-  const differenceInDays = Math.floor(differenceInTime / MILLISECONDS_IN_A_DAY);
+export function getDaysAgo(
+  date: string | number,
+  currentTimestamp: number = Date.now()
+): string {
+  const givenDate = new Date(date)
+  const differenceInTime = currentTimestamp - givenDate.getTime() // date is already a timestamp
+  const differenceInDays = Math.floor(differenceInTime / MILLISECONDS_IN_A_DAY)
 
   if (differenceInDays === 0) {
-    return 'Today';
+    return 'Today'
   } else if (differenceInDays === 1) {
-    return '1 day ago';
+    return '1 day ago'
   } else if (differenceInDays <= 30) {
-    return `${differenceInDays} days ago`;
+    return `${differenceInDays} days ago`
   } else {
     return givenDate.toLocaleDateString('default', {
       month: 'long',
       day: 'numeric',
-      year: 'numeric',
-    });
+      year: 'numeric'
+    })
   }
 }
 
-export function getDateAndMonth (date: number | undefined) {
+export function getDateAndMonth(date: number | undefined) {
   if (date) {
     const givenDate = new Date(date * 1000)
     return `${givenDate.getDate()} ${givenDate.toLocaleString('default', {
@@ -52,54 +55,59 @@ export function getDateAndMonth (date: number | undefined) {
 }
 
 export const extractThumbNailURL = (videoURL: string) => {
-    let videoId: string | undefined;
-    if (videoURL.includes("youtu.be")) {
-        // Handle the shortened youtu.be URLs
-        videoId = videoURL.split("youtu.be/")[1]?.split("?")[0];
-    } else if (videoURL.includes("youtube.com")) {
-        // Handle the standard youtube.com URLs
-        videoId = videoURL.split("v=")[1]?.split("&")[0];
-    }
-    const thumbUrl = videoId ? `https://img.youtube.com/vi/${videoId}/hqdefault.jpg` : '';
-    return thumbUrl;
+  let videoId: string | undefined
+  if (videoURL.includes('youtu.be')) {
+    // Handle the shortened youtu.be URLs
+    videoId = videoURL.split('youtu.be/')[1]?.split('?')[0]
+  } else if (videoURL.includes('youtube.com')) {
+    // Handle the standard youtube.com URLs
+    videoId = videoURL.split('v=')[1]?.split('&')[0]
+  }
+  const thumbUrl = videoId
+    ? `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`
+    : ''
+  return thumbUrl
 }
 
 // Helper function to extract the video ID from a YouTube URL
 const extractVideoId = (url: string): string | undefined => {
-  let videoId: string | undefined;
+  let videoId: string | undefined
 
-  if (url.includes("youtu.be")) {
-    videoId = url.split("youtu.be/")[1]?.split("?")[0];
-  } else if (url.includes("youtube.com/watch")) {
-    videoId = url.split("v=")[1]?.split("&")[0];
+  if (url.includes('youtu.be')) {
+    videoId = url.split('youtu.be/')[1]?.split('?')[0]
+  } else if (url.includes('youtube.com/watch')) {
+    videoId = url.split('v=')[1]?.split('&')[0]
   }
 
-  return videoId;
-};
+  return videoId
+}
 
 export function parseUrl(url: string): string {
   try {
     // Ensure the URL starts with http:// or https://
-    const formattedUrl = url.startsWith('http://') || url.startsWith('https://') ? url : `http://${url}`;
+    const formattedUrl =
+      url.startsWith('http://') || url.startsWith('https://')
+        ? url
+        : `http://${url}`
 
     // Parse the URL
-    const { hostname } = new URL(formattedUrl);
-    const hostParts = hostname.split('.');
-    const n = hostParts.length;
+    const { hostname } = new URL(formattedUrl)
+    const hostParts = hostname.split('.')
+    const n = hostParts.length
 
     // Determine the domain
-    if (n < 2) return hostname; // If there are less than 2 parts, return the hostname as is
+    if (n < 2) return hostname // If there are less than 2 parts, return the hostname as is
 
     return n === 4 || (n === 3 && hostParts[n - 2].length <= 3)
       ? `${hostParts[n - 3]}.${hostParts[n - 2]}.${hostParts[n - 1]}`
-      : `${hostParts[n - 2]}.${hostParts[n - 1]}`;
+      : `${hostParts[n - 2]}.${hostParts[n - 1]}`
   } catch (error) {
-    console.error('Invalid URL:', url, error);
-    return ''; // Return an empty string or handle as needed
+    console.error('Invalid URL:', url, error)
+    return '' // Return an empty string or handle as needed
   }
 }
 
-export function formatDate (date: number): string {
+export function formatDate(date: number): string {
   const formattedDate = new Date(date) // Convert epoch to milliseconds
 
   const day = String(formattedDate.getDate()).padStart(2, '0') // Ensure two digits for day
@@ -112,18 +120,18 @@ export function formatDate (date: number): string {
 
 // text = '1234567890', maxLength = 8 => output: '12...890'
 export function truncateText(text: string, maxLength: number) {
-  const textLength = text.length;
+  const textLength = text.length
 
   if (textLength > maxLength) {
     // Calculate the number of characters to show from the start
-    const charsToShowFromStart = maxLength - 8;
+    const charsToShowFromStart = maxLength - 8
 
     // Get the start and end parts of the string
-    const startPart = text.substring(0, charsToShowFromStart);
-    const endPart = text.substring(textLength - 5);
+    const startPart = text.substring(0, charsToShowFromStart)
+    const endPart = text.substring(textLength - 5)
 
-    return `${startPart}...${endPart}`;
+    return `${startPart}...${endPart}`
   }
 
-  return text;
+  return text
 }

src/pages/profile/Onboarding/Authentication/index.tsx

@@ -63,9 +63,11 @@ export default function Onboarding({ handleLogin, user, setUser }: any) {
                     target="_blank"
                   >
                     <u> VANA DLP</u>
-                  </a> aimed
+                  </a>{' '}
+                  aimed
                   <br />
-                  at using chrome extension to help you own a piece of AI models.
+                  at using chrome extension to help you own a piece of AI
+                  models.
                 </p>
               </div>
 
@@ -128,10 +130,11 @@ export default function Onboarding({ handleLogin, user, setUser }: any) {
               {/* Sign In button - disabled if plugin is not installed */}
               <button
                 disabled={pluginState !== PluginState.INSTALLED}
-                className={`w-full py-3 ${pluginState === PluginState.INSTALLED
-                  ? 'bg-violet-600 text-white'
-                  : 'bg-gray-100 text-gray-500'
-                  } rounded-lg shadow mx-auto block`}
+                className={`w-full py-3 ${
+                  pluginState === PluginState.INSTALLED
+                    ? 'bg-violet-600 text-white'
+                    : 'bg-gray-100 text-gray-500'
+                } rounded-lg shadow mx-auto block`}
                 onClick={handleUserLogin}
               >
                 Sign In