react-icons/fi#FiShare2 JavaScript Examples

ContextMenu = () => {
  return (
    <>
      <Menu id={'menu-id'}>
        <Item
          className={'MenuItem'}
          onClick={(obj) => obj.props.handleDownload()}>
          <FiDownload size={16} style={styles.icon} />
          <span style={{...styles.menuItem}}>Download</span>
        </Item>

        <Item className={'MenuItem'} onClick={(obj) => obj.props.handleEdit()}>
          <FiEdit size={16} style={styles.icon} />
          <span style={{...styles.menuItem}}>Rename</span>
        </Item>

        <Item className={'MenuItem'} onClick={(obj) => obj.props.handleShare()}>
          <FiShare2 size={16} style={styles.icon} />
          <span style={{...styles.menuItem}}>Share</span>
        </Item>

        <Separator />

        <Item
          className={'MenuItem delete'}
          onClick={(obj) => obj.props.handleDelete()}>
          <FiTrash size={16} style={styles.icon} />
          <span style={{...styles.menuItem}}>Delete</span>
        </Item>
      </Menu>
      <Menu id={'menu-id-no-share'}>
        <Item className={'MenuItem'} onClick={(obj) => obj.props.handleDownload()}>
          <FiDownload size={16} style={styles.icon} />
          <span style={{...styles.menuItem}}>Download</span>
        </Item>

        <Item className={'MenuItem'} onClick={(obj) => obj.props.handleEdit()}>
          <FiEdit size={16} style={styles.icon} />
          <span style={{...styles.menuItem}}>Rename</span>
        </Item>

        <Separator />

        <Item className={'MenuItem delete'} onClick={(obj) => obj.props.handleDelete()}>
          <FiTrash size={16} style={styles.icon} />
          <span style={{...styles.menuItem}}>Delete</span>
        </Item>
      </Menu>
    </>
  );
}

Share = ({articleURL, articleName, hideShareText = false}) => {
  const URL = siteUrl(articleURL)
  const sharePlatforms = [
    {
      name: 'Facebook',
      url: `https://www.facebook.com/sharer/sharer.php?u=${URL}`,
    },
    {
      name: 'Twitter',
      url: `https://twitter.com/intent/tweet?text=${articleName}&url=${URL}`,
    },
    {
      name: 'LinkedIn',
      url: `http://www.linkedin.com/shareArticle?url=${URL}`,
    },
    {
      name: 'WhatsApp',
      url: `https://wa.me/?text=${encodeURIComponent(`${articleName} ${URL}`)}`,
    },
  ]

  return (
    <div sx={{mt: hideShareText ? 2 : 4}}>
      {hideShareText ? null : (
        <Styled.h3 sx={{textAlign: 'center'}}>
          Share
          <FiShare2
            sx={{mx: 2, mb: -1}}
            title='Share this article on different platforms.'
          />
        </Styled.h3>
      )}
      <div sx={flexbox}>
        {sharePlatforms.map((platform, index) => {
          return (
            <Icon
              name={platform.name}
              url={platform.url}
              style={{
                color: 'secondary',
                fontSize: hideShareText ? [3] : [3, 4, 5],
                mx: 3,
                my: 1,
              }}
              key={index}
            />
          )
        })}
      </div>
    </div>
  )
}

