Currently the listing view uses data directly from the template. This will be problematic when moving to the publisher app as it would require the data for every view to be embedded into one template. This PR refactors the app so that the data comes from an API endpoint, /api/:snap_name/listing in this case.
This application is split into sections, one for each section of the listing page, e.g Listing details, Contact information and Additional information. Each one of these components contains sub-components that are only relevant to that component.
The data for the GET request has been formatted so it works out of the box with the form which uses React Hook Form. For the POST request, the store API requires the data in a specific format, for example all of the images (icon, banner, and screenshots) need to be present in an array, even if only one of them has changed. Therefore there are some utilities to identify changed fields and format the data so it can be saved.
React Query is used to manage the data requests. Each method has been separated into a hook to make reuse easier. The ListingForm component is a child component of the main App component, with the data passed to that component once it is available, in order to avoid the state where no data is available.
Once the form has saved successfully it makes a new GET request to get the latest data and then calls the reset method from React Hook Form with the new default values so the form is then in a reset state with the latest data.
The application makes use of shared components for the PageHeader and SaveAndPreview. These are used by the rest of the publisher app and it will make it easier to integrate the listing page into the publisher app once this PR is merged.
webteam-app
commented
1 week ago 
Demo
Jenkins 
demos.haus
Done
Currently the listing view uses data directly from the template. This will be problematic when moving to the publisher app as it would require the data for every view to be embedded into one template. This PR refactors the app so that the data comes from an API endpoint,
/api/:snap_name/listingin this case.This application is split into sections, one for each section of the listing page, e.g Listing details, Contact information and Additional information. Each one of these components contains sub-components that are only relevant to that component.
The data for the
GETrequest has been formatted so it works out of the box with the form which uses React Hook Form. For thePOSTrequest, the store API requires the data in a specific format, for example all of the images (icon, banner, and screenshots) need to be present in an array, even if only one of them has changed. Therefore there are some utilities to identify changed fields and format the data so it can be saved.React Query is used to manage the data requests. Each method has been separated into a hook to make reuse easier. The
ListingFormcomponent is a child component of the mainAppcomponent, with the data passed to that component once it is available, in order to avoid the state where no data is available.Once the form has saved successfully it makes a new
GETrequest to get the latest data and then calls theresetmethod from React Hook Form with the new default values so the form is then in a reset state with the latest data.The application makes use of shared components for the
PageHeaderandSaveAndPreview. These are used by the rest of the publisher app and it will make it easier to integrate the listing page into the publisher app once this PR is merged.How to QA
Testing