3a4ed6b2-4385-4c3c-ab6e-3cda8c366fcd

Committed 05 Jul 2024 11:48AM UTC coverage: 84.962% (-0.7%) from 85.678%

Build # 3a4ed6b2-4385-4c3c-ab6e-3cda8c366fcd

Build Type

Pull #39

circleci

Committed by

TuyishimireEric

Commit Message

Feat(Landing Page)

The site's landing page

Pull Request Pull Request #39: Feat(Landing Page)

Run Details

165 of 213 branches covered (77.46%)

Branch coverage included in aggregate %.

66 of 114 new or added lines in 3 files covered. (57.89%)

1 existing line in 1 file now uncovered.

2270 of 2653 relevant lines covered (85.56%)

1.62 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

67.07

/src/redux/slices/ProductSlice.ts

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';
import { axiosRequest, FormErrorInterface } from '@/utils';
import { CategoryAttributes } from './categorySlice';

interface sellerInterface {
  id: string;
  name: string;
  email: string;
  phone: string;
}

export interface ProductInterface {
  description: string | undefined;
  id: string;
  name: string;
  slug: string;
  images: string[];
  categoryId: string;
  category?: CategoryAttributes;
  price: number;
  expiryDate: Date;
  bonus: string;
  status: boolean;
  quantity: number;
  sellerId: string;
  seller?: sellerInterface;
  averageRatings?: number;
  reviewsCount?: number;
  createdAt: Date;
  updatedAt: Date;
  expired: boolean;
}

export interface ProductDataInterface {
  totalItems: number;
  products: ProductInterface[];
  totalPages: number;
  from: number;
  to: number;
}

export interface SellerInterface {
  id: string;
  name: string;
  email: string;
  phone: string;
}

export interface ProductDetailsInterface {
  bonus: string;
  status: string;
  price: string;
  quantity: string;
  description: string;
  categoryId: null;
  expiryDate: string;
  images: never[];
  name: string;
  product: ProductInterface;
  relatedProducts: ProductInterface[];
  sellerInfo: SellerInterface;
}

interface ProductState {
  Grouped: {
    [key: string]: {
      data: ProductInterface[] | null;
      error: FormErrorInterface | null;
      loading: boolean;
    };
  };
  data: ProductDataInterface | null;
  selectedProduct: ProductDetailsInterface | null;
  loading: boolean;
  error: FormErrorInterface | null;
  success: boolean;
  showSideNav: boolean;
  message: String;
}

interface ProductsResponse {
  data: ProductDataInterface;
}

interface OrderBy {
  bonus: string;
}

export interface ProductQueryInterface {
  name?: string;
  limit?: string;
  page?: number;
  sellerId?: string;
  categoryId?: string;
  priceLessThan?: number;
  priceGreaterThan?: number;
  section?: string;
  orderBy?: OrderBy;
}

const initialState: ProductState = {
  Grouped: {},
  data: null,
  selectedProduct: null,
  loading: false,
  error: null,
  success: false,
  showSideNav: true,
  message: ''
};

export const getProductDetails = createAsyncThunk(
  'products/getDetails',
  async (productId: string, { rejectWithValue }) => {
    try {
      const response = await axiosRequest('GET', `/products/${productId}`);
      return response.data.data;
    } catch (err: unknown) {
      if (axios.isAxiosError(err) && err.response) {
        return rejectWithValue(err.response.data || 'Failed to fetch products');
      }
      const error = err as Error;
      return rejectWithValue({ message: error.message });
    }
  }
);
export const deleteProduct = createAsyncThunk(
  'products/delete',
  async (productId: string, { rejectWithValue }) => {
    try {
      const response = await axiosRequest(
        'DELETE',
        `/products/${productId}`,
        {},
        true
      );
      return response.data.data;
    } catch (err: unknown) {
      if (axios.isAxiosError(err) && err.response) {
        return rejectWithValue(err.response.data || 'Failed to delete product');
      }
      const error = err as Error;
      return rejectWithValue({ message: error.message });
    }
  }
);

