Make the community page more user friendly

apps/researcher/src/app/[locale]/communities/buttons.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import {useCreateCommunity} from '@/lib/community/hooks';
+import {useTranslations} from 'next-intl';
+
+export function AddCommunityButton() {
+  const {openCreateCommunity} = useCreateCommunity();
+  const t = useTranslations('Communities');
+
+  return (
+    <button
+      onClick={() =>
+        openCreateCommunity({
+          afterCreateOrganizationUrl: organization =>
+            `/revalidate/?path=/[locale]/communities&redirect=/communities/${organization.slug}`,
+        })
+      }
+      className="p-1 sm:py-2 sm:px-3 rounded-full text-xs bg-neutral-200/50 hover:bg-neutral-300/50 text-neutral-800 transition flex items-center gap-1"
+    >
+      {t('addCommunity')}
+    </button>
+  );
+}

apps/researcher/src/app/[locale]/communities/my-community-toggle.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import {useListStore} from '@colonial-collections/list-store';
+
+// A checked checkbox will set the filter 'onlyMyCommunities' to the string 'true'.
+// The value must be a string so the list updater can place it into the search params.
+export function MyCommunityToggle() {
+  const filterChange = useListStore(s => s.filterChange);
+
+  return (
+    <input
+      type="checkbox"
+      id="onlyMy"
+      name="onlyMy"
+      onChange={event =>
+        filterChange(
+          'onlyMyCommunities',
+          event.target.checked ? 'true' : undefined
+        )
+      }
+    />
+  );
+}

apps/researcher/src/app/[locale]/communities/page.tsx

@@ -9,6 +9,8 @@ import {
   SearchField,
   OrderSelector,
 } from '@colonial-collections/ui/list';
+import {AddCommunityButton} from './buttons';
+import {MyCommunityToggle} from './my-community-toggle';
 
 // 1 day = 60*60*24 = 86400
 export const revalidate = 86400;
@@ -21,6 +23,7 @@ interface Props {
     query?: string;
     sortBy?: SortBy;
     offset?: number;
+    onlyMyCommunities?: number;
   };
 }
 
@@ -38,6 +41,7 @@ export default async function CommunitiesPage({
       query,
       sortBy,
       offset,
+      onlyMyCommunities: !!searchParams.onlyMyCommunities,
     });
   } catch (err) {
     return <ErrorMessage error={t('error')} />;
@@ -54,19 +58,37 @@ export default async function CommunitiesPage({
           sortBy,
         }}
       />
-      <div className="px-4 my-10 sm:px-10 w-full max-w-[1800px] mx-auto">
-        <h1 className="text-2xl md:text-4xl">{t('title')}</h1>
-      </div>
-      <div className="flex flex-col sm:flex-row justify-between h-full gap-6 w-full max-w-[1800px] mx-auto px-4 sm:px-10 pb-4 mb-10 -mt-6 rounded border-b">
-        <div>
-          <SearchField placeholder={t('searchPlaceholder')} />
+      <div className="flex flex-col sm:flex-row justify-between items-center h-full gap-6 w-full max-w-[1800px] mx-auto px-4 sm:px-10 mt-6">
+        <div className="flex flex-col lg:flex-row items-start lg:items-center gap-4">
+          <div>
+            <h1 className="text-2xl md:text-4xl">{t('title')}</h1>
+          </div>
+          <div>
+            <AddCommunityButton />
+          </div>
         </div>
-        <div>
-          <OrderSelector
-            values={[SortBy.CreatedAtDesc, SortBy.NameAsc, SortBy.NameDesc]}
-          />
+        <div className=" flex flex-col xl:flex-row items-center md:items-end gap-4 justify-end">
+          <div>
+            <SearchField placeholder={t('searchPlaceholder')} />
+          </div>
+          <div>
+            <OrderSelector
+              values={[
+                SortBy.NameAsc,
+                SortBy.NameDesc,
+                SortBy.MembershipCountDesc,
+                SortBy.CreatedAtDesc,
+              ]}
+            />
+          </div>
         </div>
       </div>
+      <div className="text-sm w-full px-4 sm:px-10 pb-4 mb-4 text-right max-w-[1800px] mx-auto">
+        <MyCommunityToggle />
+        <label className="ml-2" htmlFor="onlyMy">
+          {t('toggleMyCommunities')}
+        </label>
+      </div>
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 h-full grow content-stretch gap-6 w-full max-w-[1800px] mx-auto px-4 sm:px-10 mt-10">
         {communities.map(community => (
           <CommunityCard

apps/researcher/src/app/[locale]/navigation.tsx

@@ -13,13 +13,7 @@ import {usePathname} from 'next-intl/client';
 import Link from 'next-intl/link';
 import {useLocale, useTranslations} from 'next-intl';
 import {Fragment} from 'react';
-import {
-  UserButton,
-  SignInButton,
-  OrganizationSwitcher,
-  SignedIn,
-  SignedOut,
-} from '@clerk/nextjs';
+import {UserButton, SignInButton, SignedIn, SignedOut} from '@clerk/nextjs';
 
 interface Props {
   locales: string[];
@@ -187,15 +181,6 @@ export default function Navigation({locales}: Props) {
                         );
                       })}
                       <SignedIn>
-                        <OrganizationSwitcher
-                          afterCreateOrganizationUrl={organization =>
-                            `/revalidate/?path=/[locale]/communities&redirect=/communities/${organization.slug}`
-                          }
-                          afterLeaveOrganizationUrl="/communities"
-                          afterSelectOrganizationUrl={organization =>
-                            `/communities/${organization.slug}`
-                          }
-                        />
                         <UserButton afterSignOutUrl="/" />
                       </SignedIn>
                       <SignedOut>
@@ -256,11 +241,6 @@ export default function Navigation({locales}: Props) {
                       </Disclosure.Button>
                     );
                   })}
