Remove groups from sidebar, about, and duplicate leaderboards item

web/components/nav/sidebar.tsx

@@ -5,31 +5,23 @@ import {
   DotsHorizontalIcon,
   CashIcon,
   HeartIcon,
-  UserGroupIcon,
   TrendingUpIcon,
   ChatIcon,
 } from '@heroicons/react/outline'
 import clsx from 'clsx'
 import Link from 'next/link'
 import Router, { useRouter } from 'next/router'
-import { usePrivateUser, useUser } from 'web/hooks/use-user'
+import { useUser } from 'web/hooks/use-user'
 import { firebaseLogout, User } from 'web/lib/firebase/users'
 import { ManifoldLogo } from './manifold-logo'
 import { MenuButton } from './menu'
 import { ProfileSummary } from './profile-menu'
 import NotificationsIcon from 'web/components/notifications-icon'
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { ENV_CONFIG, IS_PRIVATE_MANIFOLD } from 'common/envs/constants'
 import { CreateQuestionButton } from 'web/components/create-question-button'
-import { useMemberGroups } from 'web/hooks/use-group'
-import { groupPath } from 'web/lib/firebase/groups'
 import { trackCallback, withTracking } from 'web/lib/service/analytics'
-import { Group, GROUP_CHAT_SLUG } from 'common/group'
 import { Spacer } from '../layout/spacer'
-import { useUnseenPreferredNotifications } from 'web/hooks/use-notifications'
-import { setNotificationsAsSeen } from 'web/pages/notifications'
-import { PrivateUser } from 'common/user'
-import { useWindowSize } from 'web/hooks/use-window-size'
 
 const logout = async () => {
   // log out, and then reload the page, in case SSR wants to boot them out
@@ -50,13 +42,7 @@ function getNavigation() {
     { name: 'Leaderboards', href: '/leaderboards', icon: TrendingUpIcon },
 
     ...(IS_PRIVATE_MANIFOLD
-      ? [
-          {
-            name: 'Leaderboards',
-            href: `/leaderboards`,
-            icon: TrendingUpIcon,
-          },
-        ]
+      ? []
       : [{ name: 'Get M$', href: '/add-funds', icon: CashIcon }]),
   ]
 }