export const getProducts = createAsyncThunk(
  'products/search',
  async (productQuery: ProductQueryInterface, { rejectWithValue }) => {
    try {
      const queryParams = new URLSearchParams();

      if (productQuery.name) queryParams.append('name', productQuery.name);
      if (productQuery.limit)
        queryParams.append('limit', productQuery.limit.toString());
      if (productQuery.page)
        queryParams.append('page', productQuery.page.toString());
      if (productQuery.sellerId)
        queryParams.append('sellerId', productQuery.sellerId);
      if (productQuery.categoryId)
        queryParams.append('categoryId', productQuery.categoryId);
      if (productQuery.priceLessThan)
        queryParams.append(
          'priceLessThan',
          productQuery.priceLessThan.toString()
        );
      if (productQuery.priceGreaterThan)
        queryParams.append(
          'priceGreaterThan',
          productQuery.priceGreaterThan.toString()
        );

      const url = `/products?${queryParams.toString()}`;

      const response = await axiosRequest<null, ProductsResponse>(
        'GET',
        url,
        null
      );

      return response.data.data;
    } catch (err: unknown) {
      if (axios.isAxiosError(err) && err.response) {
        return rejectWithValue(err.response.data || 'Failed to fetch products');
      }
      const error = err as Error;
      return rejectWithValue({ message: error.message });
    }
  }
);

export const getProductsByCategory = createAsyncThunk(
  'products/getByCategory',
  async (query: ProductQueryInterface, { rejectWithValue }) => {
    try {
      const Url =
        query.section == 'bonus'
          ? `/products?sort=bonus:asc&limit=10`
          : `/products?categoryId=${query.categoryId}&limit=10`;
      const response = await axiosRequest('GET', Url);

      return { section: query.section, products: response.data.data.products };
    } catch (err: unknown) {
      if (axios.isAxiosError(err) && err.response) {
        return rejectWithValue(err.response.data || 'Failed to fetch products');
      }
      const error = err as Error;
      return rejectWithValue({ message: error.message });
    }
  }
);

const productSlice = createSlice({
  name: 'product',
  initialState,
  reducers: {
    showSideNav(state, action) {
      state.showSideNav = action.payload;
    }
  },
  extraReducers: builder => {
    builder
      .addCase(getProductDetails.pending, state => {
        state.selectedProduct = null;
        state.loading = true;
        state.error = null;
        state.success = false;
      })
      .addCase(getProductDetails.fulfilled, (state, action) => {
        state.selectedProduct = action.payload;
        state.loading = false;
        state.error = null;
        state.success = true;
      })
      .addCase(getProductDetails.rejected, (state, action) => {
        state.selectedProduct = null;
        state.loading = false;
        state.error = action.payload as FormErrorInterface;
        state.success = false;
      })
      .addCase(deleteProduct.pending, state => {
        state.loading = false;
        state.error = null;
        state.success = false;
      })
      .addCase(deleteProduct.fulfilled, (state, action) => {
        state.loading = false;
        state.message = action.payload;
        state.error = null;
        state.success = true;
      })
      .addCase(deleteProduct.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload as FormErrorInterface;
        state.success = false;
      })
      .addCase(getProducts.pending, state => {
        state.loading = true;
        state.error = null;
        state.success = false;
      })
      .addCase(getProducts.fulfilled, (state, action) => {
        state.data = action.payload;
        state.loading = false;
        state.error = null;
        state.success = true;
      })
      .addCase(getProducts.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload as FormErrorInterface;
        state.success = false;
      })
      .addCase(getProductsByCategory.pending, (state, action) => {
        const section = action.meta.arg.section;
        if (section) {
          if (!state.Grouped[section]) {
            state.Grouped[section] = { loading: true, error: null, data: null };
          } else {
            state.Grouped[section].loading = true;
            state.Grouped[section].error = null;
          }
        }
      })
      .addCase(getProductsByCategory.fulfilled, (state, action) => {
        const { section, products } = action.payload;
        if (section) {
          state.Grouped[section] = {
            loading: false,
            error: null,
            data: products
          };
        }
      })
      .addCase(getProductsByCategory.rejected, (state, action) => {
        const section = action.meta.arg.section;
        if (section) {
          if (!state.Grouped[section]) {
            state.Grouped[section] = {
              loading: false,
              error: action.payload as FormErrorInterface,
              data: null
            };
          } else {
            state.Grouped[section].loading = false;
            state.Grouped[section].error = action.payload as FormErrorInterface;
          }
        }
      });
  }
});

