Initial repository setup with listing information and reservation request accept functionality

.gitignore

@@ -18,3 +18,6 @@ __*
 apps/ui-sharethrift/tsconfig.tsbuildinfo
 **/node_modules
 **/dist
+
+# Log files
+*.log

apps/api/src/index.ts

@@ -34,7 +34,6 @@ const isDevelopment = NODE_ENV === 'development';
 
 Cellix.initializeInfrastructureServices<ApiContextSpec, ApplicationServices>(
 	(serviceRegistry) => {
-
 		serviceRegistry
 			.registerInfrastructureService(
 				new ServiceMongoose(
@@ -47,7 +46,9 @@ Cellix.initializeInfrastructureServices<ApiContextSpec, ApplicationServices>(
 				new ServiceTokenValidation(TokenValidationConfig.portalTokens),
 			)
 			.registerInfrastructureService(
-				isDevelopment ? new ServiceMessagingMock() : new ServiceMessagingTwilio(),
+				isDevelopment
+					? new ServiceMessagingMock()
+					: new ServiceMessagingTwilio(),
 			)
 			.registerInfrastructureService(
         isDevelopment ? new PaymentServiceMock() : new PaymentServiceCybersource()

apps/api/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@cellix/typescript-config/node.json",
+	"extends": "@cellix/typescript-config/node.json",
 	"compilerOptions": {
 		"rootDir": ".",
 		"outDir": "dist"

apps/ui-sharethrift/src/components/layouts/home/account/profile/stories/ProfilePage.stories.tsx

@@ -14,14 +14,18 @@ import {
 import { expect, within } from 'storybook/test';
 
 const mockUserSarah: PersonalUser = {
+	__typename: 'PersonalUser',
 	id: '507f1f77bcf86cd799439099',
+	userIsAdmin: false,
 	userType: 'personal-user',
 	account: {
+		__typename: 'PersonalUserAccount',
 		accountType: 'verified-personal',
 
 		username: 'sarah_williams',
 		email: 'sarah.williams@example.com',
 		profile: {
+			__typename: 'PersonalUserAccountProfile',
 			firstName: 'Sarah',
 			lastName: 'Williams',
 			location: {
@@ -36,10 +40,14 @@ const mockUserSarah: PersonalUser = {
 };
 
 const mockUserAlex: PersonalUser = {
+	__typename: 'PersonalUser',
 	id: '507f1f77bcf86cd799439102',
+	userIsAdmin: false,
 	userType: 'personal-user',
 	account: {
+		__typename: 'PersonalUserAccount',
 		profile: {
+			__typename: 'PersonalUserAccountProfile',
 			firstName: 'Alex',
 			lastName: '',
 			location: {
@@ -57,6 +65,7 @@ const mockUserAlex: PersonalUser = {
 
 const mockTwoListings: ItemListing[] = [
 	{
+		__typename: 'ItemListing',
 		id: '64f7a9c2d1e5b97f3c9d0a41',
 		title: 'City Bike',
 		description:
@@ -72,6 +81,7 @@ const mockTwoListings: ItemListing[] = [
 		listingType: 'item-listing',
 	},
 	{
+		__typename: 'ItemListing',
 		id: '64f7a9c2d1e5b97f3c9d0a13',
 		title: 'Projector',
 		description: 'HD projector for movie nights and presentations.',
@@ -87,19 +97,6 @@ const mockTwoListings: ItemListing[] = [
 	},
 ];
 
-const userIsAdminMockRequest = (userId: string) => {
-	return {
-		request: {
-			query: UseUserIsAdminDocument,
-		},
-		result: {
-			data: {
-				currentUser: {id: userId, userIsAdmin: false },
-			},
-		},
-	};
-};
-
 const meta: Meta<typeof HomeRoutes> = {
 	title: 'Pages/Account/Profile',
 	component: HomeRoutes,
@@ -121,6 +118,20 @@ export const DefaultView: Story = {
 	parameters: {
 		apolloClient: {
 			mocks: [
+				{
+					request: {
+						query: UseUserIsAdminDocument,
+					},
+					result: {
+						data: {
+							currentUser: {
+								id: mockUserSarah.id,
+								userIsAdmin: false,
+								__typename: 'PersonalUser',
+							},
+						},
+					},
+				},
 				{
 					request: {
 						query: HomeAccountProfileViewContainerCurrentUserDocument,
@@ -140,15 +151,15 @@ export const DefaultView: Story = {
 					result: {
 						data: {
 							myListingsAll: {
+								__typename: 'PaginatedMyListings',
 								items: mockTwoListings,
-								total: 2,
+								total: mockTwoListings.length,
 								page: 1,
 								pageSize: 100,
 							},
 						},
 					},
 				},
-				userIsAdminMockRequest(mockUserSarah.id),
 			],
 		},
 	},
@@ -158,6 +169,20 @@ export const NoListings: Story = {
 	parameters: {
 		apolloClient: {
 			mocks: [
+				{
+					request: {
+						query: UseUserIsAdminDocument,
+					},
+					result: {
+						data: {
+							currentUser: {
+								id: mockUserAlex.id,
+								userIsAdmin: false,
+								__typename: 'PersonalUser',
+							},
+						},
+					},
+				},
 				{
 					request: {
 						query: HomeAccountProfileViewContainerCurrentUserDocument,
@@ -175,11 +200,16 @@ export const NoListings: Story = {
 					},
 					result: {
 						data: {
-							myListingsAll:  { items: [], total: 0, page: 1, pageSize: 100 },
+							myListingsAll: {
+								__typename: 'PaginatedMyListings',
+								items: [],
+								total: 0,
+								page: 1,
+								pageSize: 100,
+							},
 						},
 					},
 				},
-				userIsAdminMockRequest(mockUserAlex.id),
 			],
 		},
 	},

apps/ui-sharethrift/src/components/layouts/home/components/view-listing/listing-information/listing-information.container.tsx

@@ -1,20 +1,19 @@
 import { useApolloClient, useMutation, useQuery } from '@apollo/client/react';
-import { useState } from 'react';
 import { message } from 'antd';
-import { ListingInformation } from './listing-information.tsx';
-
+import { useState } from 'react';
 import {
-	HomeListingInformationCreateReservationRequestDocument,
 	type CreateReservationRequestInput,
+	HomeListingInformationCreateReservationRequestDocument,
+	type ItemListing,
+	ViewListingActiveReservationRequestForListingDocument,
+	type ViewListingActiveReservationRequestForListingQuery,
 	ViewListingCurrentUserDocument,
 	type ViewListingCurrentUserQuery,
 	ViewListingQueryActiveByListingIdDocument,
 	type ViewListingQueryActiveByListingIdQuery,
 	type ViewListingQueryActiveByListingIdQueryVariables,
-	ViewListingActiveReservationRequestForListingDocument,
-	type ItemListing,
-	type ViewListingActiveReservationRequestForListingQuery,
 } from '../../../../../../generated.tsx';
+import { ListingInformation } from './listing-information.tsx';
 
 interface ListingInformationContainerProps {
 	listing: ItemListing;

apps/ui-sharethrift/src/components/layouts/home/components/view-listing/listing-information/listing-information.tsx

@@ -1,14 +1,14 @@
-import { Row, Col, DatePicker, Button } from 'antd';
-import dayjs from 'dayjs';
+import { LoadingOutlined } from '@ant-design/icons';
+import { Button, Col, DatePicker, Row } from 'antd';
 import type { Dayjs } from 'dayjs';
+import dayjs from 'dayjs';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import type {
-	ViewListingQueryActiveByListingIdQuery,
 	ItemListing,
 	ViewListingActiveReservationRequestForListingQuery,
+	ViewListingQueryActiveByListingIdQuery,
 } from '../../../../../../generated.tsx';
-import { LoadingOutlined } from '@ant-design/icons';
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 
 // Manual isBetween logic for Dayjs
 function isBetweenManual(

apps/ui-sharethrift/src/components/layouts/home/my-listings/components/AllListingsTableHeader.tsx

@@ -0,0 +1,37 @@
+
+import { Input } from 'antd';
+const { Search } = Input;
+
+interface ListingTitleFilterDropdownProps {
+  readonly onSearch: (value: string) => void;
+  readonly searchText: string;
+  readonly setSelectedKeys: (selectedKeys: React.Key[]) => void;
+  readonly selectedKeys: React.Key[];
+  readonly confirm: () => void;
+}
+
+export function ListingTitleFilterDropdown({
+  onSearch,
+  searchText,
+  setSelectedKeys,
+  selectedKeys,
+  confirm,
+}: ListingTitleFilterDropdownProps): React.ReactNode {
+  return (
+    <div style={{ padding: 8 }}>
+      <Search
+        placeholder="Search listings"
+        value={selectedKeys.length ? (selectedKeys[0] as string) : searchText}
+        onChange={(e) => {
+          setSelectedKeys(e.target.value ? [e.target.value] : []);
+        }}
+        onSearch={(value) => {
+          confirm();
+          onSearch(value);
+        }}
+        style={{ width: 200 }}
+        allowClear
+      />
+    </div>
+  );
+}

apps/ui-sharethrift/src/components/layouts/home/my-listings/components/AllListingsTableStatus.tsx

@@ -0,0 +1,11 @@
+import { Tag } from 'antd';
+
+import { getStatusTagClass } from './status-tag-class.ts';
+
+export function AllListingsTableStatus({
+	status,
+}: Readonly<{
+	status: string;
+}>): React.ReactNode {
+	return <Tag className={getStatusTagClass(status)}>{status}</Tag>;
+}

apps/ui-sharethrift/src/components/layouts/home/my-listings/components/all-listings-card.tsx

@@ -171,7 +171,7 @@ const AllListingsCard: React.FC<AllListingsCardProps> = ({
 								onClick={() => onViewPendingRequests(listing.id)}
 							>
 								<span style={{ display: 'flex', alignItems: 'center' }}>
-									View Pending Requests
+									View Requests
 									<Badge
 										count={0}
 										showZero