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/reduxHooks.ts

@@ -1,7 +1,6 @@
-import { TypedUseSelectorHook, useDispatch } from "react-redux";
-import { AppDispatch, RootState } from "./store";
-import { useSelector } from "react-redux";
-
+import { TypedUseSelectorHook, useDispatch } from 'react-redux';
+import { AppDispatch, RootState } from './store';
+import { useSelector } from 'react-redux';
 
 export const useAppDispatch: () => AppDispatch = useDispatch;
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

src/app/slices/accessoriesSlice.ts

@@ -0,0 +1,14 @@
+import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+import { Accessory } from '../../utils/types/Accessory';
+
+const initialState = null as Accessory[] | null;
+
+export const accessoriesSlice = createSlice({
+  name: 'accessories',
+  initialState: initialState,
+  reducers: {
+    setAccessories: (_, action: PayloadAction<Accessory[]>) => action.payload,
+  },
+});
+
+export const accessoriesActions = accessoriesSlice.actions;

src/app/slices/phonesSlice.ts

@@ -0,0 +1,14 @@
+import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+import { Phone } from '../../utils/types/Phone';
+
+const initialState = null as Phone[] | null;
+
+export const phonesSlice = createSlice({
+  name: 'phones',
+  initialState: initialState,
+  reducers: {
+    setPhones: (_, action: PayloadAction<Phone[]>) => action.payload,
+  },
+});
+
+export const phonesActions = phonesSlice.actions;

src/app/slices/productsSlice.ts

@@ -0,0 +1,14 @@
+import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+import { Product } from '../../utils/types/Product';
+
+const initialState = null as Product[] | null;
+
+export const productsSlice = createSlice({
+  name: 'products',
+  initialState: initialState,
+  reducers: {
+    setProducts: (_, action: PayloadAction<Product[]>) => action.payload,
+  },
+});
+
+export const productsActions = productsSlice.actions;

src/app/slices/tabletsSlice.ts

@@ -0,0 +1,14 @@
+import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+import { Tablet } from '../../utils/types/Tablet';
+
+const initialState = null as Tablet[] | null;
+
+export const tabletsSlice = createSlice({
+  name: 'tablets',
+  initialState: initialState,
+  reducers: {
+    setTablets: (_, action: PayloadAction<Tablet[]>) => action.payload,
+  },
+});
+
+export const tabletsActions = tabletsSlice.actions;

src/app/store.ts

@@ -1,9 +1,19 @@
-import { combineSlices, configureStore } from "@reduxjs/toolkit";
+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,
 });
 
 export type RootState = ReturnType<typeof rootReducer>;
-export type AppDispatch = typeof store.dispatch;
+export type AppDispatch = typeof store.dispatch;