SingleApp = ({ app, all, onVersionChange = false, large = false, showTime = false, pack = false, displaySelect = true, preventGlobalSelect, hideBorder=false, preSelected=false}) => {
  const [selected, setSelected] = useState(false);
  const { selectedApps, setSelectedApps } = useContext(SelectedContext);

  const [version, setVersion] = useState(app.latestVersion);

  if (!app.selectedVersion) app.selectedVersion = version;

  if (app.versions.length > 1) {
    app.versions = app.versions.sort((a, b) =>
      compareVersion(b.version, a.version)
    );
    // make sure latest version is sorted
    app.latestVersion = app.versions[0].version;
  }

  useEffect(() => {
    if(preSelected){
      setSelected(true);
      return;
    }

    let found = selectedApps.find((a) => a._id === app._id);

    if (!found){
      if(selected){
        setSelected(false);
      }
      
      return;
    };

    if (found.selectedVersion !== app.latestVersion) {
      setVersion(found.selectedVersion);
    }

    setSelected(true);    
  }, [selectedApps, app._id]);

  let handleAppSelect = () => {
    if (preventGlobalSelect) {
      preventGlobalSelect(app, !selected);
      setSelected(!selected);
      return;
    }

    let found = selectedApps.findIndex((a) => a._id === app._id);
    
    if (found !== -1) {
      let updatedSelectedApps = selectedApps.filter(
        (a, index) => index !== found
      );

      setSelectedApps(updatedSelectedApps);
      setSelected(false);
      
    } else if(app){
      setSelected(true);

      if (all) {
        app = all.find((i) => app._id == i._id);
        setSelectedApps([...selectedApps, app]);
      } else {
        setSelectedApps([...selectedApps, app]);
      }
    }

  };


  if (!app && !app.img || !app.name) return <></>;

  let VersionSelector = () => {
    return (
      <div className={styles.versions}>
        <select
          className={styles.versionSelector}
          value={version}
          onClick={(e) => e.stopPropagation()}
          id="v-selector"
          name="Select app version"
          onChange={(e) => {
            setVersion(e.target.value);
            app.selectedVersion = e.target.value;

            if (selected) {
              let found = selectedApps.find((a) => a._id === app._id);
              found.selectedVersion = e.target.value;

              if(onVersionChange) onVersionChange();
            }
          }}
        >
          {app.versions.map((v) => {
            return (
              <option key={v.version} value={v.version}>
                v{v.version}
              </option>
            );
          })}
        </select>
        <FiChevronDown/>
        {app.versions.length > 1 && (
          <span>
            <label htmlFor="v-selector">
              ({app.versions.length - 1} other{" "}
              {app.versions.length - 1 > 1 ? "versions" : "version"} available)
            </label>
          </span>
        )}
      </div>
    );
  };

  const handleShare = () => {
    const link = `https://twitter.com/intent/tweet?text=${encodeURIComponent(`Checkout ${app.name} by ${app.publisher} on @winstallHQ:`)}&url=${encodeURIComponent(`https://winstall.app/apps/${app._id}`)}`

    window.open(link)
  }

  return (
    <li
      key={app._id}
      // onClick={handleAppSelect}
      className={`${hideBorder ? styles.noBorder: "" }${large ? styles.large : ""} ${pack ? styles.pack : ""} ${styles.single} ${
        selected ? styles.selected : ""
      }`}
    >
      <div className={styles.info}>
        <h3>
          {large ? (
            <>
              <AppIcon id={app._id} name={app.name} icon={app.icon} />
              {app.name}
            </>
          ) : (
            <Link href="/apps/[id]" as={`/apps/${app._id}`} prefetch={false}>
              <a>
                <AppIcon id={app._id} name={app.name} icon={app.icon} />
                <p>{app.name}</p>
              </a>
            </Link>
          )}

          {displaySelect &&  (
            <button
              className={styles.selectApp}
              onClick={handleAppSelect}
              aria-label={selected ? "Unselect app" : "Select app"}
            >
              <FiPlus />
            </button>
          )}
        </h3>

        {!pack && <Description desc={app.desc} id={app._id} full={large} />}
      </div>

      {large && <Copy id={app._id} version={version} latestVersion={app.latestVersion} />}
      <ul className={styles.metaData}>
        {!large && (
          <li>
            <Link href="/apps/[id]" as={`/apps/${app._id}`} prefetch={false}>
              <a>
                <FiInfo />
                View App
              </a>
            </Link>
          </li>
        )}

        {(showTime || large) && (
          <li>
            <FiClock />
            <span>Last updated {timeAgo(app.updatedAt)}</span>
          </li>
        )}

        {!pack && (
          <li className={app.versions.length > 1 ? styles.hover : ""}>
            <FiPackage />
            {app.versions.length > 1 ? (
              <VersionSelector />
            ) : (
              <span>v{app.selectedVersion}</span>
            )}
          </li>
        )}

        <li>
          <Link href={`/apps?q=${`publisher: ${app.publisher}`}`}>
            <a>
              <FiCode />
              Other apps by {app.publisher}
            </a>
          </Link>
        </li>

        {app.homepage && large && (
          <li>
            <a
              href={`${app.homepage}?ref=winstall`}
              target="_blank"
              rel="noopener noreferrer"
              onClick={(e) => e.stopPropagation()}
            >
              <FiExternalLink />
              View Site
            </a>
          </li>
        )}

        {!pack && (
          <li>
            <a
              href={`${
                app.versions.find((i) => i.version === app.selectedVersion)
                  .installers[0]
              }`}
              onClick={(e) => e.stopPropagation()}
            >
              <FiDownload />
              Download{" "}
              {app.versions[0].installerType
                ? `(.${app.versions[0].installerType.toLowerCase()})`
                : ""}
            </a>
          </li>
        )}

        {large && <ExtraMetadata app={app} />}
      </ul>

      {large && app.tags && app.tags.length > 1 && <Tags tags={app.tags} />}

      {large && (
        <div className={styles.largeAppButtons}>
          <button className={styles.selectApp} onClick={handleAppSelect}>
            <FiPlus />
            {selected ? "Unselect" : "Select"} app
          </button>
          <button className={`button ${styles.shareApp}`} onClick={handleShare}>
            <FiShare2 />
            Share
          </button>
        </div>
      )}
    </li>
  );
}

