Skip to content

feat: Implement pause listing functionality #284

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
arif-u-ahmed wants to merge 12 commits into
base: main
Choose a base branch
from
Draft

feat: Implement pause listing functionality #284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
5285495
feat: implement pause listing functionality
arif-u-ahmed Nov 17, 2025
caebdcf
test: add unit tests and Storybook stories for pause listing
arif-u-ahmed Nov 17, 2025
564893e
Fix ui build by adjusting tsconfig
arif-u-ahmed Nov 19, 2025
39b5f0f
chore: update Docusaurus and testing library dependencies, and add ne…
arif-u-ahmed Nov 19, 2025
3a3ecfc
Merge main into feature/pause-listing
arif-u-ahmed Nov 19, 2025
1bba7df
chore: merge main into feature/pause-listing
arif-u-ahmed Nov 20, 2025
4963a6a
fix: remove unused mapDomainStateToUIStatus helper function
arif-u-ahmed Nov 21, 2025
9b18f4f
refactor: standardize formatting in GraphQL fragments and resolvers
arif-u-ahmed Nov 21, 2025
20db9dd
refactor: address Sourcery code review suggestions
arif-u-ahmed Nov 21, 2025
bd488a8
test: update item listing resolver tests for new query and pause sign…
arif-u-ahmed Nov 21, 2025
aa96154
Merge main into feature/pause-listing
arif-u-ahmed Jan 28, 2026
4e92fe3
Merge remote-tracking branch 'origin/feature/pause-listing' into feat…
arif-u-ahmed Jan 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions apps/ui-sharethrift/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@
"@ant-design/v5-patch-for-react-19": "^1.0.3",
"@apollo/client": "^4.0.7",
"@sthrift/ui-components": "workspace:*",
"@twilio/conversations": "^2.6.3",
"antd": "^5.27.1",
"clean": "^4.0.2",
"crypto-hash": "^3.1.0",
"dayjs": "^1.11.18",
"graphql": "^16.11.0",
Expand All @@ -43,6 +45,7 @@
"@storybook/react": "^9.1.17",
"@storybook/react-vite": "^9.1.17",
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.0",
"@types/lodash": "^4.17.20",
"@types/react": "^19.1.9",
"@types/react-dom": "^19.1.7",
Expand Down
16 changes: 10 additions & 6 deletions apps/ui-sharethrift/src/components/layouts/home/my-listings/components/all-listings-card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,18 @@ const AllListingsCard: React.FC<AllListingsCardProps> = ({

if (status === 'Active' || status === 'Reserved') {
buttons.push(
<Button
<Popconfirm
key="pause"
type="link"
size="small"
onClick={() => onAction('pause', record.id)}
title="Pause this listing?"
description="Are you sure you want to pause this listing? It will be removed from search results and marked as inactive until you unpause it."
onConfirm={() => onAction('pause', record.id)}
okText="Yes"
cancelText="No"
>
Pause
</Button>,
<Button type="link" size="small">
Pause
</Button>
</Popconfirm>,
);
}

Expand Down
106 changes: 57 additions & 49 deletions ...t/src/components/layouts/home/my-listings/components/all-listings-table.container.graphql
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,71 @@
fragment HomeAllListingsTableContainerListingFields on ListingAll {
id
title
state
images
createdAt
sharingPeriodStart
sharingPeriodEnd
id
title
state
images
createdAt
sharingPeriodStart
sharingPeriodEnd
}

fragment HomeAllListingsTableContainerItemListingFields on ItemListing {
id
title
state
images
createdAt
sharingPeriodStart
sharingPeriodEnd
id
title
state
images
createdAt
sharingPeriodStart
sharingPeriodEnd
}

query HomeAllListingsTableContainerMyListingsAll(
$page: Int!
$pageSize: Int!
$searchText: String
$statusFilters: [String!]
$sorter: SorterInput
$page: Int!
$pageSize: Int!
$searchText: String
$statusFilters: [String!]
$sorter: SorterInput
) {
myListingsAll(
page: $page
pageSize: $pageSize
searchText: $searchText
statusFilters: $statusFilters
sorter: $sorter
) {
items {
...HomeAllListingsTableContainerListingFields
}
total
page
pageSize
}
myListingsAll(
page: $page
pageSize: $pageSize
searchText: $searchText
statusFilters: $statusFilters
sorter: $sorter
) {
items {
...HomeAllListingsTableContainerListingFields
}
total
page
pageSize
}
}

mutation HomeAllListingsTableContainerPauseItemListing($id: ObjectID!) {
pauseItemListing(id: $id) {
id
state
updatedAt
}
}

mutation HomeAllListingsTableContainerCancelItemListing($id: ObjectID!) {
cancelItemListing(id: $id) {
status {
success
errorMessage
}
listing {
...HomeAllListingsTableContainerItemListingFields
}
}
cancelItemListing(id: $id) {
status {
success
errorMessage
}
listing {
...HomeAllListingsTableContainerItemListingFields
}
}
}

mutation HomeAllListingsTableContainerDeleteListing($id: ObjectID!) {
deleteItemListing(id: $id) {
status {
success
errorMessage
}
}
}
deleteItemListing(id: $id) {
status {
success
errorMessage
}
}
}
129 changes: 129 additions & 0 deletions .../src/components/layouts/home/my-listings/components/all-listings-table.container.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,129 @@
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, waitFor } from '@testing-library/react';
import { MockedProvider } from '@apollo/client/testing/react';
import { AllListingsTableContainer } from './all-listings-table.container';
import { HomeAllListingsTableContainerMyListingsAllDocument } from '../../../../../generated.tsx';

