-
- {/*Place the description here*/}
+
+
+ = async list => {
+ try {
+ await addList(list);
+ addNotification({
+ id: 'add-object-list-success',
+ message: t.rich('listSuccessfullyAdded', {
+ name: () => {list.name},
+ }),
+ type: 'success',
+ });
+ setIsVisible(slideOutId, false);
+ } catch (err) {
+ setError('root.serverError', {
+ message: t('serverError'),
+ });
+ }
+ };
+
+ return (
+
+ );
+}
+
+interface AddObjectListFormProps {
+ communityId: string;
+ slideOutId: string;
+}
+
+export default function AddObjectListForm({
+ communityId,
+ slideOutId,
+}: AddObjectListFormProps) {
+ const {userId} = useAuth();
+ const t = useTranslations('AddObjectListForm');
+
+ // Wait for userId to be available.
+ // In most cases, this will be available immediately
+ // so no loading state is needed
+ return (
+ = [
+ const memberships: ReadonlyArray = [
{
+ ...basicMembership,
id: 'membership1',
role: 'admin',
publicUserData: {
+ ...basicMembership.publicUserData,
userId: 'me',
- firstName: 'John',
- lastName: 'Doe',
- profileImageUrl: 'https://example.com/image.png',
},
},
{
+ ...basicMembership,
id: 'membership2',
role: 'basic_member',
publicUserData: {
- userId: 'notMe',
- firstName: 'Jane',
- lastName: 'Doe',
- profileImageUrl: 'https://example.com/image.png',
+ ...basicMembership.publicUserData,
+ userId: 'me',
},
},
];
@@ -36,15 +68,14 @@ describe('isAdmin', () => {
});
it('returns false if user is not an admin', () => {
- const memberships: ReadonlyArray = [
+ const memberships: ReadonlyArray = [
{
+ ...basicMembership,
id: 'membership1',
role: 'basic_member',
publicUserData: {
+ ...basicMembership.publicUserData,
userId: 'me',
- firstName: 'John',
- lastName: 'Doe',
- profileImageUrl: 'https://example.com/image.png',
},
},
];
@@ -52,15 +83,14 @@ describe('isAdmin', () => {
});
it('returns false if user is not a member', () => {
- const memberships: ReadonlyArray = [
+ const memberships: ReadonlyArray = [
{
+ ...basicMembership,
id: 'membership1',
role: 'basic_member',
publicUserData: {
+ ...basicMembership.publicUserData,
userId: 'notMe',
- firstName: 'John',
- lastName: 'Doe',
- profileImageUrl: 'https://example.com/image.png',
},
},
];
@@ -72,23 +102,18 @@ describe('isAdmin', () => {
userId: undefined,
}));
- const memberships: ReadonlyArray = [
+ const memberships: ReadonlyArray = [
{
+ ...basicMembership,
id: 'membership1',
role: 'admin',
- publicUserData: {
- userId: 'notMe',
- firstName: 'John',
- lastName: 'Doe',
- profileImageUrl: 'https://example.com/image.png',
- },
},
];
expect(isAdmin(memberships)).toEqual(false);
});
it('returns false if there are no memberships', () => {
- const memberships: Membership[] = [];
+ const memberships: OrganizationMembership[] = [];
expect(isAdmin(memberships)).toEqual(false);
});
});
@@ -96,38 +121,33 @@ describe('isAdmin', () => {
describe('sort', () => {
const communities = [
{
+ ...basicOrganization,
id: 'community2',
name: 'Community 2',
- slug: 'community-2',
- imageUrl: 'https://example.com/image.png',
createdAt: 1690000000000,
},
{
+ ...basicOrganization,
id: 'community1',
name: 'Community 1',
- slug: 'community-1',
- imageUrl: 'https://example.com/image.png',
createdAt: 1600000000000,
},
{
+ ...basicOrganization,
id: 'community4',
name: 'Community 4',
- slug: 'community-4',
- imageUrl: 'https://example.com/image.png',
createdAt: 1680000000000,
},
{
+ ...basicOrganization,
id: 'community3',
name: 'Community 3',
- slug: 'community-3',
- imageUrl: 'https://example.com/image.png',
createdAt: 1650000000000,
},
{
+ ...basicOrganization,
id: 'community5',
name: 'Community 5',
- slug: 'community-5',
- imageUrl: 'https://example.com/image.png',
createdAt: 1670000000000,
},
];
@@ -136,137 +156,107 @@ describe('sort', () => {
const sortedCommunities = sort(communities, SortBy.NameAsc);
const expectedSortedCommunities = [
- {
+ expect.objectContaining({
id: 'community1',
name: 'Community 1',
- slug: 'community-1',
- imageUrl: 'https://example.com/image.png',
createdAt: 1600000000000,
- },
- {
+ }),
+ expect.objectContaining({
id: 'community2',
name: 'Community 2',
- slug: 'community-2',
- imageUrl: 'https://example.com/image.png',
createdAt: 1690000000000,
- },
- {
+ }),
+ expect.objectContaining({
id: 'community3',
name: 'Community 3',
- slug: 'community-3',
- imageUrl: 'https://example.com/image.png',
createdAt: 1650000000000,
- },
- {
+ }),
+ expect.objectContaining({
id: 'community4',
name: 'Community 4',
- slug: 'community-4',
- imageUrl: 'https://example.com/image.png',
createdAt: 1680000000000,
- },
- {
+ }),
+ expect.objectContaining({
id: 'community5',
name: 'Community 5',
- slug: 'community-5',
- imageUrl: 'https://example.com/image.png',
createdAt: 1670000000000,
- },
+ }),
];
- expect(sortedCommunities).toStrictEqual(expectedSortedCommunities);
+ expect(sortedCommunities).toEqual(expectedSortedCommunities);
});
it('sorts communities by name in descending order', () => {
const sortedCommunities = sort(communities, SortBy.NameDesc);
const expectedSortedCommunities = [
- {
+ expect.objectContaining({
id: 'community5',
name: 'Community 5',
- slug: 'community-5',
- imageUrl: 'https://example.com/image.png',
createdAt: 1670000000000,
- },
- {
+ }),
+ expect.objectContaining({
id: 'community4',
name: 'Community 4',
- slug: 'community-4',
- imageUrl: 'https://example.com/image.png',
createdAt: 1680000000000,
- },
- {
+ }),
+ expect.objectContaining({
id: 'community3',
name: 'Community 3',
- slug: 'community-3',
- imageUrl: 'https://example.com/image.png',
createdAt: 1650000000000,
- },
- {
+ }),
+ expect.objectContaining({
id: 'community2',
name: 'Community 2',
- slug: 'community-2',
- imageUrl: 'https://example.com/image.png',
createdAt: 1690000000000,
- },
- {
+ }),
+ expect.objectContaining({
id: 'community1',
name: 'Community 1',
- slug: 'community-1',
- imageUrl: 'https://example.com/image.png',
createdAt: 1600000000000,
- },
+ }),
];
- expect(sortedCommunities).toStrictEqual(expectedSortedCommunities);
+ expect(sortedCommunities).toEqual(expectedSortedCommunities);
});
it('sorts communities by creation date in descending order', () => {
const sortedCommunities = sort(communities, SortBy.CreatedAtDesc);
const expectedSortedCommunities = [
- {
+ expect.objectContaining({
id: 'community2',
name: 'Community 2',
- slug: 'community-2',
- imageUrl: 'https://example.com/image.png',
createdAt: 1690000000000,
- },
- {
+ }),
+ expect.objectContaining({
id: 'community4',
name: 'Community 4',
- slug: 'community-4',
- imageUrl: 'https://example.com/image.png',
createdAt: 1680000000000,
- },
- {
+ }),
+ expect.objectContaining({
id: 'community5',
name: 'Community 5',
- slug: 'community-5',
- imageUrl: 'https://example.com/image.png',
createdAt: 1670000000000,
- },
- {
+ }),
+ expect.objectContaining({
id: 'community3',
name: 'Community 3',
- slug: 'community-3',
- imageUrl: 'https://example.com/image.png',
createdAt: 1650000000000,
- },
- {
+ }),
+ expect.objectContaining({
id: 'community1',
name: 'Community 1',
- slug: 'community-1',
- imageUrl: 'https://example.com/image.png',
createdAt: 1600000000000,
- },
+ }),
];
- expect(sortedCommunities).toStrictEqual(expectedSortedCommunities);
+ expect(sortedCommunities).toEqual(expectedSortedCommunities);
});
it('returns the list unsorted if sortBy is an incorrect value', () => {
const sortedCommunities = sort(communities, 'incorrect' as SortBy);
- expect(sortedCommunities).toStrictEqual(communities);
+ expect(sortedCommunities).toEqual(communities);
});
});
diff --git a/apps/researcher/src/lib/community.ts b/apps/researcher/src/lib/community.ts
index a3adffb45..4e0c0162e 100644
--- a/apps/researcher/src/lib/community.ts
+++ b/apps/researcher/src/lib/community.ts
@@ -1,31 +1,21 @@
import {clerkClient, auth} from '@clerk/nextjs';
-import {
- OrganizationMembership,
- OrganizationMembershipPublicUserData,
- Organization as FullCommunity,
-} from '@clerk/backend/dist/types';
+import {OrganizationMembership, Organization} from '@clerk/backend/dist/types';
-export type Community = Pick<
- FullCommunity,
- 'id' | 'name' | 'slug' | 'imageUrl' | 'createdAt'
->;
+export type Community = Organization;
-export type Membership = Pick & {
- publicUserData?: Pick<
- OrganizationMembershipPublicUserData,
- 'userId' | 'firstName' | 'lastName' | 'profileImageUrl'
- > | null;
-};
-
-export async function getCommunityBySlug(slug: string): Promise {
+export async function getCommunityBySlug(slug: string) {
return clerkClient.organizations.getOrganization({
slug,
});
}
-export async function getMemberships(
- communityId: string
-): Promise {
+export async function getCommunityById(id: string) {
+ return clerkClient.organizations.getOrganization({
+ organizationId: id,
+ });
+}
+
+export async function getMemberships(communityId: string) {
return clerkClient.organizations.getOrganizationMembershipList({
organizationId: communityId,
});
@@ -40,7 +30,7 @@ export enum SortBy {
export const defaultSortBy = SortBy.CreatedAtDesc;
-export function sort(communities: Community[], sortBy: SortBy) {
+export function sort(communities: Organization[], sortBy: SortBy) {
// TODO: Implement sorting by membership count.
// This can be done as soon as the `Community` includes membership count.
return [...communities].sort((a, b) => {
@@ -68,7 +58,7 @@ export async function getCommunities({
sortBy = defaultSortBy,
limit = 24,
offset = 0,
-}: GetCommunitiesProps): Promise {
+}: GetCommunitiesProps) {
const communities = await clerkClient.organizations.getOrganizationList({
limit,
offset,
@@ -83,7 +73,9 @@ export async function getCommunities({
return sort(communities, sortBy);
}
-export function isAdmin(memberships: ReadonlyArray): boolean {
+export function isAdmin(
+ memberships: ReadonlyArray
+): boolean {
const {userId} = auth();
return (
diff --git a/apps/researcher/src/messages/en/messages.json b/apps/researcher/src/messages/en/messages.json
index e475309db..12e2f6062 100644
--- a/apps/researcher/src/messages/en/messages.json
+++ b/apps/researcher/src/messages/en/messages.json
@@ -143,6 +143,8 @@
"error": "Something went wrong while fetching communities. Please try again later.",
"communityName": "Community of {
+ objects?: InferSelectModel[];
+}
+
+export async function getByCommunityId(
+ communityId: string,
+ {withObjects, limitObjects}: Option = {withObjects: false}
+): Promise {
+ const options: DBQueryConfig = {};
+
+ if (withObjects) {
+ options.with = {
+ objects: limitObjects ? {limit: limitObjects} : true,
+ };
+ }
+
return db.query.objectLists.findMany({
+ ...options,
where: (objectLists, {eq}) => eq(objectLists.communityId, communityId),
- with: {
- objects: true,
- },
});
}
-interface CreateListForCommunityProps {
+export async function countByCommunityId(communityId: string) {
+ const result = await db
+ .select({count: sql`count(*)`})
+ .from(objectLists)
+ .where(eq(objectLists.communityId, communityId));
+
+ // We assume that the aggregations with `count` always returns an array with one value that is an object with the count prop
+ return result[0].count;
+}
+
+interface CreateProps {
communityId: string;
- userId: string;
name: string;
- description: string;
+ createdBy: string;
+ description?: string;
}
-async function createListForCommunity({
+export async function create({
communityId,
name,
+ createdBy,
description,
- userId,
-}: CreateListForCommunityProps) {
- return db.insert(objectLists).values({
+}: CreateProps) {
+ const objectList = insertObjectListSchema.parse({
communityId,
name,
description,
- createdBy: userId,
+ createdBy,
});
+
+ return db.insert(objectLists).values(objectList);
}
-interface AddObjectToListProps {
+interface AddObjectProps {
listId: number;
objectIri: string;
userId: string;
}
-async function addObjectToList({
- listId,
- objectIri,
- userId,
-}: AddObjectToListProps) {
+export async function addObject({listId, objectIri, userId}: AddObjectProps) {
const objectItem = insertObjectItemSchema.parse({
listId,
objectIri,
@@ -60,10 +81,3 @@ async function addObjectToList({
return db.insert(objectItems).values(objectItem);
}
-
-export const objectList = {
- getListsByCommunityId,
- getCommunityListsWithObjects,
- createListForCommunity,
- addObjectToList,
-};
diff --git a/packages/database/tsconfig.json b/packages/database/tsconfig.json
index 3200e3f01..cf42845ea 100644
--- a/packages/database/tsconfig.json
+++ b/packages/database/tsconfig.json
@@ -4,5 +4,5 @@
"rootDir": "./src",
"outDir": "./build"
},
- "include": ["src/**/*.ts"]
+ "include": ["./**/*.ts"]
}
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index bba021673..f2409a51c 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -4,3 +4,5 @@ export * from './localized-markdown';
export * from './small-screen-sub-menu';
export * from './wip-message';
export * from './slide-over';
+export * from './slide-out';
+export * from './notifications';
diff --git a/packages/ui/notifications.tsx b/packages/ui/notifications.tsx
new file mode 100644
index 000000000..dcf00e0dc
--- /dev/null
+++ b/packages/ui/notifications.tsx
@@ -0,0 +1,68 @@
+'use client';
+
+import {create} from 'zustand';
+import {XMarkIcon} from '@heroicons/react/24/outline';
+import {ReactNode, useEffect} from 'react';
+import {usePathname} from 'next/navigation';
+
+type Notification = {
+ id: string;
+ message: ReactNode;
+ type: 'success'; // For now we only have success notifications, but we could add more types later
+};
+
+interface State {
+ notifications: Notification[];
+ addNotification(item: Notification): void;
+ removeNotification(item: Notification): void;
+ reset(): void;
+}
+
+export const useNotifications = create(set => ({
+ notifications: [],
+ addNotification: notification =>
+ set(state => ({
+ notifications: [...state.notifications, notification],
+ })),
+ removeNotification: notification =>
+ set(state => ({
+ notifications: state.notifications.filter(i => i.id !== notification.id),
+ })),
+ reset: () =>
+ set(() => ({
+ notifications: [],
+ })),
+}));
+
+export function Notifications() {
+ const {notifications, removeNotification, reset} = useNotifications();
+ const pathname = usePathname();
+
+ useEffect(() => {
+ // Reset notifications when the route changes
+ reset();
+ }, [pathname, reset]);
+
+ if (notifications.length === 0) {
+ return null;
+ }
+
+ return (
+ ((set, get) => ({
+ visibleIds: {},
+ setIsVisible: (id, isVisible) =>
+ set(state => ({
+ visibleIds: {
+ ...state.visibleIds,
+ [id]: isVisible,
+ },
+ })),
+ isVisible: id => {
+ const visible = get().visibleIds[id];
+ return visible === undefined ? false : visible;
+ },
+}));
+
+interface SlideOutButtonProps {
+ id: string;
+ children: ReactNode;
+}
+
+export function SlideOutButton({
+ id,
+ children,
+ ...buttonProps
+}: SlideOutButtonProps & ButtonHTMLAttributes) {
+ const {setIsVisible, isVisible} = useSlideOut();
+ return (
+
+ );
+}
+
+interface SlideOutProps {
+ id: string;
+ children: ReactNode;
+}
+
+export function SlideOut({id, children}: SlideOutProps) {
+ const {isVisible, setIsVisible} = useSlideOut();
+ const pathname = usePathname();
+
+ useEffect(() => {
+ // Close slide out when the route changes
+ setIsVisible(id, false);
+ }, [id, pathname, setIsVisible]);
+
+ return isVisible(id) ? <>{children} : null;
+}
+
);
diff --git a/apps/researcher/src/app/[locale]/layout.tsx b/apps/researcher/src/app/[locale]/layout.tsx
index ab228a59e..cd97f60d2 100644
--- a/apps/researcher/src/app/[locale]/layout.tsx
+++ b/apps/researcher/src/app/[locale]/layout.tsx
@@ -17,7 +17,7 @@ export default async function RootLayout({children, params: {locale}}: Props) {
let messages;
try {
messages = (await import(`../../messages/${locale}/messages.json`)).default;
- } catch (error) {
+ } catch (err) {
notFound();
}
diff --git a/apps/researcher/src/app/[locale]/page.tsx b/apps/researcher/src/app/[locale]/page.tsx
index dc8852154..4931fc85b 100644
--- a/apps/researcher/src/app/[locale]/page.tsx
+++ b/apps/researcher/src/app/[locale]/page.tsx
@@ -92,9 +92,9 @@ export default async function Home({searchParams = {}}: Props) {
let searchResult: SearchResult | undefined;
try {
searchResult = await heritageObjects.search(searchOptions);
- } catch (error) {
+ } catch (err) {
hasError = true;
- console.error(error);
+ console.error(err);
}
const locale = useLocale();
diff --git a/apps/researcher/src/app/[locale]/persons/page.tsx b/apps/researcher/src/app/[locale]/persons/page.tsx
index 82f2fc269..437d07398 100644
--- a/apps/researcher/src/app/[locale]/persons/page.tsx
+++ b/apps/researcher/src/app/[locale]/persons/page.tsx
@@ -98,9 +98,9 @@ export default async function Home({searchParams = {}}: Props) {
let searchResult: SearchResult | undefined;
try {
searchResult = await personFetcher.search(searchOptions);
- } catch (error) {
+ } catch (err) {
hasError = true;
- console.error(error);
+ console.error(err);
}
const locale = useLocale();
diff --git a/apps/researcher/src/components/add-object-list-form/actions.ts b/apps/researcher/src/components/add-object-list-form/actions.ts
new file mode 100644
index 000000000..b386b0801
--- /dev/null
+++ b/apps/researcher/src/components/add-object-list-form/actions.ts
@@ -0,0 +1,18 @@
+'use server';
+
+import {getCommunityById} from '@/lib/community';
+import {objectList} from '@colonial-collections/database';
+import {revalidatePath} from 'next/cache';
+
+interface List {
+ communityId: string;
+ createdBy: string;
+ name: string;
+ description?: string;
+}
+
+export async function addList(list: List) {
+ await objectList.create(list);
+ const community = await getCommunityById(list.communityId);
+ revalidatePath(`/[locale]/communities/${community.slug}`, 'page');
+}
diff --git a/apps/researcher/src/components/add-object-list-form/index.tsx b/apps/researcher/src/components/add-object-list-form/index.tsx
new file mode 100644
index 000000000..311ae6dd4
--- /dev/null
+++ b/apps/researcher/src/components/add-object-list-form/index.tsx
@@ -0,0 +1,151 @@
+'use client';
+
+import {useAuth} from '@clerk/nextjs';
+import {addList} from './actions';
+import {useForm, SubmitHandler} from 'react-hook-form';
+import {zodResolver} from '@hookform/resolvers/zod';
+import {insertObjectListSchema} from '@colonial-collections/database/client';
+import {useTranslations} from 'next-intl';
+import {useSlideOut, useNotifications} from 'ui';
+import {camelCase} from 'tiny-case';
+
+interface FormProps {
+ communityId: string;
+ userId: string;
+ slideOutId: string;
+}
+
+interface FormValues {
+ name: string;
+ description: string;
+ createdBy: string;
+ communityId: string;
+}
+
+function Form({communityId, userId, slideOutId}: FormProps) {
+ const {
+ register,
+ handleSubmit,
+ setError,
+ formState: {errors, isSubmitting},
+ } = useForm({
+ resolver: zodResolver(insertObjectListSchema),
+ defaultValues: {
+ name: '',
+ description: '',
+ createdBy: userId,
+ communityId,
+ },
+ });
+
+ const t = useTranslations('AddObjectListForm');
+ const {setIsVisible} = useSlideOut();
+ const {addNotification} = useNotifications();
+
+ const onSubmit: SubmitHandler
+
-
-
+
+
- + {t('title')} + + {community.name} + +
+ +
+
+ {/*Place the description here*/}
+
+
+
{t('objectListsTitle')}
-
- {/*Place the lists here */}
+
+
-
+
+
+
+
+
+
+
+
+ {t('objectListsTitle')}
+{t('objectListsSubTitle', {count: objectLists.length})}
+
+ {isAdmin(memberships) && (
+
+ {t('addObjectListButton')}
+
+ )}
+
+
+ {objectLists.map(objectList => (
+
+
+ {objectList.name} +
+{objectList.description}
+ +
+
+
+ ))}
+ -
+ {objectList.objects?.map(object => (
+
+
+
+ {/* TODO add number of lists here */}
+
+
+
+
+
+ );
+}
diff --git a/apps/researcher/src/lib/community.test.ts b/apps/researcher/src/lib/community.test.ts
index 8528034e5..82ef5fe87 100644
--- a/apps/researcher/src/lib/community.test.ts
+++ b/apps/researcher/src/lib/community.test.ts
@@ -1,6 +1,40 @@
import {describe, expect, it} from '@jest/globals';
import {auth} from '@clerk/nextjs';
-import {isAdmin, Membership, sort, SortBy} from './community';
+import {isAdmin, sort, SortBy} from './community';
+import {OrganizationMembership} from '@clerk/nextjs/dist/types/server';
+
+const basicOrganization = {
+ id: 'organization1',
+ name: 'Organization 1',
+ slug: 'organization-1',
+ imageUrl: 'https://example.com/image.png',
+ createdAt: 1690000000000,
+ updatedAt: 1690000000000,
+ logoUrl: null,
+ createdBy: 'me',
+ publicMetadata: null,
+ privateMetadata: {},
+ maxAllowedMemberships: 100,
+ adminDeleteEnabled: true,
+};
+
+const basicMembership = {
+ id: 'membership1',
+ role: 'admin',
+ publicUserData: {
+ identifier: 'me',
+ userId: 'me',
+ firstName: 'John',
+ lastName: 'Doe',
+ profileImageUrl: 'https://example.com/image.png',
+ imageUrl: 'https://example.com/image.png',
+ },
+ publicMetadata: {},
+ privateMetadata: {},
+ createdAt: 1690000000000,
+ updatedAt: 1690000000000,
+ organization: basicOrganization,
+};
jest.mock('@clerk/nextjs', () => ({
auth: jest.fn().mockImplementation(() => ({
@@ -10,25 +44,23 @@ jest.mock('@clerk/nextjs', () => ({
describe('isAdmin', () => {
it('returns true if user is an admin', () => {
- const memberships: ReadonlyArray{t('title')}
+ {userId && ( + + )} +
+ {notifications.map(notification => (
+
+ );
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 3b1163cd6..1c2aa1442 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -21,6 +21,7 @@
"classnames": "2.3.2",
"next": "13.5.2",
"next-intl": "3.0.0-beta.7",
- "react": "18.2.0"
+ "react": "18.2.0",
+ "zustand": "4.4.1"
}
}
diff --git a/packages/ui/slide-out.tsx b/packages/ui/slide-out.tsx
new file mode 100644
index 000000000..04d749f50
--- /dev/null
+++ b/packages/ui/slide-out.tsx
@@ -0,0 +1,63 @@
+'use client';
+
+import {create} from 'zustand';
+import {ReactNode, ButtonHTMLAttributes, useEffect} from 'react';
+import {usePathname} from 'next/navigation';
+
+interface SlideOutState {
+ visibleIds: {
+ [id: string]: Boolean;
+ };
+ setIsVisible: (id: string, isVisible: Boolean) => void;
+ isVisible: (id: string) => Boolean;
+}
+
+export const useSlideOut = create
+
+ ))}
+ {notification.message}
+
+