Skip to content

Commit

Permalink
Merge pull request #3233 from tloncorp/james/land-1197-groups-discove…
Browse files Browse the repository at this point in the history 
…ry-joining-overhaul

groups: eliminate discover/find interface
  • Loading branch information
@arthyn
arthyn authored Feb 9, 2024
2 parents ddafc50 + 90bbc71 commit 5996c66
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 86 deletions.
16 changes: 0 additions & 16 deletions ui/src/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ import useMedia, { useIsDark, useIsMobile } from '@/logic/useMedia';
import useErrorHandler from '@/logic/useErrorHandler';
import {
useAnalyticsId,
useCalm,
useLogActivity,
useSettingsLoaded,
useTheme,
Expand All @@ -42,7 +41,6 @@ import GroupInfo from '@/groups/GroupAdmin/GroupInfo';
import ProfileModal from '@/profiles/ProfileModal';
import MultiDMEditModal from '@/dms/MultiDMEditModal';
import NewChannelModal from '@/channels/NewChannel/NewChannelModal';
import FindGroups from '@/groups/FindGroups';
import GroupPreviewModal from '@/groups/Join/GroupPreview';
import RejectConfirmModal from '@/groups/Join/RejectConfirmModal';
import EditProfile from '@/profiles/EditProfile/EditProfile';
Expand Down Expand Up @@ -257,20 +255,6 @@ function GroupsRoutes({ state, location, isMobile, isSmall }: RoutesProps) {
/>
)}
</Route>
{/* Find by Invite URL */}
<Route
path="/find/:ship/:name"
element={<FindGroups title={`Discover • ${groupsTitle}`} />}
/>
{/* Find by Nickname or @p */}
<Route
path="/find/:ship"
element={<FindGroups title={`Discover • ${groupsTitle}`} />}
/>
<Route
path="/find"
element={<FindGroups title={`Discover • ${groupsTitle}`} />}
/>
<Route
path="/profile/edit"
element={<EditProfile title={`Edit Profile • ${groupsTitle}`} />}
Expand Down
15 changes: 0 additions & 15 deletions ui/src/components/Sidebar/MobileSidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import BellIcon from '../icons/BellIcon';
import HomeIconMobileNav from '../icons/HomeIconMobileNav';
import MessagesIcon from '../icons/MessagesIcon';
import Avatar from '../Avatar';
import NavigateIcon from '../icons/NavigateIcon';