// Mock Ant Design message
vi.mock('antd', async () => {
const actual = await vi.importActual('antd');
return {
...actual,
message: {
success: vi.fn(),
error: vi.fn(),
},
};
});

describe('AllListingsTableContainer', () => {
const mockListingsData = {
myListingsAll: {
items: [
{
id: 'listing-1',
title: 'Test Listing',
state: 'Published',
images: ['image1.jpg'],
createdAt: '2025-01-01T00:00:00Z',
sharingPeriodStart: '2025-02-01T00:00:00Z',
sharingPeriodEnd: '2025-02-28T00:00:00Z',
},
],
total: 1,
page: 1,
pageSize: 6,
},
};

const mocks = [
{
request: {
query: HomeAllListingsTableContainerMyListingsAllDocument,
variables: {
page: 1,
pageSize: 6,
searchText: '',
statusFilters: [],
sorter: undefined,
},
},
result: {
data: mockListingsData,
},
},
];

beforeEach(() => {
vi.clearAllMocks();
});

it('should render and display listings', async () => {
render(
<MockedProvider mocks={mocks}>
<AllListingsTableContainer currentPage={1} onPageChange={vi.fn()} />
</MockedProvider>,
);

await waitFor(() => {
expect(screen.getByText('Test Listing')).toBeTruthy();
});
});

it('should map domain state to UI status correctly', async () => {
const mocksWithPaused = [
{
request: {
query: HomeAllListingsTableContainerMyListingsAllDocument,
variables: {
page: 1,
pageSize: 6,
searchText: '',
statusFilters: [],
sorter: undefined,
},
},
result: {
data: {
myListingsAll: {
items: [
{
id: 'listing-1',
title: 'Published Listing',
state: 'Published',
images: [],
createdAt: '2025-01-01T00:00:00Z',
sharingPeriodStart: '2025-02-01T00:00:00Z',
sharingPeriodEnd: '2025-02-28T00:00:00Z',
},
{
id: 'listing-2',
title: 'Paused Listing',
state: 'Paused',
images: [],
createdAt: '2025-01-01T00:00:00Z',
sharingPeriodStart: '2025-02-01T00:00:00Z',
sharingPeriodEnd: '2025-02-28T00:00:00Z',
},
],
total: 2,
page: 1,
pageSize: 6,
},
},
},
},
];

render(
<MockedProvider mocks={mocksWithPaused}>
<AllListingsTableContainer currentPage={1} onPageChange={vi.fn()} />
</MockedProvider>,
);

await waitFor(() => {
expect(screen.getByText('Published Listing')).toBeTruthy();
expect(screen.getByText('Paused Listing')).toBeTruthy();
});
});
});
17 changes: 17 additions & 0 deletions ...hrift/src/components/layouts/home/my-listings/components/all-listings-table.container.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
HomeAllListingsTableContainerCancelItemListingDocument,
HomeAllListingsTableContainerDeleteListingDocument,
HomeAllListingsTableContainerMyListingsAllDocument,
HomeAllListingsTableContainerPauseItemListingDocument,
} from '../../../../../generated.tsx';
import { AllListingsTable } from './all-listings-table.tsx';

Expand Down Expand Up @@ -61,6 +62,19 @@ export const AllListingsTableContainer: React.FC<
},
);

const [pauseListing] = useMutation(
HomeAllListingsTableContainerPauseItemListingDocument,
{
onCompleted: () => {
message.success('Listing paused successfully');
refetch();
},
onError: (error) => {
message.error(`Failed to pause listing: ${error.message}`);
},
},
);

const [deleteListing] = useMutation(
HomeAllListingsTableContainerDeleteListingDocument,
{
Expand All @@ -81,6 +95,7 @@ export const AllListingsTableContainer: React.FC<
);

const listings = data?.myListingsAll?.items ?? [];
console.log('Listings data:', data);
const total = data?.myListingsAll?.total ?? 0;

const handleSearch = (value: string) => {
Expand Down Expand Up @@ -112,6 +127,8 @@ export const AllListingsTableContainer: React.FC<
const handleAction = async (action: string, listingId: string) => {
if (action === 'cancel') {
await cancelListing({ variables: { id: listingId } });
} else if (action === 'pause') {
await pauseListing({ variables: { id: listingId } });
} else if (action === 'delete') {
await deleteListing({ variables: { id: listingId } });
} else {
Expand Down
16 changes: 10 additions & 6 deletions .../ui-sharethrift/src/components/layouts/home/my-listings/components/all-listings-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,14 +63,18 @@ export const AllListingsTable: React.FC<AllListingsTableProps> = ({
// Conditional actions based on status
if (status === 'Active' || status === 'Reserved') {
buttons.push(
<Button
<Popconfirm
key="pause"
type="link"
size="small"
onClick={() => onAction('pause', record.id)}
title="Pause this listing?"
description="Are you sure you want to pause this listing? It will be removed from search results and marked as inactive until you unpause it."
onConfirm={() => onAction('pause', record.id)}
okText="Yes"
cancelText="No"
>
Pause
</Button>
<Button type="link" size="small">
Pause
</Button>
</Popconfirm>,
);
}

Expand Down
Loading
Loading