Format code

src/components/Apps/SortablePinnedApps.tsx

@@ -1,123 +1,148 @@
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useMemo } from 'react';
 import { DndContext, closestCenter } from '@dnd-kit/core';
-import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable } from '@dnd-kit/sortable';
+import {
-import { KeyboardSensor, PointerSensor, TouchSensor, useSensor, useSensors } from '@dnd-kit/core';
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+} from '@dnd-kit/sortable';
+import {
+  KeyboardSensor,
+  PointerSensor,
+  TouchSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
 import { CSS } from '@dnd-kit/utilities';
 import { Avatar, ButtonBase } from '@mui/material';
 import { AppCircle, AppCircleContainer, AppCircleLabel } from './Apps-styles';
-import { getBaseApiReact, MyContext } from '../../App';
+import { getBaseApiReact } from '../../App';
 import { executeEvent } from '../../utils/events';
-import { settingsLocalLastUpdatedAtom, sortablePinnedAppsAtom } from '../../atoms/global';
+import {
+  settingsLocalLastUpdatedAtom,
+  sortablePinnedAppsAtom,
+} from '../../atoms/global';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import { saveToLocalStorage } from './AppsNavBar';
 import { ContextMenuPinnedApps } from '../ContextMenuPinnedApps';
-import LockIcon from "@mui/icons-material/Lock";
+import LockIcon from '@mui/icons-material/Lock';
 import { useHandlePrivateApps } from './useHandlePrivateApps';
-const SortableItem = ({ id, name, app, isDesktop }) => {
-  const {openApp} = useHandlePrivateApps()
 
-    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
+const SortableItem = ({ id, name, app, isDesktop }) => {
+  const { openApp } = useHandlePrivateApps();
+
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id });
+
   const style = {
+    backgroundColor: '#f9f9f9',
+    border: '1px solid #ccc',
+    borderRadius: '4px',
+    color: 'black',
+    cursor: 'grab',
+    marginBottom: '5px',
+    padding: '10px',
     transform: CSS.Transform.toString(transform),
     transition,
-        padding: '10px',
-        border: '1px solid #ccc',
-        marginBottom: '5px',
-        borderRadius: '4px',
-        backgroundColor: '#f9f9f9',
-        cursor: 'grab',
-        color: 'black'
   };
 
   return (
     <ContextMenuPinnedApps app={app} isMine={!!app?.isMine}>
       <ButtonBase
-        ref={setNodeRef} {...attributes} {...listeners}
+        ref={setNodeRef}
+        {...attributes}
+        {...listeners}
         sx={{
-                width: "80px",
+          width: '80px',
           transform: CSS.Transform.toString(transform),
           transition,
         }}
-              onClick={async ()=> {
+        onClick={async () => {
-                if(app?.isPrivate){
+          if (app?.isPrivate) {
             try {
-                      await openApp(app?.privateAppProperties)
+              await openApp(app?.privateAppProperties);
             } catch (error) {
-                    console.error(error)
+              console.error(error);
             }
-                
           } else {
-                  executeEvent("addTab", {
+            executeEvent('addTab', {
-                    data: app
+              data: app,
-                  })
+            });
           }
-                
         }}
       >
-              <AppCircleContainer  sx={{
+        <AppCircleContainer
-                    border: "none",
+          sx={{
-                    gap: isDesktop ? '10px': '5px'
+            border: 'none',
-                  }}>
+            gap: isDesktop ? '10px' : '5px',
+          }}
+        >
           <AppCircle
             sx={{
-                    border: "none",
+              border: 'none',
             }}
           >
             {app?.isPrivate && !app?.privateAppProperties?.logo ? (
               <LockIcon
                 sx={{
-              height: "42px",
+                  height: '42px',
-                      width: "42px",
+                  width: '42px',
                 }}
               />
             ) : (
               <Avatar
                 sx={{
-                      height: "42px",
+                  height: '42px',
-                      width: "42px",
+                  width: '42px',
                   '& img': {
                     objectFit: 'fill',
-                      }
+                  },
                 }}
                 alt={app?.metadata?.title || app?.name}
-                    src={ app?.privateAppProperties?.logo ? app?.privateAppProperties?.logo :`${getBaseApiReact()}/arbitrary/THUMBNAIL/${
+                src={
+                  app?.privateAppProperties?.logo
+                    ? app?.privateAppProperties?.logo
+                    : `${getBaseApiReact()}/arbitrary/THUMBNAIL/${
                         app?.name
-                    }/qortal_avatar?async=true`}
+                      }/qortal_avatar?async=true`
+                }
               >
                 <img
                   style={{
-                        width: "31px",
+                    width: '31px',
-                        height: "auto",
+                    height: 'auto',
                   }}
                   //   src={LogoSelected}
                   alt="center-icon"
                 />
               </Avatar>
             )}
-                  
           </AppCircle>
           {app?.isPrivate ? (
             <AppCircleLabel>
-                   {`${app?.privateAppProperties?.appName || "Private"}`}
+              {`${app?.privateAppProperties?.appName || 'Private'}`}
             </AppCircleLabel>
           ) : (
-                  <AppCircleLabel>
+            <AppCircleLabel>{app?.metadata?.title || app?.name}</AppCircleLabel>
-                  {app?.metadata?.title || app?.name}
-                </AppCircleLabel>
           )}
-               
         </AppCircleContainer>
       </ButtonBase>
     </ContextMenuPinnedApps>
   );
 };
 
-export const SortablePinnedApps = ({  isDesktop, myWebsite, myApp, availableQapps = [] }) => {
+export const SortablePinnedApps = ({
+  isDesktop,
+  myWebsite,
+  myApp,
+  availableQapps = [],
+}) => {
   const [pinnedApps, setPinnedApps] = useRecoilState(sortablePinnedAppsAtom);
-    const setSettingsLocalLastUpdated = useSetRecoilState(settingsLocalLastUpdatedAtom);
+  const setSettingsLocalLastUpdated = useSetRecoilState(
+    settingsLocalLastUpdatedAtom
+  );
 
   const transformPinnedApps = useMemo(() => {
-  
     // Clone the existing pinned apps list
     let pinned = [...pinnedApps];
 
@@ -126,12 +151,17 @@ export const SortablePinnedApps = ({  isDesktop, myWebsite, myApp, availableQapp
       if (!appToCheck) return pinnedList;
 
       const existingIndex = pinnedList.findIndex(
-              (item) => item?.service === appToCheck?.service && item?.name === appToCheck?.name
+        (item) =>
+          item?.service === appToCheck?.service &&
+          item?.name === appToCheck?.name
       );
 
       if (existingIndex !== -1) {
         // If the app is already in the list, update it with `isMine: true`
-              pinnedList[existingIndex] = { ...pinnedList[existingIndex], isMine: true };
+        pinnedList[existingIndex] = {
+          ...pinnedList[existingIndex],
+          isMine: true,
+        };
       } else {
         // If not in the list, add it with `isMine: true` at the beginning
         pinnedList.unshift({ ...appToCheck, isMine: true });
@@ -149,10 +179,11 @@ export const SortablePinnedApps = ({  isDesktop, myWebsite, myApp, availableQapp
       const findIndex = availableQapps?.findIndex(
         (item) => item?.service === pin?.service && item?.name === pin?.name
       );
-          if (findIndex !== -1) return {
+      if (findIndex !== -1)
+        return {
           ...availableQapps[findIndex],
-            ...pin
+          ...pin,
-          }
+        };
 
       return pin;
     });
@@ -160,7 +191,6 @@ export const SortablePinnedApps = ({  isDesktop, myWebsite, myApp, availableQapp
     return pinned;
   }, [myApp, myWebsite, pinnedApps, availableQapps]);
 
- 
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
@@ -183,23 +213,39 @@ export const SortablePinnedApps = ({  isDesktop, myWebsite, myApp, availableQapp
     if (!over) return; // Make sure the drop target exists
 
     if (active.id !== over.id) {
-            const oldIndex = transformPinnedApps.findIndex((item) => `${item?.service}-${item?.name}` === active.id);
+      const oldIndex = transformPinnedApps.findIndex(
-            const newIndex = transformPinnedApps.findIndex((item) => `${item?.service}-${item?.name}` === over.id);
+        (item) => `${item?.service}-${item?.name}` === active.id
+      );
+      const newIndex = transformPinnedApps.findIndex(
+        (item) => `${item?.service}-${item?.name}` === over.id
+      );
 
       const newOrder = arrayMove(transformPinnedApps, oldIndex, newIndex);
       setPinnedApps(newOrder);
-            saveToLocalStorage('ext_saved_settings','sortablePinnedApps',  newOrder)
+      saveToLocalStorage('ext_saved_settings', 'sortablePinnedApps', newOrder);
-            setSettingsLocalLastUpdated(Date.now())
+      setSettingsLocalLastUpdated(Date.now());
     }
   };
+
   return (
-        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+    <DndContext
-            <SortableContext items={transformPinnedApps.map((app) => `${app?.service}-${app?.name}`)}>
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragEnd={handleDragEnd}
+    >
+      <SortableContext
+        items={transformPinnedApps.map((app) => `${app?.service}-${app?.name}`)}
+      >
         {transformPinnedApps.map((app) => (
-                    <SortableItem isDesktop={isDesktop} key={`${app?.service}-${app?.name}`} id={`${app?.service}-${app?.name}`} name={app?.name} app={app} />
+          <SortableItem
+            isDesktop={isDesktop}
+            key={`${app?.service}-${app?.name}`}
+            id={`${app?.service}-${app?.name}`}
+            name={app?.name}
+            app={app}
+          />
         ))}
       </SortableContext>
     </DndContext>
   );
 };
-