added internal routing for default to first slate in profile, and added directory to sidebar

common/navigation-data.js

@@ -165,12 +165,12 @@ export const navigation = [
   //   pathname: "/_/search",
   // mainNav: true,
   // },
-  {
-    id: "NAV_DIRECTORY",
-    name: "Directory",
-    pageTitle: "Your Following",
-    pathname: "/_/directory",
-  },
+  // {
+  //   id: "NAV_DIRECTORY",
+  //   name: "Directory",
+  //   pageTitle: "Your Following",
+  //   pathname: "/_/directory",
+  // },
   slatePage,
   {
     id: "NAV_API",

components/core/Application.js

@@ -24,7 +24,7 @@ import SceneSettingsDeveloper from "~/scenes/SceneSettingsDeveloper";
 import SceneAuth from "~/scenes/SceneAuth";
 import SceneSlate from "~/scenes/SceneSlate";
 import SceneActivity from "~/scenes/SceneActivity";
-import SceneDirectory from "~/scenes/SceneDirectory";
+// import SceneDirectory from "~/scenes/SceneDirectory";
 import SceneProfile from "~/scenes/SceneProfile";
 
 // NOTE(jim):
@@ -71,7 +71,7 @@ const SCENES = {
   NAV_ERROR: <SceneError />,
   NAV_SIGN_IN: <SceneAuth />,
   ...(Environment.ACTIVITY_FEATURE_FLAG ? { NAV_ACTIVITY: <SceneActivity /> } : {}),
-  NAV_DIRECTORY: <SceneDirectory />,
+  // NAV_DIRECTORY: <SceneDirectory />,
   NAV_PROFILE: <SceneProfile />,
   NAV_DATA: <SceneFilesFolder />,
   NAV_SLATE: <SceneSlate />,
@@ -374,6 +374,11 @@ export default class ApplicationPage extends React.Component {
       data = response.data;
       pathname = `/${data.owner.username}/${data.slatename}${search}`;
     } else if (page?.id === "NAV_PROFILE") {
+      if (details.id === this.state.viewer?.id) {
+        this.setState({ loading: false });
+        this._handleNavigateTo({ href: "/_/data", redirect: true });
+        return;
+      }
       let response = await Actions.getSerializedProfile(details);
       if (!response || response.error) {
         this.setState({ loading: false });
@@ -381,6 +386,15 @@ export default class ApplicationPage extends React.Component {
         return;
       }
       data = response.data;
+      if (data.slates?.length) {
+        this.setState({ loading: false });
+        this._handleNavigateTo({
+          href: `/${data.username}/${data.slates[0].slatename}`,
+          redirect: true,
+        });
+        return;
+      }
+
       pathname = `/${data.username}${search}`;
     }
 
@@ -473,7 +487,7 @@ export default class ApplicationPage extends React.Component {
 
     const isProfilePage =
       (page.id === "NAV_SLATE" && this.state.data?.ownerId !== this.state.viewer?.id) ||
-      (page.id === "NAV_PROFILE" && this.state.data?.id !== this.state.viewer?.id);
+      page.id === "NAV_PROFILE";
 
     // if (!this.state.loaded) {
     //   return (
@@ -505,7 +519,7 @@ export default class ApplicationPage extends React.Component {
           viewer={this.state.viewer}
         >
           <Filter
-            // isActive={isProfilePage || !!this.state.viewer}
+            isProfilePage={isProfilePage}
             isActive={true}
             viewer={this.state.viewer}
             page={page}

components/core/ApplicationUserControls.js

@@ -182,20 +182,20 @@ export class ApplicationUserControlsPopup extends React.Component {
           text: (
             <div css={STYLES_SECTION_ITEM_HOVER}>
               <Link href={`/$/user/${this.props.viewer.id}`} onAction={this._handleAction}>
-                Profile
-              </Link>
-            </div>
-          ),
-        },
-        {
-          text: (
-            <div css={STYLES_SECTION_ITEM_HOVER}>
-              <Link href={"/_/directory"} onAction={this._handleAction}>
-                Directory
+                Home
               </Link>
             </div>
           ),
         },
+        // {
+        //   text: (
+        //     <div css={STYLES_SECTION_ITEM_HOVER}>
+        //       <Link href={"/_/directory"} onAction={this._handleAction}>
+        //         Directory
+        //       </Link>
+        //     </div>
+        //   ),
+        // },
       ],
       [
         {
@@ -207,8 +207,6 @@ export class ApplicationUserControlsPopup extends React.Component {
             </div>
           ),
         },
-      ],
-      [
         {
           text: (
             <div css={STYLES_SECTION_ITEM_HOVER}>

components/core/Filter/Filters.js

@@ -49,11 +49,12 @@ const STYLES_FILTERS_GROUP = css`
   }
 `;
 
-const FilterButton = ({ children, Icon, isSelected, ...props }) => (
+const FilterButton = ({ children, Icon, image, isSelected, ...props }) => (
   <li>
     <Link {...props}>
       <span as="span" css={[STYLES_FILTER_BUTTON, isSelected && STYLES_FILTER_BUTTON_HIGHLIGHTED]}>
-        <Icon height={16} width={16} style={{ flexShrink: 0 }} />
+        {Icon ? <Icon height={16} width={16} style={{ flexShrink: 0 }} /> : null}
+        {image ? image : null}
         <Typography.P2 as="span" nbrOflines={1} style={{ marginLeft: 6 }}>
           {children}
         </Typography.P2>
@@ -120,6 +121,28 @@ function Tags({ viewer, data, onAction, ...props }) {
   );
 }
 
+function Following({ viewer, data, onAction, ...props }) {
+  const [, { hidePopup }] = useFilterContext();
+
+  return (
+    <FilterSection title="Following" {...props}>
+      {viewer.following.map((user) => (
+        <FilterButton
+          key={user.id}
+          href={`/${user.username}`}
+          isSelected={false}
+          onAction={onAction}
+          // Icon={SVG.ProfileUser}
+          image={<ProfilePhoto user={user} style={{ borderRadius: "8px" }} size={20} />}
+          onClick={hidePopup}
+        >
+          {user.username}
+        </FilterButton>
+      ))}
+    </FilterSection>
+  );
+}
+
 function Profile({ viewer, data, page, onAction, ...props }) {
   if (page.id === "NAV_SLATE") {
     data = data.owner;
@@ -230,4 +253,4 @@ function ProfileTags({ viewer, data, page, onAction, ...props }) {
   );
 }
 
-export { Library, Tags, Profile, ProfileTags };
+export { Library, Tags, Following, Profile, ProfileTags };

components/core/Filter/Popup.js

@@ -66,12 +66,9 @@ const STYLES_SIDEBAR_FILTER_WRAPPER = (theme) => css`
   }
 `;
 
-export function Popup({ viewer, onAction, css, data, page, isMobile, ...props }) {
+export function Popup({ viewer, onAction, css, data, page, isMobile, isProfilePage, ...props }) {
   const [{ popupState }] = useFilterContext();
 
-  const isProfilePage =
-    (page.id === "NAV_SLATE" && data?.ownerId !== viewer?.id) ||
-    (page.id === "NAV_PROFILE" && data?.id !== viewer?.id);
   if (isProfilePage && !isMobile) {
     return null;
   }
@@ -102,6 +99,13 @@ export function Popup({ viewer, onAction, css, data, page, isMobile, ...props })
         onAction={onAction}
         style={{ marginTop: 12 }}
       />
+      <Filters.Following
+        viewer={viewer}
+        data={data}
+        page={page}
+        onAction={onAction}
+        style={{ marginTop: 12 }}
+      />
     </div>
   );
 }

components/core/Filter/Sidebar.js

@@ -56,11 +56,8 @@ const STYLES_SIDEBAR_FILTER_WRAPPER = (theme) => css`
   }
 `;
 
-export function Sidebar({ viewer, onAction, data, page, isMobile }) {
+export function Sidebar({ viewer, onAction, data, page, isMobile, isProfilePage }) {
   const [{ sidebarState }] = useFilterContext();
-  const isProfilePage =
-    (page.id === "NAV_SLATE" && data?.ownerId !== viewer?.id) ||
-    (page.id === "NAV_PROFILE" && data?.id !== viewer?.id);
 
   if ((!isProfilePage || isMobile) && (!sidebarState.isVisible || isMobile)) return null;
 
@@ -98,6 +95,13 @@ export function Sidebar({ viewer, onAction, data, page, isMobile }) {
           viewer={viewer}
           style={{ marginTop: 12 }}
         />
+        <Filters.Following
+          page={page}
+          onAction={onAction}
+          data={data}
+          viewer={viewer}
+          style={{ marginTop: 12 }}
+        />
       </div>
     </div>
   );

components/core/Filter/index.js

@@ -113,7 +113,16 @@ const STYLES_FILTER_CONTENT = (theme) => css`
   ${"" /* margin-top: ${theme.sizes.filterNavbar}px; */}
 `;
 
-export default function Filter({ isActive, viewer, onAction, page, data, isMobile, children }) {
+export default function Filter({
+  isActive,
+  viewer,
+  onAction,
+  page,
+  data,
+  isMobile,
+  children,
+  isProfilePage,
+}) {
   const { results, isSearching } = useSearchStore();
   const showSearchResult = isSearching && !!results;
 
@@ -125,10 +134,6 @@ export default function Filter({ isActive, viewer, onAction, page, data, isMobil
     );
   }
 
-  const isProfilePage =
-    (page.id === "NAV_SLATE" && data?.ownerId !== viewer?.id) ||
-    (page.id === "NAV_PROFILE" && data?.id !== viewer?.id);
-
   return (
     <Provider>
       {isProfilePage && isMobile ? (
@@ -152,6 +157,7 @@ export default function Filter({ isActive, viewer, onAction, page, data, isMobil
               data={data}
               page={page}
               isMobile={isMobile}
+              isProfilePage={isProfilePage}
             />
           </div>
 
@@ -175,7 +181,14 @@ export default function Filter({ isActive, viewer, onAction, page, data, isMobil
         </div>
       </div>
       <div css={STYLES_FILTER_CONTENT}>
-        <Sidebar viewer={viewer} onAction={onAction} data={data} page={page} isMobile={isMobile} />
+        <Sidebar
+          viewer={viewer}
+          onAction={onAction}
+          data={data}
+          page={page}
+          isMobile={isMobile}
+          isProfilePage={isProfilePage}
+        />
         <div style={{ flexGrow: 1 }}>
           {showSearchResult ? (
             <Search.Content viewer={viewer} page={page} onAction={onAction} />

scenes/SceneDirectory.js

@@ -1,354 +0,0 @@
-import * as React from "react";
-import * as Actions from "~/common/actions";
-import * as Constants from "~/common/constants";
-import * as SVG from "~/common/svg";
-
-import { css } from "@emotion/react";
-import { SecondaryTabGroup } from "~/components/core/TabGroup";
-import { Boundary } from "~/components/system/components/fragments/Boundary";
-import { PopoverNavigation } from "~/components/system/components/PopoverNavigation";
-import { Link } from "~/components/core/Link";
-
-import ScenePage from "~/components/core/ScenePage";
-import ScenePageHeader from "~/components/core/ScenePageHeader";
-import EmptyState from "~/components/core/EmptyState";
-import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
-import ProfilePhoto from "~/components/core/ProfilePhoto";
-
-const STYLES_USER_ENTRY = css`
-  display: grid;
-  grid-template-columns: auto 1fr;
-  align-items: center;
-  font-size: ${Constants.typescale.lvl1};
-  cursor: pointer;
-  border: 1px solid ${Constants.semantic.borderGrayLight};
-  border-radius: 4px;
-  margin-bottom: 8px;
-  background-color: ${Constants.system.white};
-`;
-
-const STYLES_USER = css`
-  display: grid;
-  grid-template-columns: auto 1fr;
-  align-items: center;
-  margin: 16px;
-  color: ${Constants.system.blue};
-  font-family: ${Constants.font.medium};
-  font-size: ${Constants.typescale.lvl1};
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    margin: 12px 16px;
-  }
-`;
-
-const STYLES_BUTTONS = css`
-  justify-self: end;
-  display: flex;
-  flex-direction: row;
-  margin-right: 16px;
-  justify-content: flex-end;
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    margin-right: 8px;
-  }
-`;
-
-const STYLES_ITEM_BOX = css`
-  position: relative;
-  justify-self: end;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 8px;
-  margin-right: 16px;
-  color: ${Constants.system.grayLight2};
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    margin-right: 8px;
-  }
-`;
-
-const STYLES_ACTION_BUTTON = css`
-  cursor: pointer;
-  padding: 8px;
-  color: ${Constants.system.blue};
-  font-family: ${Constants.font.medium};
-`;
-
-const STYLES_PROFILE_IMAGE = css`
-  background-color: ${Constants.semantic.bgLight};
-  background-size: cover;
-  background-position: 50% 50%;
-  height: 24px;
-  width: 24px;
-  margin-right: 16px;
-  border-radius: 8px;
-  position: relative;
-`;
-
-const STYLES_STATUS_INDICATOR = css`
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  border: 2px solid ${Constants.system.green};
-  background-color: ${Constants.system.green};
-`;
-
-const STYLES_MESSAGE = css`
-  color: ${Constants.system.black};
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  @media (max-width: 1000px) {
-    display: none;
-  }
-`;
-
-const STYLES_NAME = css`
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`;
-
-function UserEntry({ user, button, onClick, message, checkStatus }) {
-  const isOnline = checkStatus({ id: user.id });
-
-  return (
-    <div key={user.username} css={STYLES_USER_ENTRY}>
-      <div css={STYLES_USER} onClick={onClick}>
-        <div css={STYLES_PROFILE_IMAGE}>
-          <ProfilePhoto user={user} size={24} />
-          {isOnline ? <div css={STYLES_STATUS_INDICATOR} /> : null}
-        </div>
-        <span css={STYLES_NAME}>
-          {user.name || `@${user.username}`}
-          {message ? <span css={STYLES_MESSAGE}>{message}</span> : null}
-        </span>
-      </div>
-      {button}
-    </div>
-  );
-}
-
-const STYLES_COPY_INPUT = css`
-  pointer-events: none;
-  position: absolute;
-  opacity: 0;
-`;
-
-const STYLES_MOBILE_HIDDEN = css`
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    display: none;
-  }
-`;
-
-const STYLES_MOBILE_ONLY = css`
-  @media (min-width: ${Constants.sizes.mobile}px) {
-    display: none;
-  }
-`;
-
-export default class SceneDirectory extends React.Component {
-  _ref;
-
-  state = {
-    copyValue: "",
-    contextMenu: null,
-  };
-
-  _handleCopy = (e, value) => {
-    e.stopPropagation();
-    this.setState({ copyValue: value }, () => {
-      this._ref.select();
-      document.execCommand("copy");
-      this._handleHide();
-    });
-  };
-
-  _handleHide = (e) => {
-    this.setState({ contextMenu: null });
-  };
-
-  _handleClick = (e, value) => {
-    e.stopPropagation();
-    e.preventDefault();
-    if (this.state.contextMenu === value) {
-      this._handleHide();
-    } else {
-      this.setState({ contextMenu: value });
-    }
-  };
-
-  _handleFollow = async (e, id) => {
-    e.stopPropagation();
-    e.preventDefault();
-    this._handleHide();
-    await Actions.createSubscription({
-      userId: id,
-    });
-  };
-
-  checkStatus = ({ id }) => {
-    const { activeUsers } = this.props;
-
-    return activeUsers && activeUsers.includes(id);
-  };
-
-  render() {
-    let following = this.props.viewer.following.map((relation) => {
-      let button = (
-        <div css={STYLES_ITEM_BOX} onClick={(e) => this._handleClick(e, relation.id)}>
-          <SVG.MoreHorizontal height="24px" />
-          {this.state.contextMenu === relation.id ? (
-            <Boundary
-              captureResize={true}
-              captureScroll={false}
-              enabled
-              onOutsideRectEvent={(e) => this._handleClick(e, relation.id)}
-            >
-              <PopoverNavigation
-                style={{
-                  top: "40px",
-                  right: "0px",
-                }}
-                navigation={[
-                  [
-                    {
-                      text: "Unfollow",
-                      onClick: (e) => this._handleFollow(e, relation.id),
-                    },
-                  ],
-                ]}
-              />
-            </Boundary>
-          ) : null}
-        </div>
-      );
-      return (
-        <Link key={relation.id} href={`/$/user/${relation.id}`} onAction={this.props.onAction}>
-          <UserEntry
-            key={relation.id}
-            user={relation}
-            button={button}
-            checkStatus={this.checkStatus}
-            // onClick={() => {
-            //   this.props.onAction({
-            //     type: "NAVIGATE",
-            //     value: "NAV_PROFILE",
-            //     shallow: true,
-            //     data: relation,
-            //   });
-            // }}
-          />
-        </Link>
-      );
-    });
-
-    let followers = this.props.viewer.followers.map((relation) => {
-      let button = (
-        <div css={STYLES_ITEM_BOX} onClick={(e) => this._handleClick(e, relation.id)}>
-          <SVG.MoreHorizontal height="24px" />
-          {this.state.contextMenu === relation.id ? (
-            <Boundary
-              captureResize={true}
-              captureScroll={false}
-              enabled
-              onOutsideRectEvent={(e) => this._handleClick(e, relation.id)}
-            >
-              <PopoverNavigation
-                style={{
-                  top: "40px",
-                  right: "0px",
-                }}
-                navigation={[
-                  [
-                    {
-                      text: this.props.viewer.following.some((user) => {
-                        return user.id === relation.id;
-                      })
-                        ? "Unfollow"
-                        : "Follow",
-                      onClick: (e) => this._handleFollow(e, relation.id),
-                    },
-                  ],
-                ]}
-              />
-            </Boundary>
-          ) : null}
-        </div>
-      );
-      return (
-        <Link key={relation.id} href={`/$/user/${relation.id}`} onAction={this.props.onAction}>
-          <UserEntry
-            key={relation.id}
-            user={relation}
-            button={button}
-            checkStatus={this.checkStatus}
-            // onClick={() => {
-            //   this.props.onAction({
-            //     type: "NAVIGATE",
-            //     value: "NAV_PROFILE",
-            //     shallow: true,
-            //     data: relation,
-            //   });
-            // }}
-          />
-        </Link>
-      );
-    });
-
-    let tab = this.props.page.params?.tab || "following";
-    return (
-      <WebsitePrototypeWrapper
-        title={`${this.props.page.pageTitle} • Slate`}
-        url={`${Constants.hostname}${this.props.page.pathname}`}
-      >
-        <ScenePage>
-          <ScenePageHeader title="Directory" />
-          <SecondaryTabGroup
-            tabs={[
-              { title: "Following", value: { tab: "following" } },
-              { title: "Followers", value: { tab: "followers" } },
-            ]}
-            value={tab}
-            onAction={this.props.onAction}
-          />
-          {tab === "following" ? (
-            following && following.length ? (
-              following
-            ) : (
-              <EmptyState>
-                <SVG.Users height="24px" style={{ marginBottom: 24 }} />
-                You can follow any user on the network to be updated on their new uploads and
-                collections.
-              </EmptyState>
-            )
-          ) : null}
-          {tab === "followers" ? (
-            followers && followers.length ? (
-              followers
-            ) : (
-              <EmptyState>
-                <SVG.Users height="24px" style={{ marginBottom: 24 }} />
-                You don't have any followers yet.
-              </EmptyState>
-            )
-          ) : null}
-          <input
-            readOnly
-            ref={(c) => {
-              this._ref = c;
-            }}
-            value={this.state.copyValue}
-            tabIndex="-1"
-            css={STYLES_COPY_INPUT}
-          />
-        </ScenePage>
-      </WebsitePrototypeWrapper>
-    );
-  }
-}

scenes/SceneProfile.js

@@ -147,36 +147,36 @@ export default class SceneProfile extends React.Component {
   render() {
     const viewer = this.props.viewer;
     let user = this.props.data;
-    if (!user) {
-      return (
-        <WebsitePrototypeWrapper
-          title={`${this.props.page.pageTitle} • Slate`}
-          url={`${Constants.hostname}${this.props.page.pathname}`}
-        >
-          <ScenePage>
-            <EmptyState>
-              <SVG.Users height="24px" style={{ marginBottom: 24 }} />
-              <div>We were unable to locate that user profile</div>
-            </EmptyState>
-          </ScenePage>
-        </WebsitePrototypeWrapper>
-      );
-    }
-    if (!user.slates?.length) {
-      return (
-        <WebsitePrototypeWrapper
-          title={`${this.props.page.pageTitle} • Slate`}
-          url={`${Constants.hostname}${this.props.page.pathname}`}
-        >
-          <ScenePage>
-            <EmptyState>
-              <SVG.Users height="24px" style={{ marginBottom: 24 }} />
-              <div>This user doesn't have any public content</div>
-            </EmptyState>
-          </ScenePage>
-        </WebsitePrototypeWrapper>
-      );
-    }
+    // if (!user) {
+    //   return (
+    //     <WebsitePrototypeWrapper
+    //       title={`${this.props.page.pageTitle} • Slate`}
+    //       url={`${Constants.hostname}${this.props.page.pathname}`}
+    //     >
+    //       <ScenePage>
+    //         <EmptyState>
+    //           <SVG.Users height="24px" style={{ marginBottom: 24 }} />
+    //           <div>We were unable to locate that user profile</div>
+    //         </EmptyState>
+    //       </ScenePage>
+    //     </WebsitePrototypeWrapper>
+    //   );
+    // }
+    // if (!user.slates?.length) {
+    return (
+      <WebsitePrototypeWrapper
+        title={`${this.props.page.pageTitle} • Slate`}
+        url={`${Constants.hostname}${this.props.page.pathname}`}
+      >
+        <ScenePage>
+          <EmptyState>
+            <SVG.Users height="24px" style={{ marginBottom: 24 }} />
+            <div>This user doesn't have any public content</div>
+          </EmptyState>
+        </ScenePage>
+      </WebsitePrototypeWrapper>
+    );
+    // }
     const isOwner = user.id === viewer?.id;
     let name = user.name || `@${user.username}`;
     let description, title;