function PackDetail({ pack, creator, error }) {
  const router = useRouter();
  const { selectedApps, setSelectedApps } = useContext(SelectedContext);
  const [user, setUser] = useState();
  const [deleting, setDeleting] = useState(false);
  const [deleteLabel, setDeleteLabel] = useState("Delete Pack");

  useEffect(() => {
    getSession().then(async (session) => {
      if (!session) {
        return;
      }

      setUser(session.user);
    });
  }, []);

  const fallbackMessage = {
    title: "Sorry! We could not load this pack.",
    subtitle: error
      ? `Recieved error: ${error}`
      : "Unfortunately, this pack could not be loaded. Either it does not exist, or something else went wrong. Please try again later.",
  };

  if (!router.isFallback && !pack) {
    return <Error {...fallbackMessage} />;
  }

  const handleSelectAll = () => {
    const updatedList = [...selectedApps, ...pack.apps];

    let uniqueList = [
      ...new Map(updatedList.map((item) => [item["_id"], item])).values(),
    ];

    setSelectedApps(uniqueList);
  };

  const handleShare = () => {
    const link = `https://twitter.com/intent/tweet?text=${encodeURIComponent(
      `Checkout the "${pack.title}" pack by @${creator.screen_name}!`
    )}&url=${encodeURIComponent(
      `https://winstall.app/packs/${pack._id}`
    )}&via=winstallHQ`;

    window.open(link);
  };

  const deletePack = async () => {
    if (!user) return;

    setDeleting(true);
    setDeleteLabel("Deleting...");

    const { response } = await fetchWinstallAPI(`/packs/${pack._id}`, {
      method: "DELETE",
      headers: {
        Authorization: `${user.accessToken},${user.refreshToken}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ creator: pack.creator }),
    });

    if (response && response.msg) {
      setDeleteLabel("Deleted!");
      localStorage.removeItem("ownPacks");
      router.push("/packs");
    }
  };

  const handleDelete = async (e) => {
    if (deleting) return;

    if ("confirm" in window && typeof window.confirm === "function") {
      if (window.confirm("Are you sure you want to delete this pack?")) {
        deletePack();
      }
    } else {
      deletePack();
    }
  };

  return (
    <PageWrapper>
      <div className={styles.content}>
        {router.isFallback ? (
          <AppSkeleton />
        ) : (
          <div>
            <MetaTags
              title={`${pack.title} - winstall`}
              desc={`Includes ${pack.apps[0].name}, ${pack.apps[1].name}, ${pack.apps[2].name}, and more!`}
            />

            <h1>{pack.title}</h1>

            <Link
              href="/users/[id]"
              as={`/users/${creator.id_str}`}
              prefetch={false}
            >
              <a
                className={styles.author}
                title="View other packs by this user"
              >
                <img
                  src={creator.profile_image_url_https}
                  alt="pack creator image"
                />
                @{creator.screen_name}
              </a>
            </Link>

            <p>{pack.desc}</p>
            <p className={styles.time}>
              <FiClock /> Last updated {timeAgo(pack.updatedAt)}{" "}
            </p>

            <div className={styles.packGet}>
              <a
                className="button lightText"
                href="#packScript"
                id={pack.accent}
              >
                <FiCodepen /> Get Pack
              </a>
              <a className="button" onClick={handleSelectAll}>
                <FiPackage /> Select Apps
              </a>
              <a className="button" onClick={handleShare}>
                <FiShare2 /> Share
              </a>
            </div>

            {user && user.id === pack.creator && (
              <div className={styles.packGet}>
                <Link href={`/packs/edit?id=${pack._id}`} prefetch={false}>
                  <a className="button subtle">
                    <FiEdit /> Edit Pack
                  </a>
                </Link>{" "}
                &nbsp;
                <a className="button subtle" onClick={handleDelete}>
                  <FiTrash /> {deleteLabel}
                </a>
              </div>
            )}

            <PackAppsList providedApps={pack.apps} reorderEnabled={false} />

            <ScriptCode apps={pack.apps} />
          </div>
        )}

        {/* <PackAppsList providedApps={packApps} reorderEnabled={false}/> */}
      </div>
    </PageWrapper>
  );
}

