Qortal-Hub/src/components/Apps/AppInfo.tsx

import React, { useEffect, useMemo, useState } from 'react';
import {
  AppCircle,
  AppCircleContainer,
  AppDownloadButton,
  AppDownloadButtonText,
  AppInfoAppName,
  AppInfoSnippetContainer,
  AppInfoSnippetLeft,
  AppInfoSnippetMiddle,
  AppInfoUserName,
  AppsCategoryInfo,
  AppsCategoryInfoLabel,
  AppsCategoryInfoSub,
  AppsCategoryInfoValue,
  AppsInfoDescription,
  AppsLibraryContainer,
  AppsWidthLimiter,
} from './Apps-styles';
import { Avatar, Box, useTheme } from '@mui/material';
import { getBaseApiReact } from '../../App';
import LogoSelected from '../../assets/svgs/LogoSelected.svg';
import { Spacer } from '../../common/Spacer';
import { executeEvent } from '../../utils/events';
import { AppRating } from './AppRating';
import {
  settingsLocalLastUpdatedAtom,
  sortablePinnedAppsAtom,
} from '../../atoms/global';
import { saveToLocalStorage } from './AppsNavBarDesktop';
import { useRecoilState, useSetRecoilState } from 'recoil';

export const AppInfo = ({ app, myName }) => {
  const isInstalled = app?.status?.status === 'READY';
  const [sortablePinnedApps, setSortablePinnedApps] = useRecoilState(
    sortablePinnedAppsAtom
  );
  const theme = useTheme();

  const isSelectedAppPinned = !!sortablePinnedApps?.find(
    (item) => item?.name === app?.name && item?.service === app?.service
  );
  const setSettingsLocalLastUpdated = useSetRecoilState(
    settingsLocalLastUpdatedAtom
  );

  return (
    <AppsLibraryContainer
      sx={{
        height: '100%',
        justifyContent: 'flex-start',
      }}
    >
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          maxWidth: '500px',
          width: '90%',
        }}
      >
        <Spacer height="30px" />

        <AppsWidthLimiter>
          <AppInfoSnippetContainer>
            <AppInfoSnippetLeft
              sx={{
                flexGrow: 1,
                gap: '18px',
              }}
            >
              <AppCircleContainer
                sx={{
                  width: 'auto',
                }}
              >
                <AppCircle
                  sx={{
                    border: 'none',
                    height: '100px',
                    width: '100px',
                  }}
                >
                  <Avatar
                    sx={{
                      height: '43px',
                      width: '43px',
                      '& img': {
                        objectFit: 'fill',
                      },
                    }}
                    alt={app?.name}
                    src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${
                      app?.name
                    }/qortal_avatar?async=true`}
                  >
                    <img
                      style={{
                        width: '43px',
                        height: 'auto',
                      }}
                      src={LogoSelected}
                      alt="center-icon"
                    />
                  </Avatar>
                </AppCircle>
              </AppCircleContainer>

              <AppInfoSnippetMiddle>
                <AppInfoAppName>
                  {app?.metadata?.title || app?.name}
                </AppInfoAppName>

                <Spacer height="6px" />

                <AppInfoUserName>{app?.name}</AppInfoUserName>

                <Spacer height="3px" />
              </AppInfoSnippetMiddle>
            </AppInfoSnippetLeft>
          </AppInfoSnippetContainer>

          <Spacer height="11px" />
          <Box
            sx={{
              width: '100%',
              display: 'flex',
              alignItems: 'center',
              gap: '20px',
            }}
          >
            <AppDownloadButton
              onClick={() => {
                setSortablePinnedApps((prev) => {
                  let updatedApps;

                  if (isSelectedAppPinned) {
                    // Remove the selected app if it is pinned
                    updatedApps = prev.filter(
                      (item) =>
                        !(
                          item?.name === app?.name &&
                          item?.service === app?.service
                        )
                    );
                  } else {
                    // Add the selected app if it is not pinned
                    updatedApps = [
                      ...prev,
                      {
                        name: app?.name,
                        service: app?.service,
                      },
                    ];
                  }

                  saveToLocalStorage(
                    'ext_saved_settings',
                    'sortablePinnedApps',
                    updatedApps
                  );
                  return updatedApps;
                });
                setSettingsLocalLastUpdated(Date.now());
              }}
              sx={{
                backgroundColor: theme.palette.background.paper,
                height: '29px',
                maxWidth: '320px',
                opacity: isSelectedAppPinned ? 0.6 : 1,
                width: '100%',
              }}
            >
              <AppDownloadButtonText>
                {isSelectedAppPinned
                  ? 'Unpin from dashboard'
                  : 'Pin to dashboard'}
              </AppDownloadButtonText>
            </AppDownloadButton>

            <AppDownloadButton
              onClick={() => {
                executeEvent('addTab', {
                  data: app,
                });
              }}
              sx={{
                backgroundColor: isInstalled
                  ? '#0091E1'
                  : theme.palette.background.paper,
                height: '29px',
                maxWidth: '320px',
                width: '100%',
              }}
            >
              <AppDownloadButtonText>
                {isInstalled ? 'Open' : 'Download'}
              </AppDownloadButtonText>
            </AppDownloadButton>
          </Box>
        </AppsWidthLimiter>

        <Spacer height="20px" />

        <AppsWidthLimiter>
          <AppsCategoryInfo>
            <AppRating ratingCountPosition="top" myName={myName} app={app} />

            <Spacer width="16px" />

            <Spacer
              backgroundColor={theme.palette.background.paper}
              height="40px"
              width="1px"
            />

            <Spacer width="16px" />

            <AppsCategoryInfoSub>
              <AppsCategoryInfoLabel>Category:</AppsCategoryInfoLabel>

              <Spacer height="4px" />

              <AppsCategoryInfoValue>
                {app?.metadata?.categoryName || 'none'}
              </AppsCategoryInfoValue>
            </AppsCategoryInfoSub>
          </AppsCategoryInfo>

          <Spacer height="30px" />

          <AppInfoAppName>About this Q-App</AppInfoAppName>
        </AppsWidthLimiter>

        <Spacer height="20px" />

        <AppsInfoDescription>
          {app?.metadata?.description || 'No description'}
        </AppsInfoDescription>
      </Box>
    </AppsLibraryContainer>
  );
};