API and base slices are done

src/api/api.ts

@@ -0,0 +1,26 @@
+import { Accessory } from '../utils/types/Accessory';
+import { Phone } from '../utils/types/Phone';
+import { Product } from '../utils/types/Product';
+import { Tablet } from '../utils/types/Tablet';
+
+const BASE_URL =
+  'https://raw.githubusercontent.com/mate-academy/react_phone-catalog/f064fa3751d4adbc9a531a51805d593af585860b/public/';
+
+function wait(delay: number): Promise<void> {
+  return new Promise(resolve => {
+    setTimeout(resolve, delay);
+  });
+}
+
+function get<T>(url: string): Promise<T> {
+  const fullUrl = BASE_URL + url + '.json';
+
+  return wait(300)
+    .then(() => fetch(fullUrl))
+    .then(res => res.json());
+}
+
+export const getPhones = () => get<Phone[]>('/api/phones');
+export const getTablets = () => get<Tablet[]>('/api/tablets');
+export const getProducts = () => get<Product[]>('/api/products');
+export const getAccessories = () => get<Accessory[]>('/api/accessories');

src/app/slices/accessoriesSlice.ts

@@ -0,0 +1,48 @@
+import { PayloadAction, createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import { Accessory } from '../../utils/types/Accessory';
+import { getAccessories } from '../../api/api';
+
+interface AccessoryState {
+  accessories: Accessory[];
+  isAccessoryLoading: boolean;
+  errorOnAccessories: string;
+}
+
+const initialState: AccessoryState = {
+  accessories: [],
+  isAccessoryLoading: false,
+  errorOnAccessories: '',
+};
+
+export const loadAccessories = createAsyncThunk(
+  'accessories/loadAccessories',
+  () => getAccessories(),
+);
+
+export const accessoriesSlice = createSlice({
+  name: 'accessories',
+  initialState: initialState,
+  reducers: {
+    setAccessories: (state, action: PayloadAction<Accessory[]>) => {
+      state.accessories = action.payload;
+    },
+  },
+  extraReducers(builder) {
+    builder.addCase(loadAccessories.pending, state => {
+      state.isAccessoryLoading = true;
+    });
+    builder.addCase(
+      loadAccessories.fulfilled,
+      (state, action: PayloadAction<Accessory[]>) => {
+        state.accessories = action.payload;
+        state.isAccessoryLoading = false;
+      },
+    );
+    builder.addCase(loadAccessories.rejected, state => {
+      state.errorOnAccessories = 'error with accessories loading';
+      state.isAccessoryLoading = false;
+    });
+  },
+});
+
+export const { setAccessories } = accessoriesSlice.actions;

src/app/slices/phonesSlice.ts

@@ -0,0 +1,47 @@
+import { PayloadAction, createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+import { Phone } from '../../utils/types/Phone';
+import { getPhones } from '../../api/api';
+
+interface PhonesState {
+  phones: Phone[];
+  isPhonesLoading: boolean;
+  errorOnPhones: string;
+}
+
+const initialState: PhonesState = {
+  phones: [],
+  isPhonesLoading: false,
+  errorOnPhones: '',
+};
+
+export const loadPhones = createAsyncThunk('phones/loadPhones', () =>
+  getPhones(),
+);
+
+export const phonesSlice = createSlice({
+  name: 'phones',
+  initialState: initialState,
+  reducers: {
+    setPhones: (state, action: PayloadAction<Phone[]>) => {
+      state.phones = action.payload;
+    },
+  },
+  extraReducers(builder) {
+    builder.addCase(loadPhones.pending, state => {
+      state.isPhonesLoading = true;
+    });
+    builder.addCase(
+      loadPhones.fulfilled,
+      (state, action: PayloadAction<Phone[]>) => {
+        state.phones = action.payload;
+        state.isPhonesLoading = false;
+      },
+    );
+    builder.addCase(loadPhones.rejected, state => {
+      state.errorOnPhones = 'error with phones loading';
+      state.isPhonesLoading = false;
+    });
+  },
+});
+
+export const { setPhones } = phonesSlice.actions;

src/app/slices/productsSlice.ts

@@ -0,0 +1,47 @@
+import { PayloadAction, createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import { Product } from '../../utils/types/Product';
+import { getProducts } from '../../api/api';
+
+interface ProductsState {
+  products: Product[];
+  isProductsLoading: boolean;
+  errorOnProducts: string;
+}
+
+const initialState: ProductsState = {
+  products: [],
+  isProductsLoading: false,
+  errorOnProducts: '',
+};
+
+export const loadProducts = createAsyncThunk('products/loadProducts', () =>
+  getProducts(),
+);
+
+export const productsSlice = createSlice({
+  name: 'products',
+  initialState: initialState,
+  reducers: {
+    setProducts: (state, action: PayloadAction<Product[]>) => {
+      state.products = action.payload;
+    },
+  },
+  extraReducers(builder) {
+    builder.addCase(loadProducts.pending, state => {
+      state.isProductsLoading = true;
+    });
+    builder.addCase(
+      loadProducts.fulfilled,
+      (state, action: PayloadAction<Product[]>) => {
+        state.products = action.payload;
+        state.isProductsLoading = false;
+      },
+    );
+    builder.addCase(loadProducts.rejected, state => {
+      state.errorOnProducts = 'error with products loading';
+      state.isProductsLoading = false;
+    });
+  },
+});
+
+export const { setProducts } = productsSlice.actions;

src/app/slices/tabletsSlice.ts

@@ -0,0 +1,47 @@
+import { PayloadAction, createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import { Tablet } from '../../utils/types/Tablet';
+import { getTablets } from '../../api/api';
+
+interface TabletsState {
+  tablets: Tablet[];
+  isTabletsLoading: boolean;
+  errorOnTablets: string;
+}
+
+const initialState: TabletsState = {
+  tablets: [],
+  isTabletsLoading: false,
+  errorOnTablets: '',
+};
+
+export const loadTablets = createAsyncThunk('tablets/loadTablets', () =>
+  getTablets(),
+);
+
+export const tabletsSlice = createSlice({
+  name: 'tablets',
+  initialState: initialState,
+  reducers: {
+    setTablets: (state, action: PayloadAction<Tablet[]>) => {
+      state.tablets = action.payload;
+    },
+  },
+  extraReducers(builder) {
+    builder.addCase(loadTablets.pending, state => {
+      state.isTabletsLoading = true;
+    });
+    builder.addCase(
+      loadTablets.fulfilled,
+      (state, action: PayloadAction<Tablet[]>) => {
+        state.tablets = action.payload;
+        state.isTabletsLoading = false;
+      },
+    );
+    builder.addCase(loadTablets.rejected, state => {
+      state.errorOnTablets = 'error with tablets loading';
+      state.isTabletsLoading = false;
+    });
+  },
+});
+
+export const { setTablets } = tabletsSlice.actions;

src/app/store.ts

@@ -1,6 +1,16 @@
 import { combineSlices, configureStore } from '@reduxjs/toolkit';
+import { accessoriesSlice } from './slices/accessoriesSlice';
+import { phonesSlice } from './slices/phonesSlice';
+import { productsSlice } from './slices/productsSlice';
+import { tabletsSlice } from './slices/tabletsSlice';
+
+const rootReducer = combineSlices(
+  accessoriesSlice,
+  phonesSlice,
+  productsSlice,
+  tabletsSlice,
+);
 
-const rootReducer = combineSlices();
 export const store = configureStore({
   reducer: rootReducer,
 });