react-icons/fi#FiPlusCircle JavaScript Examples

export default function AccessDialogPanel({
  type,
  admins,
  addUser,
  users,
  myID,
  message,
}) {
  const [addMode, setAddMode] = useState(false);
  const [isContactModalVisible, setIsContactModalVisible] = useState(false);

  return (
    <div style={styles.panel}>
      <div style={styles.panelTitle}>
        {!addMode ? (
          <>
            <div style={styles.third} />
            <div style={styles.third}>{capitalize(type)}s</div>
          </>
        ) : null}
        <div
          style={{
            ...styles.adminTools,
            ...styles.third,
            justifyContent: 'flex-end',
            width: addMode ? '100%' : '30%',
          }}>
          {admins.includes(myID) && addUser ? (
            <>
              <ToolItem
                iconComponent={FiPlusCircle}
                title={`Add ${type}`}
                changeColor={primary4}
                defaultColor={primary4}
                onClick={() => setIsContactModalVisible(true)}
              />
            </>
          ) : null}
        </div>
      </div>
      <div style={styles.panelBody}>
        <div style={styles.users}>
          {users?.length === 0 ? (
            <div style={styles.messageText}>{message}</div>
          ) : users === null ? (
            <div style={styles.messageText}>Loading...</div>
          ) : (
            <div>
              {users.map((user) => (
                <UserItem key={user} pubKey={user} myID={myID} />
              ))}
            </div>
          )}
        </div>
      </div>
      <ContactModal
        isVisible={isContactModalVisible}
        onClose={() => setIsContactModalVisible(false)}
        onSelected={async (userID) => {
          await addUser(userID);
          setAddMode(false);
        }}
      />
    </div>
  );
}

export function Contacts({sailplane, sharedFS}) {
  const contacts = useSelector((state) => state.main.contacts);

  const myID = sharedFS.current?.running
    ? compressKey(sharedFS.current.identity.publicKey)
    : null;

  const [isAddContactDialogVisible, setIsAddContactDialogVisible] = useState(
    false,
  );

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

      <div style={styles.toolsContainer}>
        <div style={styles.tools}>
          <>
            <ToolItem
              className={'addContact'}
              defaultColor={primary45}
              changeColor={primary4}
              iconComponent={FiPlusCircle}
              title={'Add contact'}
              onClick={() => setIsAddContactDialogVisible(true)}
            />
          </>
        </div>
      </div>

      <div style={styles.contacts}>
        <Contact pubKey={myID} myID={myID} key={'myid'} />
        {contacts
          ? contacts.map((contact, index) => (
              <Contact
                key={index}
                pubKey={contact.pubKey}
                label={contact.label}
              />
            ))
          : null}
      </div>

      <AddContactDialog
        isVisible={isAddContactDialogVisible}
        onClose={() => setIsAddContactDialogVisible(false)}
        contacts={contacts}
        myID={myID}
      />

      <StatusBar />
    </div>
  );
}

