Merge pull request #1047 from filecoin-project/@aminejv/updates

Improvements and bug fixes
2024-11-26 04:19:49 +03:00 · 2022-01-06 14:42:19 -08:00 · 2022-01-06 14:42:19 -08:00 · 568d8bc4f5
commit 568d8bc4f5
parent 184fe998ca b5b67b94ff
6 changed files with 135 additions and 140 deletions
--- a/common/hooks/index.js
+++ b/common/hooks/index.js
@ -450,7 +450,8 @@ export const useImage = ({ src, maxWidth }) => {
    if (!src) setImgState({ error: true, loaded: true });

    const img = new Image();
-    img.src = src;
+    // NOTE(amine): setting img.src to null will redirect the app to /_/null
+    img.src = src || "";

    img.onload = () => {
      if (maxWidth && img.naturalWidth < maxWidth) {
--- a/components/core/Filter/Filters.js
+++ b/components/core/Filter/Filters.js
@ -15,8 +15,8 @@ import { css } from "@emotion/react";
 import { useFilterContext } from "~/components/core/Filter/Provider";
 import { Link } from "~/components/core/Link";
 import { ButtonPrimary, ButtonSecondary } from "~/components/system/components/Buttons";
-import { motion } from "framer-motion";
 import { FocusRing } from "../FocusRing";
+import { Show } from "~/components/utility/Show";

 /* -------------------------------------------------------------------------------------------------
 *  Shared components between filters
@ -77,7 +77,7 @@ const FilterButton = React.forwardRef(({ children, Icon, image, isSelected, ...p
  </Link>
 ));

-const FilterSection = React.forwardRef(({ title, children, ...props }, ref) => {
+const FilterSection = React.forwardRef(({ title, children, emptyState, ...props }, ref) => {
  const [isExpanded, setExpanded] = React.useState(true);
  const toggleExpandState = () => setExpanded((prev) => !prev);

@ -89,7 +89,7 @@ const FilterSection = React.forwardRef(({ title, children, ...props }, ref) => {
          <Tooltip.Trigger aria-describedby={titleButtonId} aria-expanded={isExpanded}>
            <FocusRing>
              <Typography.H6
-                as={motion.button}
+                as="button"
                layoutId={title + "title"}
                css={STYLES_FILTER_TITLE_BUTTON}
                style={{ paddingLeft: 8, marginBottom: 4 }}
@ -108,25 +108,26 @@ const FilterSection = React.forwardRef(({ title, children, ...props }, ref) => {
        </Tooltip.Root>
      )}
      {isExpanded ? (
-        <RovingTabIndex.Provider axis="vertical">
-          <RovingTabIndex.List>
-            <motion.ul
-              layoutId={title + "section"}
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              css={STYLES_FILTERS_GROUP}
-            >
-              {children}
-            </motion.ul>
-          </RovingTabIndex.List>
-        </RovingTabIndex.Provider>
+        Array.isArray(children) && children?.length === 0 ? (
+          <Show when={emptyState}>
+            <System.P2 color="textGrayDark" style={{ paddingLeft: "8px" }}>
+              {emptyState}
+            </System.P2>
+          </Show>
+        ) : (
+          <RovingTabIndex.Provider axis="vertical">
+            <RovingTabIndex.List>
+              <ul css={STYLES_FILTERS_GROUP}>{children}</ul>
+            </RovingTabIndex.List>
+          </RovingTabIndex.Provider>
+        )
      ) : null}
    </div>
  );
 });

 /* -------------------------------------------------------------------------------------------------
- *  InitialFilters
+ *  Library
 * -----------------------------------------------------------------------------------------------*/

 function Library({ page, onAction }) {
@ -151,11 +152,19 @@ function Library({ page, onAction }) {
  );
 }

+/* -------------------------------------------------------------------------------------------------
+ *  Tags
+ * -----------------------------------------------------------------------------------------------*/
+
 function Tags({ viewer, data, onAction, ...props }) {
  const [, { hidePopup }] = useFilterContext();

  return (
-    <FilterSection title="Tags" {...props}>
+    <FilterSection
+      title="Tags"
+      emptyState="when you tag a file, that tag will automatically show up here"
+      {...props}
+    >
      {viewer.slates.map((slate, index) => (
        <li key={slate.id}>
          <RovingTabIndex.Item index={index}>
@ -175,35 +184,39 @@ function Tags({ viewer, data, onAction, ...props }) {
  );
 }

+/* -------------------------------------------------------------------------------------------------
+ *  Following
+ * -----------------------------------------------------------------------------------------------*/
+
 function Following({ viewer, onAction, ...props }) {
  const [, { hidePopup }] = useFilterContext();

  return (
-    <RovingTabIndex.Provider axis="vertical">
-      <RovingTabIndex.List>
-        <FilterSection title="Following" {...props}>
-          {viewer.following.map((user, index) => (
-            <li key={user.id}>
-              <RovingTabIndex.Item index={index}>
-                <FilterButton
-                  href={`/${user.username}`}
-                  isSelected={false}
-                  onAction={onAction}
-                  // Icon={SVG.ProfileUser}
-                  image={<ProfilePhoto user={user} style={{ borderRadius: "8px" }} size={20} />}
-                  onClick={hidePopup}
-                >
-                  {user.username}
-                </FilterButton>
-              </RovingTabIndex.Item>
-            </li>
-          ))}
-        </FilterSection>
-      </RovingTabIndex.List>
-    </RovingTabIndex.Provider>
+    <FilterSection title="Following" emptyState="follow users to see them here" {...props}>
+      {viewer.following.map((user, index) => (
+        <li key={user.id}>
+          <RovingTabIndex.Item index={index}>
+            <FilterButton
+              href={`/${user.username}`}
+              isSelected={false}
+              onAction={onAction}
+              // Icon={SVG.ProfileUser}
+              image={<ProfilePhoto user={user} style={{ borderRadius: "8px" }} size={20} />}
+              onClick={hidePopup}
+            >
+              {user.username}
+            </FilterButton>
+          </RovingTabIndex.Item>
+        </li>
+      ))}
+    </FilterSection>
  );
 }

+/* -------------------------------------------------------------------------------------------------
+ *  Profile
+ * -----------------------------------------------------------------------------------------------*/
+
 function Profile({ viewer, data, page, ...props }) {
  if (page.id === "NAV_SLATE") {
    data = data.owner;
@ -288,6 +301,10 @@ function Profile({ viewer, data, page, ...props }) {
  );
 }

+/* -------------------------------------------------------------------------------------------------
+ *  ProfileTags
+ * -----------------------------------------------------------------------------------------------*/
+
 function ProfileTags({ data, page, onAction, ...props }) {
  const [, { hidePopup }] = useFilterContext();

@ -297,27 +314,23 @@ function ProfileTags({ data, page, onAction, ...props }) {
  }

  return (
-    <RovingTabIndex.Provider axis="vertical">
-      <RovingTabIndex.List>
-        <FilterSection {...props}>
-          {user?.slates?.map((slate, index) => (
-            <li key={slate.id}>
-              <RovingTabIndex.Item index={index}>
-                <FilterButton
-                  href={`/$/slate/${slate.id}`}
-                  isSelected={slate.id === data?.id}
-                  onAction={onAction}
-                  Icon={slate.isPublic ? SVG.Hash : SVG.SecurityLock}
-                  onClick={hidePopup}
-                >
-                  {slate.slatename}
-                </FilterButton>
-              </RovingTabIndex.Item>
-            </li>
-          ))}
-        </FilterSection>
-      </RovingTabIndex.List>
-    </RovingTabIndex.Provider>
+    <FilterSection {...props}>
+      {user?.slates?.map((slate, index) => (
+        <li key={slate.id}>
+          <RovingTabIndex.Item index={index}>
+            <FilterButton
+              href={`/$/slate/${slate.id}`}
+              isSelected={slate.id === data?.id}
+              onAction={onAction}
+              Icon={slate.isPublic ? SVG.Hash : SVG.SecurityLock}
+              onClick={hidePopup}
+            >
+              {slate.slatename}
+            </FilterButton>
+          </RovingTabIndex.Item>
+        </li>
+      ))}
+    </FilterSection>
  );
 }

--- a/components/core/Upload/Popup.js
+++ b/components/core/Upload/Popup.js
@ -12,6 +12,7 @@ import { Show } from "~/components/utility/Show";
 import { useHover } from "~/common/hooks";
 import { clamp } from "lodash";
 import { useUploadStore } from "~/components/core/Upload/store";
+import { LoaderSpinner } from "~/components/system/components/Loaders";

 import DataMeter from "~/components/core/DataMeter";
 import BlobObjectPreview from "~/components/core/BlobObjectPreview";
@ -27,7 +28,6 @@ const STYLES_POPUP_WRAPPER = (theme) => css`
  bottom: 24px;
  right: 24px;
  z-index: ${theme.zindex.tooltip};
-  box-shadow: ${theme.shadow.lightLarge};
 `;

 const STYLES_DISMISS_BUTTON = (theme) => css`
@ -391,11 +391,15 @@ function Summary({ uploadSummary }) {
                }
              >
                <Match when={file.status === "uploading"}>
-                  <DataMeter
-                    bytes={file.loaded}
-                    maximumBytes={file.total}
-                    style={{ maxWidth: 84, marginTop: 2 }}
-                  />
+                  {file.isLink ? (
+                    <LoaderSpinner style={{ height: 12, width: 12 }} />
+                  ) : (
+                    <DataMeter
+                      bytes={file.loaded}
+                      maximumBytes={file.total}
+                      style={{ maxWidth: 84, marginTop: 2 }}
+                    />
+                  )}
                </Match>
                <Match when={file.status === "failed"}>
                  <System.P3 color="red">failed</System.P3>
--- a/components/core/Upload/store.js
+++ b/components/core/Upload/store.js
@ -161,7 +161,9 @@ export const useUploadStore = create((setUploadState) => {
    onError: handleError,
  });

-  const resetUploadState = () => (uploadProvider.clearUploadCache(), setUploadState(DEFAULT_STATE));
+  const resetUploadState = () => (
+    uploadProvider.clearUploadCache(), setUploadState((prev) => ({ ...prev, state: DEFAULT_STATE }))
+  );

  return {
    state: DEFAULT_STATE,
--- a/components/system/components/GlobalCarousel/index.js
+++ b/components/system/components/GlobalCarousel/index.js
@ -17,7 +17,6 @@ import {
  useDetectTextOverflow,
  useEscapeKey,
  useEventListener,
-  useIsomorphicLayoutEffect,
  useLockScroll,
 } from "~/common/hooks";
 import { Show } from "~/components/utility/Show";
@ -50,7 +49,7 @@ const VisitLinkButton = ({ file }) => {
      rel="noreferrer"
      type="link"
    >
-      <LinkIcon file={file} width={16} height={16} style={{ marginRight: 4 }} />
+      <LinkIcon file={file} width={16} height={16} style={{ marginRight: 4 }} key={file.id} />
      <span style={{ whiteSpace: "nowrap" }}>Visit site</span>
    </System.ButtonTertiary>
  );
@ -142,7 +141,6 @@ const useCarouselJumperControls = () => {

 const STYLES_HEADER_WRAPPER = (theme) => css`
  ${Styles.HORIZONTAL_CONTAINER_CENTERED};
-  position: absolute;
  width: 100%;
  min-height: 64px;
  padding: 13px 24px 10px;
@ -243,42 +241,6 @@ function CarouselHeader({
  };
  useEventListener({ type: "keyup", handler: handleKeyDown });

-  const isJumperOpen =
-    isFileDescriptionVisible ||
-    isMoreInfoVisible ||
-    isEditInfoVisible ||
-    isShareFileVisible ||
-    isEditChannelsVisible;
-
-  const [isHeaderVisible, setHeaderVisibility] = React.useState(true);
-  const timeoutRef = React.useRef();
-
-  const showHeader = () => {
-    clearTimeout(timeoutRef.current);
-    setHeaderVisibility(true);
-  };
-
-  const hideHeader = (ms = 1000) => {
-    timeoutRef.current = setTimeout(() => {
-      if (isJumperOpen) return;
-      setHeaderVisibility(false);
-    }, ms);
-  };
-
-  React.useEffect(() => {
-    hideHeader(3000);
-    return () => clearTimeout(timeoutRef.current);
-  }, []);
-
-  useIsomorphicLayoutEffect(() => {
-    if (isJumperOpen) {
-      showHeader();
-      return;
-    }
-
-    hideHeader();
-  }, [isJumperOpen]);
-
  const headerRef = React.useRef();
  React.useEffect(() => {
    if (headerRef.current) headerRef.current.focus();
@ -320,18 +282,7 @@ function CarouselHeader({
        />
      </ModalPortal>

-      <motion.nav
-        css={STYLES_HEADER_WRAPPER}
-        initial={{ opacity: 0 }}
-        animate={{ opacity: isHeaderVisible ? 1 : 0 }}
-        transition={{ ease: "easeInOut", duration: 0.25 }}
-        onMouseEnter={showHeader}
-        onMouseOver={showHeader}
-        onMouseLeave={hideHeader}
-        onFocus={showHeader}
-        onBlur={hideHeader}
-        {...props}
-      >
+      <nav css={STYLES_HEADER_WRAPPER} {...props}>
        <div>
          <div css={Styles.HORIZONTAL_CONTAINER}>
            <System.H5
@ -483,20 +434,14 @@ function CarouselHeader({
            </div>
          )}
        </div>
-      </motion.nav>
+      </nav>

      <CarouselControls
        enableNextSlide={enableNextSlide}
        enablePreviousSlide={enablePreviousSlide}
        onNextSlide={onNextSlide}
        onPreviousSlide={onPreviousSlide}
-        showControls={isHeaderVisible}
        onClose={onClose}
-        onMouseEnter={showHeader}
-        onMouseOver={showHeader}
-        onMouseLeave={hideHeader}
-        onFocus={showHeader}
-        onBlur={hideHeader}
      />
    </>
  );
@ -783,10 +728,7 @@ function CarouselControls({
  enablePreviousSlide,
  onNextSlide,
  onPreviousSlide,
-  showControls,
  onClose,
-
-  ...props
 }) {
  useCarouselKeyCommands({
    handleNext: onNextSlide,
@ -794,19 +736,41 @@ function CarouselControls({
    handleClose: onClose,
  });

+  const [areControlsVisible, setCarouselVisibility] = React.useState(true);
+  const timeoutRef = React.useRef();
+
+  const showControls = () => {
+    clearTimeout(timeoutRef.current);
+    setCarouselVisibility(true);
+  };
+
+  const hideControls = (ms = 1000) => {
+    timeoutRef.current = setTimeout(() => {
+      setCarouselVisibility(false);
+    }, ms);
+  };
+
+  React.useEffect(() => {
+    hideControls(3000);
+    return () => clearTimeout(timeoutRef.current);
+  }, []);
+
  return (
    <>
      <div
        css={STYLES_CONTROLS_WRAPPER}
        style={{ left: 0, justifyContent: "flex-start" }}
-        {...props}
+        onMouseEnter={showControls}
+        onMouseLeave={hideControls}
+        onFocus={showControls}
+        onBlur={hideControls}
      >
        {enablePreviousSlide ? (
          <System.ButtonPrimitive
            as={motion.button}
            onClick={onPreviousSlide}
            initial={{ opacity: 0 }}
-            animate={{ opacity: showControls ? 1 : 0 }}
+            animate={{ opacity: areControlsVisible ? 1 : 0 }}
            transition={{ ease: "easeInOut", duration: 0.25 }}
            css={STYLES_CONTROLS_BUTTON}
            aria-label="previous slide"
@ -818,14 +782,17 @@ function CarouselControls({
      <div
        css={STYLES_CONTROLS_WRAPPER}
        style={{ right: 0, justifyContent: "flex-end" }}
-        {...props}
+        onMouseEnter={showControls}
+        onMouseLeave={hideControls}
+        onFocus={showControls}
+        onBlur={hideControls}
      >
        {enableNextSlide ? (
          <System.ButtonPrimitive
            as={motion.button}
            onClick={onNextSlide}
            initial={{ opacity: 0 }}
-            animate={{ opacity: showControls ? 1 : 0 }}
+            animate={{ opacity: areControlsVisible ? 1 : 0 }}
            css={STYLES_CONTROLS_BUTTON}
            aria-label="next slide"
          >
--- a/components/system/components/GlobalCarousel/jumpers/EditChannels.js
+++ b/components/system/components/GlobalCarousel/jumpers/EditChannels.js
@ -76,7 +76,7 @@ function ChannelKeyboardShortcut({ searchResults, searchQuery, onAddFileToChanne
  });

  // NOTE(amine): don't show the 'select channel ⏎' hint when the channel is created optimistically
-  if (isFileAdded || !selectedChannel.ownerId) return null;
+  if (isFileAdded || !selectedChannel?.ownerId) return null;

  return (
    <div css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
@ -113,7 +113,15 @@ const STYLES_SEARCH_TAGS_INPUT_WRAPPER = (theme) => css`

 function ChannelInput({ value, searchResults, onChange, onAddFileToChannel, ...props }) {
  const { publicChannels, privateChannels } = searchResults;
-  const showShortcut = publicChannels.length + privateChannels.length === 1;
+  const [isShortcutVisible, setShortcutVisibility] = React.useState();
+
+  React.useEffect(() => {
+    if (value && publicChannels.length + privateChannels.length === 1) {
+      setShortcutVisibility(true);
+    } else {
+      setShortcutVisibility(false);
+    }
+  }, [value]);

  return (
    <div css={[STYLES_SEARCH_TAGS_INPUT_WRAPPER, Styles.CONTAINER_CENTERED]}>
@ -129,7 +137,7 @@ function ChannelInput({ value, searchResults, onChange, onAddFileToChannel, ...p
          {...props}
        />
        <div style={{ position: "absolute", top: "50%", transform: "translateY(-50%)", right: 20 }}>
-          {showShortcut ? (
+          {isShortcutVisible ? (
            <ChannelKeyboardShortcut
              searchQuery={value}
              searchResults={searchResults}
@ -425,7 +433,7 @@ export function EditChannels({ file, viewer, isOpen, onClose, ...props }) {
                channels={isSearching ? searchResults.privateChannels : privateChannels}
                searchQuery={searchQuery}
                onAddFileToChannel={handleAddFileToChannel}
-                onCreateChannel={handleCreateChannel(false)}
+                onCreateChannel={(query) => (handleCreateChannel(false)(query), clearQuery())}
                file={file}
                viewer={viewer}
              />
@ -437,7 +445,7 @@ export function EditChannels({ file, viewer, isOpen, onClose, ...props }) {
                  isCreatingChannel={isSearching && !channelAlreadyExists}
                  channels={isSearching ? searchResults.publicChannels : publicChannels}
                  onAddFileToChannel={handleAddFileToChannel}
-                  onCreateChannel={handleCreateChannel(true)}
+                  onCreateChannel={(query) => (handleCreateChannel(true)(query), clearQuery())}
                />
              </div>
            </Jumper.Item>
@ -493,7 +501,7 @@ export function EditChannelsMobile({ file, viewer, isOpen, onClose }) {
              channels={isSearching ? searchResults.privateChannels : privateChannels}
              searchQuery={searchQuery}
              onAddFileToChannel={handleAddFileToChannel}
-              onCreateChannel={handleCreateChannel(false)}
+              onCreateChannel={(query) => (handleCreateChannel(false)(query), clearQuery())}
            />
            <div style={{ marginTop: 20 }}>
              <Channels
@ -503,7 +511,7 @@ export function EditChannelsMobile({ file, viewer, isOpen, onClose }) {
                isCreatingChannel={isSearching && !channelAlreadyExists}
                channels={isSearching ? searchResults.publicChannels : publicChannels}
                onAddFileToChannel={handleAddFileToChannel}
-                onCreateChannel={handleCreateChannel(true)}
+                onCreateChannel={(query) => (handleCreateChannel(true)(query), clearQuery())}
              />
            </div>
          </MobileJumper.Content>