function GroupsTab(props: { isInactive: boolean; isDarkMode: boolean }) {
const navigate = useNavigate();
Expand Down Expand Up @@ -182,20 +181,6 @@ export default function MobileSidebar() {
isInactive={isInactive('/notifications')}
isDarkMode={isDarkMode}
/>
<NavTab
to="/find"
linkClass="h-full !pb-0 flex flex-col items-start justify-start"
>
<div className="flex-1" />
<div className="flex h-8 w-8 items-center justify-center">
<NavigateIcon
isInactive={isInactive('/find')}
isDarkMode={isDarkMode}
className="h-[20px] w-[18px]"
/>
</div>
<div className="flex-1" />
</NavTab>
{needsUpdate ? (
<NavTab
to="/update-needed"
Expand Down
9 changes: 1 addition & 8 deletions ui/src/components/Sidebar/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default function Sidebar() {
const [isScrolling, setIsScrolling] = useState(false);
const [atTop, setAtTop] = useState(true);
const { sortFn, setSortFn, sortOptions, sortGroups } = useGroupSort();
const { data: groups, isLoading } = useGroupsWithQuery();
const { data: groups } = useGroupsWithQuery();
const invitedGroups = usePendingGangsWithoutClaim();
const pinnedGroups = usePinnedGroups();
const loadingGroups = useLoadingGroups();
Expand Down Expand Up @@ -224,13 +224,6 @@ export default function Sidebar() {
{hasNewGroups && (
<div className="mx-2">{newGroupsDisplay}</div>
)}

{!sortedGroups.length && !hasNewGroups && !isLoading && (
<div className="mx-4 my-2 rounded-lg bg-indigo-50 p-4 leading-5 text-gray-700 dark:bg-indigo-900/50">
Check out <strong>Discover</strong> above to find new
groups in your network or view group invites.
</div>
)}
</div>
</>
)}
Expand Down
85 changes: 38 additions & 47 deletions ui/src/nav/MobileRoot.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ import MobileHeader from '@/components/MobileHeader';
import Layout from '@/components/Layout/Layout';
import AddIconMobileNav from '@/components/icons/AddIconMobileNav';
import GroupJoinList from '@/groups/GroupJoinList';
import NavigateIcon from '@/components/icons/NavigateIcon';
import WelcomeCard from '@/components/WelcomeCard';
import AddGroupSheet from '@/groups/AddGroupSheet';

Expand All @@ -35,7 +34,7 @@ export default function MobileRoot() {
const loadingGroups = useLoadingGroups();
const newGroups = useNewGroups();
const gangsWithClaims = useGangsWithClaim();
const { data: groups, isLoading } = useGroupsWithQuery();
const { data: groups } = useGroupsWithQuery();
const sortedGroups = sortGroups(groups);
const pinnedGroupsOptions = useMemo(
() =>
Expand Down Expand Up @@ -84,56 +83,48 @@ export default function MobileRoot() {
<nav className="flex h-full flex-1 flex-col overflow-y-auto overflow-x-hidden">
<WelcomeCard />
<div className="flex-1">
{sortedGroups.length === 0 && !isLoading ? (
<div className="mx-4 my-2 rounded-lg bg-indigo-50 p-4 leading-5 text-gray-700 dark:bg-indigo-900/50">
Tap the <span className="sr-only">find icon</span>
<NavigateIcon className="inline-flex h-4 w-4" /> below to find new
groups in your network or view group invites.
</div>
) : (
<GroupsScrollingContext.Provider value={isScrolling}>
<GroupList groups={sortedGroups} isScrolling={scroll.current}>
{hasPinnedGroups ||
hasPendingGangs ||
hasGangsWithClaims ||
hasLoadingGroups ||
hasNewGroups ? (
<>
<div className="px-4">
{hasPinnedGroups ? (
<>
<h2 className="mb-0.5 p-2 font-sans text-gray-400">
Pinned
</h2>
{pinnedGroupsOptions}
<GroupsScrollingContext.Provider value={isScrolling}>
<GroupList groups={sortedGroups} isScrolling={scroll.current}>
{hasPinnedGroups ||
hasPendingGangs ||
hasGangsWithClaims ||
hasLoadingGroups ||
hasNewGroups ? (
<>
<div className="px-4">
{hasPinnedGroups ? (
<>
<h2 className="mb-0.5 p-2 font-sans text-gray-400">
Pinned
</h2>
{pinnedGroupsOptions}

<h2 className="my-2 p-2 font-sans text-gray-400">
All Groups
</h2>
</>
) : null}
<h2 className="my-2 p-2 font-sans text-gray-400">
All Groups
</h2>
</>
) : null}

{hasLoadingGroups &&
Object.keys(loadingGroups).map(([flag, _]) => (
<GangItem key={flag} flag={flag} isJoining />
))}
{hasLoadingGroups &&
Object.keys(loadingGroups).map(([flag, _]) => (
<GangItem key={flag} flag={flag} isJoining />
))}

{hasGangsWithClaims &&
gangsWithClaims.map((flag) => (
<GangItem key={flag} flag={flag} />
))}
{hasGangsWithClaims &&
gangsWithClaims.map((flag) => (
<GangItem key={flag} flag={flag} />
))}

{hasNewGroups && newGroupsOptions}
</div>
{hasNewGroups && newGroupsOptions}
</div>

{hasPendingGangs && (
<GroupJoinList highlightAll gangs={pendingGangs} />
)}
</>
) : null}
</GroupList>
</GroupsScrollingContext.Provider>
)}
{hasPendingGangs && (
<GroupJoinList highlightAll gangs={pendingGangs} />
)}
</>
) : null}
</GroupList>
</GroupsScrollingContext.Provider>
<AddGroupSheet open={addGroupOpen} onOpenChange={setAddGroupOpen} />
</div>
</nav>
Expand Down

0 comments on commit 5996c66

Please sign in to comment.