export default function Codebox({ location }) {
  const [name, setName] = useState("");
  const [room, setRoom] = useState("");
  const [users, setUsers] = useState("");
  const [text, setText] = useState("<h1>Welcome to CodeRigade</h1>");
  const [config, setConfig] = useState({
    mode: { name: "xml" },
    theme: "material",
    lineNumbers: true,
  });

  const ENDPOINT = "https://coderigade.herokuapp.com/";

  useEffect(() => {
    const { room } = queryString.parse(location.search);

    socket = io(ENDPOINT);

    let name;
    while (!name) {
      // While name is undefined
      name = prompt("Hi, What is your name?");
    }

    setName(name);
    setRoom(room);

    // Initial connection to the room
    socket.emit("join", { name, room }, (error) => {
      if (error) {
        alert(error);
      }
    });
  }, [ENDPOINT, location.search]);

  // Socket.io listeners
  useEffect(() => {
    socket.on("text", (text) => {
      setText(text);
    });

    socket.on("notification", (notification) => {
      if (notification.type === "connect") {
        store.addNotification({
          message: notification.text,
          type: "success",
          insert: "top",
          container: "top-right",
          animationIn: ["animated", "fadeIn"],
          animationOut: ["animated", "fadeOut"],
          dismiss: {
            duration: 5000,
            onScreen: true,
            pauseOnHover: true,
            touch: true,
            showIcon: true,
            click: true,
          },
        });
      } else {
        store.addNotification({
          message: notification.text,
          type: "danger",
          insert: "top",
          container: "top-right",
          animationIn: ["animated", "fadeIn"],
          animationOut: ["animated", "fadeOut"],
          dismiss: {
            duration: 5000,
            onScreen: true,
            pauseOnHover: true,
            touch: true,
            showIcon: true,
            click: true,
          },
        });
      }
    });

    socket.on("changeMode", (mode) => {
      setConfig({ mode: mode });
    });

    socket.on("changeTheme", (theme) => {
      setConfig({ theme: theme });
    });

    socket.on("roomData", ({ users }) => {
      setUsers(users);
      console.log(users);
    });
  }, []);

  const handleChange = (value) => {
    socket.emit("sendText", value);
  };

  const handleMode = (e) => {
    setConfig({ mode: e.target.value });
    socket.emit("sendModeValue", e.target.value);
  };

  const handleTheme = (e) => {
    setConfig({ theme: e.target.value });
    socket.emit("sendThemeValue", e.target.value);
  };

  const handleShare = () => {
    navigator.clipboard.writeText(window.location.href);
    store.addNotification({
      message: "Copied shareable link to clipboard!",
      type: "info",
      insert: "top",
      container: "top-right",
      animationIn: ["animated", "fadeIn"],
      animationOut: ["animated", "fadeOut"],
      dismiss: {
        duration: 5000,
        onScreen: true,
        pauseOnHover: true,
        touch: true,
        showIcon: true,
        click: true,
      },
    });
  };

  const modes = [
    { name: "XML/HTML", code: "xml" },
    { name: "CSS", code: "css" },
    { name: "Javascript", code: "javascript" },
    { name: "C/C++/C#", code: "clike" },
    { name: "Python", code: "python" },
    { name: "PHP", code: "php" },
    { name: "Vue", code: "vue" },
  ];

  const themes = [
    { name: "Material", code: "material" },
    { name: "Monokai", code: "monokai" },
    { name: "Nord", code: "nord" },
    { name: "Ambiance", code: "ambiance" },
    { name: "Eclipse", code: "eclipse" },
  ];

  return (
    <div className="codebox-container">
      <Header />
      <UsersList users={users} />
      <main>
        <div className="controls">
          <ControlDropdown
            default={config.mode}
            options={modes}
            handleDropdown={handleMode}
          />
          <div onClick={handleShare} className="control-icon">
            <span>Share&nbsp;&nbsp;</span>
            <FiShare2 size={15} />
          </div>
          <ControlDropdown
            default={config.mode}
            options={themes}
            handleDropdown={handleTheme}
          />
        </div>
        <CodeMirror
          value={text}
          className="code-editor"
          options={config}
          onBeforeChange={(editor, data, value) => {
            setText(value);
            handleChange(value);
          }}
        />
      </main>
    </div>
  );
}

