rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix delete vendor does not update the UI

Browse Source 
Signed-off-by: gearnode <bryan@frimin.fr>
This commit is contained in:
gearnode
2025-02-19 13:53:50 +01:00
parent 3cce6ea235
commit 50cc8e6b3b
6 changed files with 325 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
apps/console/src/pages/VendorListPage.tsx
View File

@@ -27,7 +27,12 @@ import { VendorListPage_vendors$key } from "./__generated__/VendorListPage_vendo
const ITEMS_PER_PAGE = 25;
const vendorListPageQuery = graphql`
query VendorListPageQuery($first: Int, $after: CursorKey, $last: Int, $before: CursorKey) {
query VendorListPageQuery(
$first: Int
$after: CursorKey
$last: Int
$before: CursorKey
) {
currentOrganization: node(id: "AZSfP_xAcAC5IAAAAAAltA") {
id
... on Organization {
@@ -38,15 +43,11 @@ const vendorListPageQuery = graphql`
`;
const vendorListFragment = graphql`
fragment VendorListPage_vendors on Organization
fragment VendorListPage_vendors on Organization
@refetchable(queryName: "VendorListPagePaginationQuery") {
id
vendors(
first: $first
after: $after
last: $last
before: $before
) @connection(key: "VendorListPage_vendors") {
vendors(first: $first, after: $after, last: $last, before: $before)
@connection(key: "VendorListPage_vendors") {
edges {
node {
id
@@ -66,7 +67,10 @@ const vendorListFragment = graphql`
`;
const createVendorMutation = graphql`
mutation VendorListPageCreateVendorMutation($input: CreateVendorInput!, $connections: [ID!]!) {
mutation VendorListPageCreateVendorMutation(
$input: CreateVendorInput!
$connections: [ID!]!
) {
createVendor(input: $input) {
vendorEdge @prependEdge(connections: $connections) {
node {
@@ -81,8 +85,13 @@ const createVendorMutation = graphql`
`;
const deleteVendorMutation = graphql`
mutation VendorListPageDeleteVendorMutation($input: DeleteVendorInput!) {
deleteVendor(input: $input)
mutation VendorListPageDeleteVendorMutation(
$input: DeleteVendorInput!
$connections: [ID!]!
) {
deleteVendor(input: $input) {
deletedVendorId @deleteEdge(connections: $connections)
}
}
`;
@@ -162,13 +171,18 @@ function VendorListContent({
}: {
queryRef: PreloadedQuery<VendorListPageQueryType>;
}) {
const data = usePreloadedQuery<VendorListPageQueryType>(vendorListPageQuery, queryRef);
const data = usePreloadedQuery<VendorListPageQueryType>(
vendorListPageQuery,
queryRef,
);
const [searchParams, setSearchParams] = useSearchParams();
const [isPending, startTransition] = useTransition();
const [searchTerm, setSearchTerm] = useState("");
const [filteredVendors, setFilteredVendors] = useState<Array<any>>([]);
const [createVendor] = useMutation<VendorListPageCreateVendorMutation>(createVendorMutation);
const [deleteVendor] = useMutation<VendorListPageDeleteVendorMutation>(deleteVendorMutation);
const [createVendor] =
useMutation<VendorListPageCreateVendorMutation>(createVendorMutation);
const [deleteVendor] =
useMutation<VendorListPageDeleteVendorMutation>(deleteVendorMutation);
const {
data: vendorsConnection,
@@ -178,9 +192,13 @@ function VendorListContent({
hasPrevious,
isLoadingNext,
isLoadingPrevious,
} = usePaginationFragment<VendorListPagePaginationQuery, VendorListPage_vendors$key>(vendorListFragment, data.currentOrganization);
} = usePaginationFragment<
VendorListPagePaginationQuery,
VendorListPage_vendors$key
>(vendorListFragment, data.currentOrganization);
const vendors = vendorsConnection.vendors.edges.map((edge) => edge.node) ?? [];
const vendors =
vendorsConnection.vendors.edges.map((edge) => edge.node) ?? [];
const pageInfo = vendorsConnection.vendors.pageInfo;
const fuse = new Fuse(vendorsList, {
@@ -239,7 +257,12 @@ function VendorListContent({
onClick={() => {
createVendor({
variables: {
connections: [ConnectionHandler.getConnectionID(data.currentOrganization.id, "VendorListPageQuery_vendors")],
connections: [
ConnectionHandler.getConnectionID(
data.currentOrganization.id,
"VendorListPageQuery_vendors",
),
],
input: {
organizationId: data.currentOrganization.id,
name: vendor.name,
@@ -254,7 +277,8 @@ function VendorListContent({
setFilteredVendors([]);
toast({
title: "Vendor added",
description: "The vendor has been added successfully",
description:
"The vendor has been added successfully",
});
},
});
@@ -343,6 +367,12 @@ function VendorListContent({
) {
deleteVendor({
variables: {
connections: [
ConnectionHandler.getConnectionID(
data.currentOrganization.id,
"VendorListPage_vendors",
),
],
input: {
vendorId: vendor.id,
},
@@ -350,7 +380,8 @@ function VendorListContent({
onCompleted() {
toast({
title: "Vendor deleted",
description: "The vendor has been deleted successfully",
description:
"The vendor has been deleted successfully",
});
},
});

109
apps/console/src/pages/__generated__/VendorListPageDeleteVendorMutation.graphql.ts generated
View File

@@ -1,5 +1,5 @@
/**
* @generated SignedSource<<b97adcd0ae4816dc772fcbf3b3c6b3d7>>
* @generated SignedSource<<ff037e64f503f247a68922f86248bb10>>
* @lightSyntaxTransform
* @nogrep
*/
@@ -13,10 +13,13 @@ export type DeleteVendorInput = {
vendorId: string;
};
export type VendorListPageDeleteVendorMutation$variables = {
connections: ReadonlyArray<string>;
input: DeleteVendorInput;
};
export type VendorListPageDeleteVendorMutation$data = {
readonly deleteVendor: any;
readonly deleteVendor: {
readonly deletedVendorId: string;
};
};
export type VendorListPageDeleteVendorMutation = {
response: VendorListPageDeleteVendorMutation$data;
@@ -24,56 +27,106 @@ export type VendorListPageDeleteVendorMutation = {
};
const node: ConcreteRequest = (function(){
var v0 = [
var v0 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "connections"
},
v1 = {
"defaultValue": null,
"kind": "LocalArgument",
"name": "input"
},
v2 = [
{
"defaultValue": null,
"kind": "LocalArgument",
"name": "input"
"kind": "Variable",
"name": "input",
"variableName": "input"
}
],
v1 = [
{
"alias": null,
"args": [
{
"kind": "Variable",
"name": "input",
"variableName": "input"
}
],
"kind": "ScalarField",
"name": "deleteVendor",
"storageKey": null
}
];
v3 = {
"alias": null,
"args": null,
"kind": "ScalarField",
"name": "deletedVendorId",
"storageKey": null
};
return {
"fragment": {
"argumentDefinitions": (v0/*: any*/),
"argumentDefinitions": [
(v0/*: any*/),
(v1/*: any*/)
],
"kind": "Fragment",
"metadata": null,
"name": "VendorListPageDeleteVendorMutation",
"selections": (v1/*: any*/),
"selections": [
{
"alias": null,
"args": (v2/*: any*/),
"concreteType": "DeleteVendorPayload",
"kind": "LinkedField",
"name": "deleteVendor",
"plural": false,
"selections": [
(v3/*: any*/)
],
"storageKey": null
}
],
"type": "Mutation",
"abstractKey": null
},
"kind": "Request",
"operation": {
"argumentDefinitions": (v0/*: any*/),
"argumentDefinitions": [
(v1/*: any*/),
(v0/*: any*/)
],
"kind": "Operation",
"name": "VendorListPageDeleteVendorMutation",
"selections": (v1/*: any*/)
"selections": [
{
"alias": null,
"args": (v2/*: any*/),
"concreteType": "DeleteVendorPayload",
"kind": "LinkedField",
"name": "deleteVendor",
"plural": false,
"selections": [
(v3/*: any*/),
{
"alias": null,
"args": null,
"filters": null,
"handle": "deleteEdge",
"key": "",
"kind": "ScalarHandle",
"name": "deletedVendorId",
"handleArgs": [
{
"kind": "Variable",
"name": "connections",
"variableName": "connections"
}
]
}
],
"storageKey": null
}
]
},
"params": {
"cacheID": "6b9ec06210106cc8f8905fbfda5c60b0",
"cacheID": "278e42c6c988a64d4c863198f02df901",
"id": null,
"metadata": {},
"name": "VendorListPageDeleteVendorMutation",
"operationKind": "mutation",
"text": "mutation VendorListPageDeleteVendorMutation(\n $input: DeleteVendorInput!\n) {\n deleteVendor(input: $input)\n}\n"
"text": "mutation VendorListPageDeleteVendorMutation(\n $input: DeleteVendorInput!\n) {\n deleteVendor(input: $input) {\n deletedVendorId\n }\n}\n"
}
};
})();
(node as any).hash = "a435b00067d595fc8a1dec393ed1d0b6";
(node as any).hash = "20a320191535706246ae00aa05df991e";
export default node;