-                  <SignedIn>
-                    <button className="pl-3">
-                      <OrganizationSwitcher />
-                    </button>
-                  </SignedIn>
                 </div>
               </Disclosure.Panel>
             </>

apps/researcher/src/lib/community/actions.ts

@@ -5,6 +5,7 @@ import {
   organizationToCommunity,
 } from './clerk-converters';
 import {Community, Membership, SortBy} from './definitions';
+import {Organization} from '@clerk/backend/dist/types';
 
 export async function getCommunityBySlug(slug: string) {
   const organization = await clerkClient.organizations.getOrganization({
@@ -56,20 +57,34 @@ interface GetCommunitiesProps {
   sortBy?: SortBy;
   limit?: number;
   offset?: number;
+  onlyMyCommunities?: boolean;
 }
 
 export async function getCommunities({
   query = '',
   sortBy = defaultSortBy,
   limit = 24,
   offset = 0,
+  onlyMyCommunities = false,
 }: GetCommunitiesProps) {
-  const organizations = await clerkClient.organizations.getOrganizationList({
-    limit,
-    offset,
-    query,
-    includeMembersCount: true,
-  });
+  let organizations: Organization[] = [];
+
+  if (onlyMyCommunities) {
+    const {userId} = await auth();
+    const memberships = userId
+      ? await clerkClient.users.getOrganizationMembershipList({
+          userId,
+        })
+      : [];
+    organizations = memberships.map(membership => membership.organization);
+  } else {
+    organizations = await clerkClient.organizations.getOrganizationList({
+      limit,
+      offset,
+      query,
+      includeMembersCount: true,
+    });
+  }
 
   const communities = organizations.map(organizationToCommunity);
 

apps/researcher/src/lib/community/hooks.tsx

@@ -64,3 +64,9 @@ export function useUserCommunities({
 
   return communities;
 }
+
+export function useCreateCommunity() {
+  const {openCreateOrganization} = useClerk();
+
+  return {openCreateCommunity: openCreateOrganization};
+}

apps/researcher/src/messages/en/messages.json

@@ -142,6 +142,7 @@
     "nameAsc": "Name - Ascending",
     "nameDesc": "Name - Descending",
     "createdAtDesc": "Date created",
+    "membershipCountDesc": "Number of members",
     "accessibilitySelectToChangeOrder": "Select to change the ordering of the result"
   },
   "WorkInProgress": {
@@ -161,7 +162,9 @@
     "membershipCount": "{count, plural, =0 {0 members} =1 {1 member} other {# members}}",
     "objectListCount": "{count, plural, =0 {0 lists} =1 {1 list} other {# lists}}",
     "objectListCountError": "Error",
-    "searchPlaceholder": "Search for community"
+    "searchPlaceholder": "Search for community",
+    "addCommunity": "Create a community",
+    "toggleMyCommunities": "Show only my communities"
   },
   "Community": {
     "title": "Community of",

apps/researcher/src/messages/nl/messages.json

@@ -142,6 +142,7 @@
     "nameAsc": "Naam - Oplopend",
     "nameDesc": "Naam - Aflopend",
     "createdAtDesc": "Datum gecreeërd",
+    "membershipCountDesc": "Aantal leden",
     "accessibilitySelectToChangeOrder": "Selecteer om de volgorde van het resultaat te wijzigen"
   },
   "WorkInProgress": {
@@ -161,7 +162,9 @@
     "membershipCount": "{count, plural, =0 {0 leden} =1 {1 lid} other {# leden}}",
     "objectListCount": "{count, plural, =0 {0 lijsten} =1 {1 lijst} other {# lijsten}}",
     "objectListCountError": "Error",
-    "searchPlaceholder": "Zoek naar community"
+    "searchPlaceholder": "Zoek naar community",
+    "addCommunity": "Een community aanmaken",
+    "toggleMyCommunities": "Toon alleen mijn communities"
   },
   "Community": {
     "title": "Community van",

packages/list-store/src/use-list-store.tsx

@@ -15,14 +15,14 @@ interface ListProps {
   defaultSortBy: string;
   baseUrl: string;
   selectedFilters: {
-    [filterKey: string]: (string | number)[] | number | undefined;
+    [filterKey: string]: (string | number)[] | number | string | undefined;
   };
 }
 
 export interface ListState extends ListProps {
   filterChange: (
     key: string,
-    value: (string | number)[] | number | undefined
+    value: (string | number)[] | number | string | undefined
   ) => void;
   sortChange: (sortBy: string) => void;
   queryChange: (query: string) => void;

packages/ui/list/order-selector.tsx

@@ -17,7 +17,7 @@ export function OrderSelector({values = defaultValues}: {values?: string[]}) {
   return (
     <select
       name="location"
-      className="mt-1 block rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-sky-600 focus:outline-none focus:ring-sky-600 sm:text-sm"
+      className="rounded p-2 text-sm border bg-neutral-100 pr-6"
       value={sortBy}
       onChange={handleSortByChange}
       aria-label={t('accessibilitySelectToChangeOrder')}