export default productSlice.reducer;
export const { showSideNav } = productSlice.actions;

1	import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';	1✔
2	import axios from 'axios';	1✔
3	import { axiosRequest, FormErrorInterface } from '@/utils';	1✔
4	import { CategoryAttributes } from './categorySlice';	1✔
5		1✔
6	interface sellerInterface {	1✔
7	id: string;	1✔
8	name: string;	1✔
9	email: string;	1✔
10	phone: string;	1✔
11	}	1✔
12		1✔
13	export interface ProductInterface {	1✔
14	description: string \| undefined;	1✔
15	id: string;	1✔
16	name: string;	1✔
17	slug: string;	1✔
18	images: string[];	1✔
19	categoryId: string;	1✔
20	category?: CategoryAttributes;	1✔
21	price: number;	1✔
22	expiryDate: Date;	1✔
23	bonus: string;	1✔
24	status: boolean;	1✔
25	quantity: number;	1✔
26	sellerId: string;	1✔
27	seller?: sellerInterface;	1✔
28	averageRatings?: number;	1✔
29	reviewsCount?: number;	1✔
30	createdAt: Date;	1✔
31	updatedAt: Date;	1✔
32	expired: boolean;	1✔
33	}	1✔
34		1✔
35	export interface ProductDataInterface {	1✔
36	totalItems: number;	1✔
37	products: ProductInterface[];	1✔
38	totalPages: number;	1✔
39	from: number;	1✔
40	to: number;	1✔
41	}	1✔
42		1✔
43	export interface SellerInterface {	1✔
44	id: string;	1✔
45	name: string;	1✔
46	email: string;	1✔
47	phone: string;	1✔
48	}	1✔
49		1✔
50	export interface ProductDetailsInterface {	1✔
51	bonus: string;	1✔
52	status: string;	1✔
53	price: string;	1✔
54	quantity: string;	1✔
55	description: string;	1✔
56	categoryId: null;	1✔
57	expiryDate: string;	1✔
58	images: never[];	1✔
59	name: string;	1✔
60	product: ProductInterface;	1✔
61	relatedProducts: ProductInterface[];	1✔
62	sellerInfo: SellerInterface;	1✔
63	}	1✔
64		1✔
65	interface ProductState {	1✔
66	Grouped: {	1✔
67	[key: string]: {	1✔
68	data: ProductInterface[] \| null;	1✔
69	error: FormErrorInterface \| null;	1✔
70	loading: boolean;	1✔
71	};	1✔
72	};	1✔
73	data: ProductDataInterface \| null;	1✔
74	selectedProduct: ProductDetailsInterface \| null;	1✔
75	loading: boolean;	1✔
76	error: FormErrorInterface \| null;	1✔
77	success: boolean;	1✔
78	showSideNav: boolean;	1✔
79	message: String;	1✔
80	}	1✔
81		1✔
82	interface ProductsResponse {	1✔
83	data: ProductDataInterface;	1✔
84	}	1✔
85		1✔
86	interface OrderBy {	1✔
87	bonus: string;	1✔
88	}	1✔
89		1✔
90	export interface ProductQueryInterface {	1✔
91	name?: string;	1✔
92	limit?: string;	1✔
93	page?: number;	1✔
94	sellerId?: string;	1✔
95	categoryId?: string;	1✔
96	priceLessThan?: number;	1✔
97	priceGreaterThan?: number;	1✔
98	section?: string;	1✔
99	orderBy?: OrderBy;	1✔
100	}	1✔
101		1✔
102	const initialState: ProductState = {	1✔
103	Grouped: {},	1✔
104	data: null,	1✔
105	selectedProduct: null,	1✔
106	loading: false,	1✔
107	error: null,	1✔
108	success: false,	1✔
109	showSideNav: true,	1✔
110	message: ''	1✔
111	};	1✔
112		1✔
113	export const getProductDetails = createAsyncThunk(	1✔
114	'products/getDetails',	1✔
115	async (productId: string, { rejectWithValue }) => {	1✔
116	try {	×
117	const response = await axiosRequest('GET', `/products/${productId}`);	×
118	return response.data.data;	×
119	} catch (err: unknown) {	×
120	if (axios.isAxiosError(err) && err.response) {	×
121	return rejectWithValue(err.response.data \|\| 'Failed to fetch products');	×
122	}	×
123	const error = err as Error;	×
124	return rejectWithValue({ message: error.message });	×
125	}	×
126	}	×
127	);	1✔
128	export const deleteProduct = createAsyncThunk(	1✔
129	'products/delete',	1✔
130	async (productId: string, { rejectWithValue }) => {	1✔
131	try {	1✔
132	const response = await axiosRequest(	1✔
133	'DELETE',	1✔
134	`/products/${productId}`,	1✔
135	{},	1✔
136	true	1!
137	);	×
138	return response.data.data;	×
139	} catch (err: unknown) {	1✔
140	if (axios.isAxiosError(err) && err.response) {	1✔
141	return rejectWithValue(err.response.data \|\| 'Failed to delete product');	1!
142	}	1!
143	const error = err as Error;	×
144	return rejectWithValue({ message: error.message });	×
145	}	×
146	}	1✔
147	);	1✔
148		1✔
149	export const getProducts = createAsyncThunk(	1✔
150	'products/search',	1✔
151	async (productQuery: ProductQueryInterface, { rejectWithValue }) => {	1✔
152	try {	6✔
153	const queryParams = new URLSearchParams();	6✔
154		6✔
155	if (productQuery.name) queryParams.append('name', productQuery.name);	6!
156	if (productQuery.limit)	6✔
157	queryParams.append('limit', productQuery.limit.toString());	6!
158	if (productQuery.page)	6✔
159	queryParams.append('page', productQuery.page.toString());	6!
160	if (productQuery.sellerId)	6✔
161	queryParams.append('sellerId', productQuery.sellerId);	6!
162	if (productQuery.categoryId)	6✔
163	queryParams.append('categoryId', productQuery.categoryId);	6!
164	if (productQuery.priceLessThan)	6✔
165	queryParams.append(	6✔
166	'priceLessThan',	2✔
167	productQuery.priceLessThan.toString()	2✔
168	);	6✔
169	if (productQuery.priceGreaterThan)	6✔
170	queryParams.append(	6!
171	'priceGreaterThan',	×
172	productQuery.priceGreaterThan.toString()	×
173	);	6✔
174		6✔
175	const url = `/products?${queryParams.toString()}`;	6✔
176		6✔
177	const response = await axiosRequest<null, ProductsResponse>(	6✔
178	'GET',	6✔
179	url,	6✔
180	null	6✔
181	);	1✔
182		1✔
183	return response.data.data;	1✔
184	} catch (err: unknown) {	6✔
185	if (axios.isAxiosError(err) && err.response) {	5✔
186	return rejectWithValue(err.response.data \|\| 'Failed to fetch products');	5✔
187	}	5!
188	const error = err as Error;	×
189	return rejectWithValue({ message: error.message });	×
190	}	×
191	}	6✔
192	);	1✔
193		1✔
194	export const getProductsByCategory = createAsyncThunk(	1✔
195	'products/getByCategory',	1✔
196	async (query: ProductQueryInterface, { rejectWithValue }) => {	1✔
NEW 197	try {	×
NEW 198	const Url =	×
NEW 199	query.section == 'bonus'	×
NEW 200	? `/products?sort=bonus:asc&limit=10`	×
NEW 201	: `/products?categoryId=${query.categoryId}&limit=10`;	×
NEW 202	const response = await axiosRequest('GET', Url);	×
NEW 203		×
NEW 204	return { section: query.section, products: response.data.data.products };	×
NEW 205	} catch (err: unknown) {	×
NEW 206	if (axios.isAxiosError(err) && err.response) {	×
NEW 207	return rejectWithValue(err.response.data \|\| 'Failed to fetch products');	×
NEW 208	}	×
NEW 209	const error = err as Error;	×
NEW 210	return rejectWithValue({ message: error.message });	×
NEW 211	}	×
NEW 212	}	×
213	);	1✔
214		1✔
215	const productSlice = createSlice({	1✔
216	name: 'product',	1✔
217	initialState,	1✔
218	reducers: {	1✔
219	showSideNav(state, action) {	1✔
220	state.showSideNav = action.payload;	×
221	}	×
222	},	1✔
223	extraReducers: builder => {	1✔
224	builder	3✔
225	.addCase(getProductDetails.pending, state => {	3✔
226	state.selectedProduct = null;	×
227	state.loading = true;	×
228	state.error = null;	×
229	state.success = false;	×
230	})	×
231	.addCase(getProductDetails.fulfilled, (state, action) => {	3✔
232	state.selectedProduct = action.payload;	×
233	state.loading = false;	×
234	state.error = null;	×
235	state.success = true;	×
236	})	×
237	.addCase(getProductDetails.rejected, (state, action) => {	3✔
238	state.selectedProduct = null;	×
239	state.loading = false;	×
240	state.error = action.payload as FormErrorInterface;	×
241	state.success = false;	×
242	})	×
243	.addCase(deleteProduct.pending, state => {	3✔
244	state.loading = false;	×
245	state.error = null;	×
246	state.success = false;	×
247	})	×
248	.addCase(deleteProduct.fulfilled, (state, action) => {	3✔
249	state.loading = false;	×
250	state.message = action.payload;	×
251	state.error = null;	×
252	state.success = true;	×
253	})	×
254	.addCase(deleteProduct.rejected, (state, action) => {	3✔
255	state.loading = false;	×
256	state.error = action.payload as FormErrorInterface;	×
257	state.success = false;	×
258	})	×
259	.addCase(getProducts.pending, state => {	3✔
260	state.loading = true;	6✔
261	state.error = null;	6✔
262	state.success = false;	6✔
263	})	6✔
264	.addCase(getProducts.fulfilled, (state, action) => {	3✔
265	state.data = action.payload;	1✔
266	state.loading = false;	1✔
267	state.error = null;	1✔
268	state.success = true;	1✔
269	})	1✔
270	.addCase(getProducts.rejected, (state, action) => {	3✔
271	state.loading = false;	5✔
272	state.error = action.payload as FormErrorInterface;	5✔
273	state.success = false;	5✔
274	})	5✔
275	.addCase(getProductsByCategory.pending, (state, action) => {	3✔
NEW 276	const section = action.meta.arg.section;	×
NEW 277	if (section) {	×
NEW 278	if (!state.Grouped[section]) {	×
NEW 279	state.Grouped[section] = { loading: true, error: null, data: null };	×
NEW 280	} else {	×
NEW 281	state.Grouped[section].loading = true;	×
NEW 282	state.Grouped[section].error = null;	×
NEW 283	}	×
NEW 284	}	×
NEW 285	})	×
286	.addCase(getProductsByCategory.fulfilled, (state, action) => {	3✔
NEW 287	const { section, products } = action.payload;	×
NEW 288	if (section) {	×
NEW 289	state.Grouped[section] = {	×
NEW 290	loading: false,	×
NEW 291	error: null,	×
NEW 292	data: products	×
NEW 293	};	×
NEW 294	}	×
NEW 295	})	×
296	.addCase(getProductsByCategory.rejected, (state, action) => {	3✔
NEW 297	const section = action.meta.arg.section;	×
NEW 298	if (section) {	×
NEW 299	if (!state.Grouped[section]) {	×
NEW 300	state.Grouped[section] = {	×
NEW 301	loading: false,	×
NEW 302	error: action.payload as FormErrorInterface,	×
NEW 303	data: null	×
NEW 304	};	×
NEW 305	} else {	×
NEW 306	state.Grouped[section].loading = false;	×
NEW 307	state.Grouped[section].error = action.payload as FormErrorInterface;	×
NEW 308	}	×
NEW 309	}	×
UNCOV 310	});	×
311	}	3✔
312	});	1✔
313		1✔
314	export default productSlice.reducer;	1✔
315	export const { showSideNav } = productSlice.actions;	1✔

atlp-rwanda / alpha-ec-fe / 3a4ed6b2-4385-4c3c-ab6e-3cda8c366fcd

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous