react-icons/fa#FaServer JavaScript Examples

export function Instances({sailplane, sharedFS}) {
  const [isImportDialogVisible, setIsImportDialogVisible] = useState(false);
  const [isCreateDialogVisible, setIsCreateDialogVisible] = useState(false);
  const [instanceToModifyAccess, setInstanceToModifyAccess] = useState(null);
  const dispatch = useDispatch();
  const main = useSelector((state) => state.main);
  const {instances, instanceIndex} = main;
  const prevInstanceLength = usePrevious(instances.length);

  useEffect(() => {
    if (prevInstanceLength && prevInstanceLength < instances.length) {
      dispatch(setInstanceIndex(instances.length - 1));
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [instances.length, prevInstanceLength]);

  const createInstance = async (isEncrypted) => {
    setIsCreateDialogVisible(false);

    const address = await sailplaneUtil.determineAddress(sailplane, {
      enc: isEncrypted,
    });
    const driveName = sailplaneUtil.driveName(address);

    dispatch(addInstance(driveName, address.toString(), false, isEncrypted));
  };

  return (
    <div style={styles.container}>
      <UserHeader
        sailplane={sailplane}
        title={'Drives'}
        iconComponent={FaServer}
      />

      <div style={styles.toolsContainer}>
        <div style={styles.tools}>
          <>
            <ToolItem
              className={'importInstance'}
              defaultColor={primary45}
              changeColor={primary4}
              iconComponent={FiUpload}
              title={'Import drive'}
              onClick={() => setIsImportDialogVisible(true)}
            />

            <ToolItem
              className={'addInstance'}
              defaultColor={primary45}
              changeColor={primary4}
              iconComponent={FiPlusCircle}
              title={'Create drive'}
              onClick={() => setIsCreateDialogVisible(true)}
            />
          </>
        </div>
      </div>

      <div style={styles.instances}>
        {instances.map((instance, index) => (
          <Instance
            instanceIndex={index}
            key={instance.address.toString()}
            data={instance}
            selected={instance === instances[instanceIndex]}
            onClick={() => {
              dispatch(setInstanceIndex(index));
            }}
            onDelete={() => {
              dispatch(removeInstance(index));
            }}
            onAccess={() => {
              dispatch(setInstanceIndex(index));
              setTimeout(() => setInstanceToModifyAccess(instance), 500);
            }}
          />
        ))}
      </div>

      {instanceToModifyAccess ? (
        <InstanceAccessDialog
          onClose={() => setInstanceToModifyAccess(null)}
          instanceToModifyAccess={instanceToModifyAccess}
          sharedFS={sharedFS}
        />
      ) : null}

      <NewDriveDialog
        isVisible={isCreateDialogVisible}
        onClose={() => setIsCreateDialogVisible(false)}
        onPrivate={() => createInstance(true)}
        onPublic={() => createInstance(false)}
      />

      {isImportDialogVisible ? (
        <ImportDriveDialog
          sharedFS={sharedFS}
          onClose={() => setIsImportDialogVisible(false)}
          isVisible={isImportDialogVisible}
          sailplane={sailplane}
          instances={instances}
        />
      ) : null}

      <StatusBar />
    </div>
  );
}

export function LeftPanel({
  setCurrentRightPanel,
  currentRightPanel,
  isDownload,
}) {
  const isSmallScreen = useIsSmallScreen();
  const [isMobileOpen, setIsMobileOpen] = useState(false);

  const styles = {
    container: {
      position: 'relative',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'space-between',
      backgroundColor: primary45,
      color: '#FFF',
      padding: `${isSmallScreen ? 8 : 20}px 10px 0px 10px`,
      minWidth: 200,
      fontFamily: 'Open Sans',
      paddingBottom: 0,
    },
    logo: {
      display: 'inline-block',
      fontFamily: 'MuseoModerno',
      color: '#FFF',
      fontSize: 24,
      fontWeight: 400,
      marginBottom: isSmallScreen && !isMobileOpen ? 8 : 20,
      textAlign: 'center',
      justifyContent: 'center',
      alignItems: 'center',
      userSelect: 'none',
      cursor: 'pointer',
      lineHeight: '24px',
    },
    settingsBlock: {
      bottom: 0,
      width: '100%',
    },
    mobilePadding: {
      paddingBottom: 6,
    },
    menuIcon: {
      position: 'absolute',
      top: isSmallScreen ? 16 : 25,
      left: 14,
    },
    logoContainer: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
    footer: {
      textAlign: 'center',
      marginBottom: 8,
      fontSize: 13,
      lineHeight: '14px',
      fontFamily: 'Open Sans',
    },
    iconGithub: {
      cursor: 'pointer',
    },
    githubTxt: {
      fontSize: 10,
      userSelect: 'none',
    },
    icon: {
      position: 'relative',
      top: 6,
      width: 30,
    },
    logoTitle: {
      display: 'inline-flex',
    },
  };

  let iconComponent = FaBars;
  if (isMobileOpen) {
    iconComponent = FaTimes;
  }

  const IconComponent = iconComponent;

  return (
    <div style={styles.container}>
      {isSmallScreen ? (
        <IconComponent
          color={'#FFF'}
          size={24}
          style={styles.menuIcon}
          onClick={() => {
            setIsMobileOpen(!isMobileOpen);
          }}
        />
      ) : null}
      <div>
        <div style={styles.logoContainer}>
          <div
            style={styles.logo}
            onClick={() => {
              document.location = `${
                window.location.origin + window.location.pathname
              }`;
            }}>
            <img src={logo} style={styles.icon} />
            <div style={styles.logoTitle}>Sailplane</div>
          </div>
        </div>
        {(isMobileOpen || !isSmallScreen) && !isDownload ? (
          <>
            <PanelItem
              title={'Files'}
              iconComponent={FaFolderOpen}
              selected={currentRightPanel === 'files'}
              onClick={() => {
                setIsMobileOpen(false);
                setCurrentRightPanel('files');
              }}
            />
            <PanelItem
              title={'Drives'}
              iconComponent={FaServer}
              selected={currentRightPanel === 'instances'}
              onClick={() => {
                setIsMobileOpen(false);
                setCurrentRightPanel('instances');
              }}
            />
            <PanelItem
              title={'Contacts'}
              iconComponent={FaAddressBook}
              selected={currentRightPanel === 'contacts'}
              onClick={() => {
                setIsMobileOpen(false);
                setCurrentRightPanel('contacts');
              }}
            />

            {/*<div style={styles.settingsBlock}>*/}
            {/*  <PanelItem*/}
            {/*    title={'Settings'}*/}
            {/*    selected={currentRightPanel === 'settings'}*/}
            {/*    onClick={() => setCurrentRightPanel('settings')}*/}
            {/*    iconComponent={FaCog}*/}
            {/*  />*/}
            {/*</div>*/}
          </>
        ) : (
          <div style={styles.mobilePadding} />
        )}
        {isDownload ? (
          <>
            <div style={styles.settingsBlock}>
              <PanelItem
                title={'Home'}
                onClick={() =>
                  (document.location =
                    'https://cypsela.github.io/sailplane-web/#/')
                }
                iconComponent={FaHome}
              />
            </div>
            <div style={styles.settingsBlock}>
              <PanelItem
                title={'Downloads'}
                onClick={() => {}}
                iconComponent={FaDownload}
                selected={true}
              />
            </div>
          </>
        ) : null}
      </div>
      {!isSmallScreen ? (
        <div style={styles.footer}>
          <a
            href={'https://github.com/cypsela/sailplane-web'}
            target={'_blank'}
            rel={'noopener'}>
            <FaGithub color={primary15} size={20} style={styles.iconGithub} />
          </a>
          <div style={styles.githubTxt}>Source</div>
        </div>
      ) : null}
    </div>
  );
}