@@ -86,7 +72,6 @@ function getMoreNavigation(user?: User | null) {
     { name: 'Charity', href: '/charity' },
     { name: 'Send M$', href: '/links' },
     { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' },
-    { name: 'About', href: 'https://docs.manifold.markets/$how-to' },
     {
       name: 'Sign out',
       href: '#',
@@ -98,19 +83,9 @@ function getMoreNavigation(user?: User | null) {
 const signedOutNavigation = [
   { name: 'Home', href: '/home', icon: HomeIcon },
   { name: 'Explore', href: '/markets', icon: SearchIcon },
-  {
-    name: 'About',
-    href: 'https://docs.manifold.markets/$how-to',
-    icon: BookOpenIcon,
-  },
 ]
 
 const signedOutMobileNavigation = [
-  {
-    name: 'About',
-    href: 'https://docs.manifold.markets/$how-to',
-    icon: BookOpenIcon,
-  },
   { name: 'Charity', href: '/charity', icon: HeartIcon },
   { name: 'Leaderboards', href: '/leaderboards', icon: TrendingUpIcon },
   { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh', icon: ChatIcon },
@@ -120,12 +95,14 @@ const signedInMobileNavigation = [
   { name: 'Leaderboards', href: '/leaderboards', icon: TrendingUpIcon },
   ...(IS_PRIVATE_MANIFOLD
     ? []
-    : [{ name: 'Get M$', href: '/add-funds', icon: CashIcon }]),
-  {
-    name: 'About',
-    href: 'https://docs.manifold.markets/$how-to',
-    icon: BookOpenIcon,
-  },
+    : [
+        { name: 'Get M$', href: '/add-funds', icon: CashIcon },
+        {
+          name: 'About',
+          href: 'https://docs.manifold.markets/$how-to',
+          icon: BookOpenIcon,
+        },
+      ]),
 ]
 
 function getMoreMobileNav() {
@@ -212,7 +189,6 @@ export default function Sidebar(props: { className?: string }) {
   const currentPage = router.pathname
 
   const user = useUser()
-  const privateUser = usePrivateUser(user?.id)
   // usePing(user?.id)
 
   const navigationOptions = !user ? signedOutNavigation : getNavigation()
@@ -220,17 +196,6 @@ export default function Sidebar(props: { className?: string }) {
     ? signedOutMobileNavigation
     : signedInMobileNavigation
 
-  const memberItems = (
-    useMemberGroups(
-      user?.id,
-      { withChatEnabled: true },
-      { by: 'mostRecentChatActivityTime' }
-    ) ?? []
-  ).map((group: Group) => ({
-    name: group.name,
-    href: `${groupPath(group.slug)}/${GROUP_CHAT_SLUG}`,
-  }))
-
   return (
     <nav aria-label="Sidebar" className={className}>
       <ManifoldLogo className="py-6" twoLine />
@@ -257,17 +222,6 @@ export default function Sidebar(props: { className?: string }) {
             buttonContent={<MoreButton />}
           />
         )}
-        {/* Spacer if there are any groups */}
-        {memberItems.length > 0 && (
-          <hr className="!my-4 mr-2 border-gray-300" />
-        )}
-        {privateUser && (
-          <GroupsList
-            currentPage={router.asPath}
-            memberItems={memberItems}
-            privateUser={privateUser}
-          />
-        )}
       </div>
 
       {/* Desktop navigation */}
@@ -281,89 +235,7 @@ export default function Sidebar(props: { className?: string }) {
             buttonContent={<MoreButton />}
           />
         )}
-
-        {/* Spacer if there are any groups */}
-        {memberItems.length > 0 && <hr className="!my-4 border-gray-300" />}
-        {privateUser && (
-          <GroupsList
-            currentPage={router.asPath}
-            memberItems={memberItems}
-            privateUser={privateUser}
-          />
-        )}
       </div>
     </nav>
   )
 }
-
-function GroupsList(props: {
-  currentPage: string
-  memberItems: Item[]
-  privateUser: PrivateUser
-}) {
-  const { currentPage, memberItems, privateUser } = props
-  const preferredNotifications = useUnseenPreferredNotifications(
-    privateUser,
-    {
-      customHref: '/group/',
-    },
-    memberItems.length > 0 ? memberItems.length : undefined
-  )
-
-  // Set notification as seen if our current page is equal to the isSeenOnHref property
-  useEffect(() => {
-    const currentPageWithoutQuery = currentPage.split('?')[0]
-    const currentPageGroupSlug = currentPageWithoutQuery.split('/')[2]
-    preferredNotifications.forEach((notification) => {
-      if (
-        notification.isSeenOnHref === currentPage ||
-        // Old chat style group chat notif was just /group/slug
-        (notification.isSeenOnHref &&
-          currentPageWithoutQuery.includes(notification.isSeenOnHref)) ||
-        // They're on the home page, so if they've a chat notif, they're seeing the chat
-        (notification.isSeenOnHref?.endsWith(GROUP_CHAT_SLUG) &&
-          currentPageWithoutQuery.endsWith(currentPageGroupSlug))
-      ) {
-        setNotificationsAsSeen([notification])
-      }
-    })
-  }, [currentPage, preferredNotifications])
-
-  const { height } = useWindowSize()
-  const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null)
-  const remainingHeight =
-    (height ?? window.innerHeight) - (containerRef?.offsetTop ?? 0)
-
-  return (
-    <>
-      <SidebarItem
-        item={{ name: 'Groups', href: '/groups', icon: UserGroupIcon }}
-        currentPage={currentPage}
-      />
-
-      <div
-        className="flex-1 space-y-0.5 overflow-auto"
-        style={{ height: remainingHeight }}
-        ref={setContainerRef}
-      >
-        {memberItems.map((item) => (
-          <a
-            key={item.href}
-            href={item.href}
-            className={clsx(
-              'group flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900',
-              preferredNotifications.some(
-                (n) =>
-                  !n.isSeen &&
-                  (n.isSeenOnHref === item.href ||
-                    n.isSeenOnHref === item.href.replace('/chat', ''))
-              ) && 'font-bold'
-            )}
-          >
-            <span className="truncate">{item.name}</span>
-          </a>
-        ))}
-      </div>
-    </>
-  )
-}