function PackAppsList({ notLoggedIn = false, providedApps, reorderEnabled, onListUpdate, allApps}){

    const [apps, setApps] = useState([]);
    const [, updateState] = useState();
    const forceUpdate = useCallback(() => updateState({}), []);
    const [showAdd, setShowAdd] = useState(false);

    useEffect(() => {
        setApps(providedApps)
    }, [])
    
    if(!reorderEnabled){
        return (
          <ul className={`${styles.appsList} ${styles.noDragList}`}> 
            {apps.map((app) => (
              <div className={styles.appCard} key={app._id}>
                <SingleApp app={app} pack={true} displaySelect={true}/>
              </div>
            ))}
          </ul>
        );
    }

    const onDragEnd = (result) => {
      if (!result.destination) {
        return;
      }

      if (result.destination.index === result.source.index) {
        return;
      }

      const updatedApps = reorder(
        apps,
        result.source.index,
        result.destination.index
      );


      onListUpdate(updatedApps)

      setApps(updatedApps);
    }

    const manageUpdates = (id) => {
      const updatedApps = apps.filter(i => i._id !== id);
      setApps(updatedApps);
      onListUpdate(updatedApps);
    }

    const handleSelect = (app, isSelected) => {
      let existingApps = apps;

      if (isSelected) {
        existingApps.push(app);
      } else {
        existingApps = existingApps.filter(a => a._id !== app._id);
      }

      setApps(existingApps);
      onListUpdate(existingApps);
      
      forceUpdate();
    }

    const closeModal = () => {
      setShowAdd(false);
    }

    return (
      <>
        <h2>Apps in this pack</h2>
        {!notLoggedIn && <p>Tip! Drag and drop any app to re-order how they appear in your pack.</p>}

        <button className={`button center ${apps.length === 0 ? '' : 'subtle'}`} onClick={() => setShowAdd(!showAdd)}><FiPlusCircle/> {`Add ${apps.length != 0 ? "More" : ""} Apps`}</button><br/>

        <Modal
          isOpen={showAdd}
          onRequestClose={closeModal}
          className={styles.addModal}
          overlayClassName={styles.modalOverlay}
          contentLabel="Example Modal"
        >
          <div className={styles.modalHeader}>
            <h2>Add Apps</h2>
            <FiXCircle onClick={closeModal}/>
          </div>
          <Search apps={allApps} preventGlobalSelect={handleSelect} isPackView={true} alreadySelected={apps} limit={4}/>
        </Modal>
   
        {notLoggedIn ? <p>You need to login first before you can view the apps in this pack.</p> : (
          <DragDropContext onDragEnd={onDragEnd}>
            <Droppable droppableId="list">
              {(provided) => (
                <ul
                  ref={provided.innerRef}
                  {...provided.droppableProps}
                  className={styles.appsList}
                >
                  <AppsList apps={apps} onListUpdate={manageUpdates} />
                  {provided.placeholder}
                </ul>
              )}
            </Droppable>
          </DragDropContext>
        ) }
      </>
    );

}

export default function ContactModal({isVisible, onClose, onSelected}) {
  const contacts = useSelector((state) => state.main.contacts);
  const [isAddContactDialogVisible, setIsAddContactDialogVisible] = useState(
    false,
  );

  const styles = {
    container: {
      maxHeight: 400,
    },
    title: {
      fontSize: 18,
      fontWeight: 600,
    },
    toolsContainer: {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'flex-start',
      alignItems: 'center',
      marginTop: 2,
      marginBottom: 4,
      color: primary45,
      fontSize: 12,
    },
    tools: {
      width: '100%',
      display: 'flex',
      justifyContent: 'flex-end',
      alignItems: 'center',
      color: primary45,
      fontSize: 12,
      backgroundColor: primary15,
      borderRadius: 2,
      padding: 2,
      border: `1px solid ${lightBorder}`,
    },
    noContacts: {
      marginTop: 8,
    },
  };

  return (
    <Dialog
      positionTop={1}
      onClose={onClose}
      isVisible={isVisible}
      title={'Contacts'}
      body={
        <div style={styles.container}>
          <div style={styles.toolsContainer}>
            <div style={styles.tools}>
              <>
                <ToolItem
                  className={'addContact'}
                  defaultColor={primary45}
                  changeColor={primary4}
                  iconComponent={FiPlusCircle}
                  title={'Add contact'}
                  onClick={() => setIsAddContactDialogVisible(true)}
                />
              </>
            </div>
          </div>

          {contacts?.length ? (
            contacts.map((contact, i) => (
              <Contact
                key={i}
                onClick={() => {
                  onSelected(contact.pubKey);
                  onClose();
                }}
                label={contact.label}
                pubKey={contact.pubKey}
                hideTools={true}
              />
            ))
          ) : (
            <div style={styles.noContacts}>No existing contacts</div>
          )}

          <AddContactDialog
            isVisible={isAddContactDialogVisible}
            onClose={() => setIsAddContactDialogVisible(false)}
            contacts={contacts}
          />
        </div>
      }
    />
  );
}

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>
  );
}