Alexandr SaVBaD Waltz
c9807bd6d4
Fixes: 1) Correct mutation name from `setlanguage` to `setLanguage` for consistency; 2) Improve product listing reactivity by addressing missing initialization in `useStore`; 3) Replace generic product queries with parametrized `useProducts` for modularity; 4) Resolve minor typos, missing semicolons, and code formatting inconsistencies. Extra: 1) Refactor feedback-related types, composables, and GraphQL utilities for modularity; 2) Update styles, Vue templates, and related scripts with enhanced formatting; 3) Remove unused methods like `getProducts`, standardizing query reactivity; 4) Cleanup and organize imports across multiple files.
88 lines
No EOL
1.9 KiB
TypeScript
88 lines
No EOL
1.9 KiB
TypeScript
import { GET_PRODUCTS } from '~/graphql/queries/standalone/products';
|
|
import type {IProductResponse} from '~/types';
|
|
|
|
interface IProdVars {
|
|
first: number,
|
|
categoriesSlugs: string,
|
|
attributes?: string,
|
|
orderBy?: string,
|
|
minPrice?: number,
|
|
maxPrice?: number,
|
|
productAfter?: string
|
|
}
|
|
|
|
export function useStore(
|
|
slug: string,
|
|
attributes?: string,
|
|
orderBy?: string,
|
|
minPrice?: number,
|
|
maxPrice?: number,
|
|
productAfter?: string
|
|
) {
|
|
const variables = reactive<IProdVars>({
|
|
first: 15,
|
|
categoriesSlugs: slug,
|
|
attributes,
|
|
orderBy,
|
|
minPrice,
|
|
maxPrice,
|
|
productAfter
|
|
});
|
|
|
|
const { pending, data, error, refresh } = useAsyncQuery<IProductResponse>(
|
|
GET_PRODUCTS,
|
|
variables
|
|
);
|
|
|
|
const products = ref([...(data.value?.products.edges ?? [])]);
|
|
const pageInfo = computed(() => data.value?.products.pageInfo ?? null);
|
|
const isInitialized = ref(false);
|
|
|
|
watch(error, e => e && console.error('useStore products error', e));
|
|
|
|
watch(
|
|
data,
|
|
(newData) => {
|
|
if (!newData?.products?.edges) return;
|
|
|
|
const newEdges = newData.products.edges;
|
|
|
|
if (!isInitialized.value || !variables.productAfter) {
|
|
products.value = [...newEdges];
|
|
isInitialized.value = true;
|
|
} else {
|
|
products.value = [...products.value, ...newEdges];
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
watch(
|
|
() => variables.productAfter,
|
|
async (newCursor, oldCursor) => {
|
|
if (!newCursor || newCursor === oldCursor || !isInitialized.value) return;
|
|
await refresh();
|
|
}
|
|
);
|
|
|
|
watch(
|
|
[
|
|
() => variables.categoriesSlugs,
|
|
() => variables.attributes,
|
|
() => variables.orderBy,
|
|
() => variables.minPrice,
|
|
() => variables.maxPrice
|
|
],
|
|
async () => {
|
|
variables.productAfter = '';
|
|
await refresh();
|
|
}
|
|
);
|
|
|
|
return {
|
|
pending,
|
|
products,
|
|
pageInfo,
|
|
variables
|
|
};
|
|
} |