export function FileItem({
  data,
  sharedFs,
  setCurrentDirectory,
  ipfs,
  isParent,
  snapshot,
  forceIcon,
  onIconClicked,
  readOnly,
}) {
  const {path, type} = data;
  const pathSplit = path.split('/');
  const name = pathSplit[pathSplit.length - 1];
  const mtime = sharedFs && sharedFs.current.fs.read(path)?.mtime;
  const [hoverRef, isHovered] = useHover();
  const [CID, setCID] = useState(null);
  const [fileInfo, setFileInfo] = useState(null);
  const [editMode, setEditMode] = useState(false);
  const [mobileActionsVisible, setMobileActionsVisible] = useState(false);
  const [fileBlob, setFileBlob] = useState(null);
  const [doubleClickRef] = useDoubleClick(() => setEditMode(true));
  const parentPath = pathSplit.slice(0, pathSplit.length - 1).join('/');
  const fileExtension = filenameExt(name);
  const isSmallScreen = useIsSmallScreen();
  const contextID = `menu-id`;
  const contextNoShareID = `menu-id-no-share`;
  const exists = sharedFs && sharedFs.current.fs.exists(path);
  const isTouchDevice = !hasMouse;
  const isUnsharable = sharedFs?.current.encrypted && type === 'dir';
  const hasWrite = sharedFs && doesUserHaveWriteInInstance(sharedFs.current);

  const styles = {
    paddingContainer: {
      paddingTop: 3,
      paddingBottom: 3,
    },
    outer: {
      borderRadius: 4,
      color: primary5,
      fontSize: 14,
      padding: 7,
      marginBottom: 8,
      fontFamily: 'Open Sans',
      userSelect: 'none',
    },
    container: {
      display: 'flex',
      flexDirection: 'row',
      flexWrap: isSmallScreen ? 'wrap' : 'nowrap',
      justifyContent: 'space-between',
      cursor: 'pointer',
    },
    flexItem: {
      width: '100%',
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'flex-start',
      alignItems: 'center',
      flexGrow: 2,
      marginBottom: isSmallScreen ? 10 : 0,
    },
    icon: {
      marginRight: 4,
      width: 30,
      flexShrink: 0,
    },
    tools: {
      display: isTouchDevice ? 'none' : 'flex',
      justifyContent: 'flex-end',
      width: '100%',
      opacity: (isHovered || fileBlob) && !isParent ? 1 : 0,
      pointerEvents: (isHovered || fileBlob) && !isParent ? null : 'none',
      fontSize: 14,
      marginLeft: 0,
    },
    filename: {
      textAlign: 'left',
      whiteSpace: 'nowrap',
      textOverflow: 'ellipsis',
      overflow: 'hidden',
    },
  };

  const dispatch = useDispatch();

  const InputComponent = useTextInput(
    editMode,
    (editNameValue) => rename(editNameValue),
    () => setEditMode(false),
    name,
    {
      placeholder: '',
    },
  );

  const iconComponent = forceIcon ? forceIcon : getIconForPath(type, name);

  const getCID = async () => {
    let tmpCID;

    if (data.cid) {
      tmpCID = data.cid;
    } else if (exists) {
      tmpCID = await sharedFs.current.read(path);
    }

    const tmpFileInfo = await getFileInfoFromCID(tmpCID, ipfs);

    setFileInfo(tmpFileInfo);
    setCID(tmpCID);
    return tmpCID;
  };

  useEffect(() => {
    if (exists && type !== 'dir') {
      getCID();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [path]);

  const IconComponent = iconComponent;

  const rename = async (editNameValue) => {
    try {
      dispatch(setStatus({message: 'Renaming file'}));
      await sharedFs.current.move(path, parentPath, editNameValue);
      dispatch(setStatus({}));
    } catch (e) {
      console.log('Error moving!', e);
    }
  };

  async function getBlob() {
    let blob;

    if (!fileBlob) {
      dispatch(setStatus({message: 'Fetching download'}));
      const handleUpdate = (currentIndex, totalCount) => {
        dispatch(
          setStatus({
            message: `[${getPercent(currentIndex, totalCount)}%] Downloading`,
          }),
        );
      };
      blob = await getBlobFromPath(sharedFs.current, path, handleUpdate);
      dispatch(setStatus({}));
    } else {
      blob = fileBlob;
    }
    return blob;
  }

  const saveAsFile = (blob, name) => {
    if (type === 'dir') {
      name = `${name}.zip`;
    }

    saveAs(blob, name);
  };

  const handleShare = () => {
    setMobileActionsVisible(false);

    dispatch(
      setShareData({
        name,
        CID,
        path,
        pathType: type,
      }),
    );
  };

  const handleDownload = async () => {
    setMobileActionsVisible(false);

    const blob = await getBlob();
    saveAsFile(blob, name);
  };

  const handleEdit = async () => {
    setMobileActionsVisible(false);

    setEditMode(true);
  };

  const handleDelete = async () => {
    setMobileActionsVisible(false);

    dispatch(
      setStatus({
        message: `Deleting ${type === 'dir' ? 'folder' : 'file'}`,
      }),
    );
    await sharedFs.current.remove(path);
    dispatch(setStatus({}));
  };

  const fetchPreview = async () => {
    // Only fetch for audio on click now
    if (!fileBlob && isFileExtensionAudio(fileExtension)) {
      dispatch(setStatus({message: 'Fetching preview'}));
      const blob = await getBlob();
      dispatch(setStatus({}));
      setFileBlob(blob);
    } else {
      setFileBlob(null);
    }
  };

  const handleClick = async (event) => {
    event.stopPropagation();

    if (isTouchDevice && type !== 'dir') {
      setMobileActionsVisible(true);

      return;
    }

    if (onIconClicked) {
      onIconClicked();
      return;
    }

    if (editMode) {
      return;
    }

    if (type === 'dir') {
      setCurrentDirectory(path);
    } else {
      await fetchPreview();
    }
  };

  let mobileActionItems = [
    {
      title: 'Download',
      onClick: handleDownload,
      iconComponent: FiDownload,
    },
  ];

  if (hasWrite) {
    mobileActionItems = mobileActionItems.concat([
      {
        title: 'Rename',
        onClick: handleEdit,
        iconComponent: FiEdit,
      },
      {
        title: 'Delete',
        onClick: handleDelete,
        iconComponent: FiTrash,
        forceColor: lightErrorColor,
      },
    ]);
  }

  if (!isUnsharable) {
    mobileActionItems.unshift({
      title: 'Share',
      onClick: handleShare,
      iconComponent: FiShare2,
    });
  }

  if (type === 'dir') {
    mobileActionItems.unshift({
      title: 'Open folder',
      onClick: () => setCurrentDirectory(path),
      iconComponent: FaFolderOpen,
    });
  } else {
    if ((!fileBlob && isFileExtensionAudio(fileExtension)) || onIconClicked) {
      mobileActionItems.unshift({
        title: 'Open preview',
        onClick: () => {
          setMobileActionsVisible(false);

          if (onIconClicked) {
            onIconClicked();
          } else {
            fetchPreview();
          }
        },
        iconComponent: iconComponent,
      });
    }
  }

  const getContent = () => {
    if (!snapshot) {
      snapshot = {};
    }

    return (
      <div
        ref={hoverRef}
        style={styles.paddingContainer}
        className={`fileItem`}>
        <MobileActionsDialog
          isVisible={mobileActionsVisible}
          name={name}
          fileIcon={iconComponent}
          onClose={() => setMobileActionsVisible(false)}
          items={mobileActionItems}
        />
        <div
          onContextMenu={(event) => {
            event.preventDefault();

            contextMenu.show({
              event,
              id: isUnsharable ? contextNoShareID : contextID,
              props: {
                handleDelete,
                handleDownload,
                handleShare,
                handleEdit,
              },
            });
          }}
          style={{
            ...styles.outer,
            backgroundColor:
              (isHovered ||
                fileBlob ||
                snapshot.isDragging ||
                (snapshot.combineTargetFor && type === 'dir')) &&
              !isTouchDevice
                ? primary15
                : '#FFF',
          }}>
          <div style={styles.container} onClick={handleClick}>
            <div
              style={{
                ...styles.flexItem,
                maxWidth: isSmallScreen ? null : '25%',
              }}>
              <IconComponent color={primary45} size={16} style={styles.icon} />
              {editMode ? (
                <>{InputComponent}</>
              ) : isParent ? (
                '. . /'
              ) : (
                <span ref={doubleClickRef} style={styles.filename}>
                  {name}
                </span>
              )}
            </div>
            <div style={{...styles.flexItem, justifyContent: 'flex-end'}}>
              {type !== 'dir' && fileInfo ? humanFileSize(fileInfo.size) : null}
            </div>
            <div style={{...styles.flexItem, justifyContent: 'flex-end'}}>
              {type !== 'dir' && (mtime || fileInfo?.mtime)
                ? getFileTime(mtime?.secs || fileInfo.mtime.secs)
                : null}
            </div>
            <div style={styles.tools}>
              <div>
                <ToolItem
                  id={`Share-${type}`}
                  iconComponent={FiShare2}
                  changeColor={primary}
                  tooltip={
                    isUnsharable ? 'No encrypted folder sharing yet!' : 'Share'
                  }
                  onClick={handleShare}
                  disabled={isUnsharable}
                />

                <ToolItem
                  id={`Download-${type}`}
                  iconComponent={FiDownload}
                  changeColor={primary}
                  tooltip={'Download'}
                  onClick={handleDownload}
                />

                {!readOnly && hasWrite ? (
                  <>
                    <ToolItem
                      id={`Rename-${type}`}
                      iconComponent={FiEdit}
                      changeColor={primary}
                      tooltip={'Rename'}
                      onClick={handleEdit}
                    />
                    <ToolItem
                      id={`Delete-${type}`}
                      iconComponent={FiTrash}
                      tooltip={'Delete'}
                      onClick={handleDelete}
                    />
                  </>
                ) : null}
              </div>
            </div>
          </div>
          {fileBlob ? (
            <div style={styles.preview}>
              <FilePreview blob={fileBlob} filename={name} />
            </div>
          ) : null}
        </div>
      </div>
    );
  };

  return <>{getContent()}</>;
}

export function FolderTools({
  currentDirectory,
  sharedFs,
  setCurrentDirectory,
  handleOpenUpload,
  isEncrypted,
}) {
  const [addFolderMode, setAddFolderMode] = useState(false);
  const dispatch = useDispatch();
  const pathSplit = currentDirectory.split('/');
  const folderName = pathSplit[pathSplit.length - 1];
  const isSmallScreen = useIsSmallScreen();
  const hasWrite = doesUserHaveWriteInInstance(sharedFs.current);

  const createFolder = async (newFolderName) => {
    try {
      await sharedFs.current.mkdir(currentDirectory, newFolderName);
      setAddFolderMode(false);
    } catch (e) {
      console.log('Mkdir error', e);
      // Todo: handle error
    }
  };

  const InputComponent = useTextInput(
    addFolderMode,
    (newFolderName) => createFolder(newFolderName),
    () => setAddFolderMode(false),
    '',
    {
      placeholder: 'folder name',
    },
  );

  return (
    <div>
      <div style={styles.tools}>
        <div style={styles.leftTools}>
          {isSmallScreen && addFolderMode ? null : (
            <Breadcrumb
              currentDirectory={currentDirectory}
              setCurrentDirectory={setCurrentDirectory}
            />
          )}
        </div>
        <div style={styles.rightTools}>
          {!addFolderMode ? (
            <>
              {currentDirectory !== '/r' ? (
                <ToolItem
                  id={'folderShare'}
                  disabled={isEncrypted}
                  iconComponent={FiShare2}
                  size={18}
                  changeColor={isEncrypted ? '#DDD' : primary4}
                  onClick={() => {
                    dispatch(
                      setShareData({
                        name: folderName,
                        path: currentDirectory,
                        pathType: 'dir',
                      }),
                    );
                  }}
                />
              ) : null}
              <ToolItem
                iconComponent={FiUpload}
                size={18}
                changeColor={primary4}
                onClick={() => {
                  handleOpenUpload();
                }}
              />
              {hasWrite ? (
                <ToolItem
                  id={'addFolder'}
                  iconComponent={FiFolderPlus}
                  size={18}
                  changeColor={primary4}
                  onClick={() => setAddFolderMode(true)}
                />
              ) : null}
            </>
          ) : null}

          {addFolderMode ? <>{InputComponent}</> : null}
        </div>
      </div>
    </div>
  );
}

export default function Article({uid, tags, article, author, articles}) {
  const {asPath: URL} = useRouter()
  const [showComments, setShowComments] = useState(false)
  const [showShareIcons, setShowShareIcons] = useState(false)
  const toggleShareIcons = () => {
    setShowShareIcons(!showShareIcons)
  }
  const toggleComments = () => {
    setShowComments(!showComments)
  }
  return (
    <Fragment>
      <Snakke
        color='#484848'
        top='0px'
        height='5px'
        opacity='1'
        zIndex='10'
        shadow={false}
      />
      <Layout
        page='Article'
        title={RichText.asText(article.title)}
        description={RichText.asText(article.excerpt)}
        image={article.article_image.url}
        pathUrl={URL}>
        <Styled.h1 sx={{textAlign: 'center', mb: 3}}>
          {RichText.asText(article.title)}
        </Styled.h1>
        <div
          sx={{
            fontWeight: 'bold',
            my: 0,
            pt: 0,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            position: 'relative',
          }}>
          <Styled.em
            title={formatDate(article.created)}
            aria-label={formatDate(article.created)}>
            {formatDate(article.created)}
          </Styled.em>
          <Styled.em
            sx={{mx: 4}}
            title='Time to read the article'
            aria-label='Time to read the article'>
            <FiClock style={{marginBottom: '-0.15rem'}} />
            &nbsp;{article.read_time}&nbsp;min read
          </Styled.em>
          <p sx={{m: 0}}>
            <FiShare2
              sx={{
                fontSize: [3],
                mx: 2,
                mb: -1,
                ':hover': {cursor: 'pointer'},
              }}
              title={`Share ${RichText.asText(
                article.title
              )} article on different platforms.`}
              onMouseEnter={toggleShareIcons}
              onClick={toggleShareIcons}
            />
            {/* Share */}
            {showShareIcons && (
              <div
                sx={{
                  position: 'absolute',
                  mt: '-2rem',
                  ml: '2rem',
                  '@media screen and (max-width: 40rem)': {
                    mt: '-2rem',
                    ml: '2.5rem',
                  },
                }}
                onMouseLeave={toggleShareIcons}>
                <Share
                  articleURL={URL}
                  articleName={RichText.asText(article.title)}
                  hideShareText={true}
                />
              </div>
            )}
          </p>
        </div>

        {/* categories */}
        <div
          sx={{
            display: 'flex',
            flexFlow: 'row wrap',
            justifyContent: 'center',
            alignItems: 'center',
            mt: 2,
          }}>
          {article.categories.map(({slug}, index) => {
            return (
              slug && (
                <Chip name={slug} slug={slug} type='category' key={index} />
              )
            )
          })}
        </div>

        <Styled.p
          sx={{
            my: 4,
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          {RichText.asText(article.excerpt)}
        </Styled.p>

        <Banner image={article.article_image} />

        {/* slices */}
        <SliceMachine slices={article.body} />

        <Styled.em sx={{color: 'gray'}}>
          This article was last updated on {formatDate(article.modified)}
        </Styled.em>

        {/* tags */}
        <div
          sx={{
            display: 'flex',
            flexFlow: 'row wrap',
            justifyContent: 'flex-start',
            alignItems: 'center',
            my: 2,
          }}>
          {tags.map((tag, index) => {
            return <Chip name={tag} slug={tag} type='tag' key={index} />
          })}
        </div>

        {/* Share */}
        <Share articleURL={URL} articleName={RichText.asText(article.title)} />

        {author && <Author author={author} />}

        <RelatedArticles
          uid={uid}
          categories={article.categories}
          tags={tags}
          related={articles}
        />

        <p style={{textAlign: 'center'}}>
          <button
            onClick={toggleComments}
            sx={{
              margin: '1rem auto 0.5rem auto',
              py: 2,
              px: 4,
              color: 'text',
              backgroundColor: 'shade2',
              fontFamily: 'light',
              fontSize: [1, 2],
              textTransform: 'uppercase',
              letterSpacing: '2px',
              border: 'none',
              borderRadius: '2rem',
              cursor: 'pointer',
              '&:hover': {
                color: 'accent',
                backgroundColor: 'shade1',
              },
            }}>
            {showComments ? 'Hide' : 'Show'} Comments
          </button>
        </p>

        {/* Disqus comments */}
        {showComments ? (
          <div sx={{mt: 4}}>
            <DisqusComments
              slug={uid}
              title={RichText.asText(article.title)}
              pathname={URL}
            />
          </div>
        ) : null}
      </Layout>
    </Fragment>
  )
}