fix after review

src/components/LaunchFilter/LaunchFilter.scss

@@ -1,7 +1,9 @@
+
 .launch-filter-list {
   position: fixed;
   z-index: 10;
   top:  6rem;
+  left: -2rem;
   margin: 0;
   list-style: none;
 }

src/components/LaunchFilter/actions/actionCreators.ts

@@ -1,22 +1,27 @@
-import { AxiosError } from 'axios';
-import type { Launch } from '../../../shared/api/types/Launch';
+import { LaunchActions } from './actionTypesTemplates';
 import { LaunchFilters } from '../constants/filerConstants';
-import { LaunchActions } from './actionTypes';
+import type { FilterAction } from '../types/LaunchesAction';
+import type { Launch } from '../../../shared/api/types/Launch';
 
-export const requesAction = (filterValue: LaunchFilters) => ({
-  type: `${filterValue}_${LaunchActions.LAUNCH_REQUEST}`,
-  payload: { filterValue },
+export const filterRequestAction = (
+  filterValue: LaunchFilters,
+): FilterAction => ({
+  type: `${filterValue}${LaunchActions.LAUNCH_REQUEST}`,
+  payload: { filterValue, error: '' },
 });
 
-export const successAction = (
+export const filterSuccessAction = (
   filterValue: LaunchFilters,
   launches: Launch[],
-) => ({
-  type: `${filterValue}_${LaunchActions.LAUNCH_SUCCESS}`,
-  payload: { filterValue: filterValue, [filterValue]: launches },
+): FilterAction => ({
+  type: `${filterValue}${LaunchActions.LAUNCH_SUCCESS}`,
+  payload: { filterValue, [filterValue]: launches, error: '' },
 });
 
-export const errorAction = (filterValue: LaunchFilters, error: AxiosError) => ({
-  type: `${filterValue}_${LaunchActions.LAUNCH_ERROR}`,
-  payload: { filterValue: filterValue, error: error as AxiosError },
+export const filterErrorAction = (
+  filterValue: LaunchFilters,
+  error: string,
+): FilterAction => ({
+  type: `${filterValue}${LaunchActions.LAUNCH_ERROR}`,
+  payload: { filterValue, error },
 });

src/components/LaunchFilter/actions/getFilteredLaunches.ts

@@ -1,19 +1,23 @@
-import { Dispatch } from 'react';
-import { AnyAction } from '@reduxjs/toolkit';
-import { AxiosError } from 'axios';
-import type { LaunchResponse } from '../types/LaunchResponse';
+import {
+  filterErrorAction,
+  filterRequestAction,
+  filterSuccessAction,
+} from './actionCreators';
+import { AppDispatch } from '../../../store';
 import { LaunchFilters } from '../constants/filerConstants';
 import { fetchLaunches } from '../services/fetchLaunches';
-import { errorAction, requesAction, successAction } from './actionCreators';
+import type { LaunchResponse } from '../types/LaunchResponse';
 
 export const getFilteredLaunches =
   (filterValue: LaunchFilters) =>
-  async (dispatch: Dispatch<AnyAction>): Promise<void> => {
-    dispatch(requesAction(filterValue));
+  async (dispatch: AppDispatch): Promise<void> => {
+    dispatch(filterRequestAction(filterValue));
     try {
       const response: LaunchResponse = await fetchLaunches(filterValue);
-      dispatch(successAction(filterValue, response.data.results));
+      if (response.data.results.length === 0)
+        throw new Error('Error 404. No matches.');
+      dispatch(filterSuccessAction(filterValue, response.data.results));
     } catch (error) {
-      dispatch(errorAction(filterValue, error as AxiosError));
+      dispatch(filterErrorAction(filterValue, (error as Error).message));
     }
   };

src/components/LaunchFilter/components/FilterLink/FilterLink.scss

@@ -16,7 +16,7 @@
   &:focus {
     width: 16rem;
     border-radius: 50% / 7.5rem;
-    background-color: #ffee58; //var
+    background-color: $secondary-main;
     box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
       0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
 
@@ -36,7 +36,7 @@
   background-repeat: no-repeat;
   background-position: center;
 
-  font-family: 'Nunito'; //var
+  font-family: $default-font;
   text-decoration: none;
   font-size: 0.75rem;
   color: $contrast-text-color;
@@ -64,11 +64,11 @@
     background-image: url('../../../../../public/crewed.svg');
   }
 
-  &.ca_location {
-    background-image: url('../../../../../public/ca_location.svg');
+  &.california {
+    background-image: url('../../../../../public/california.svg');
   }
 
-  &.fl_location {
-    background-image: url('../../../../../public/fl_location.svg');
+  &.florida {
+    background-image: url('../../../../../public/florida.svg');
   }
 }

src/components/LaunchFilter/components/FilterLink/FilterLink.tsx

@@ -1,19 +1,18 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
-import { ThunkDispatch, AnyAction } from '@reduxjs/toolkit';
 import { RoutesPath } from '../../../Router/routesPath';
-import { RootState } from '../../store';
 import { getFilteredLaunches } from '../../actions/getFilteredLaunches';
 import { FilterCaptions, LaunchFilters } from '../../constants/filerConstants';
+import type { AppDispatch } from '../../../../store/index';
 import './FilterLink.scss';
 
 interface FilterLinkProps {
   filterValue: LaunchFilters;
 }
 
 export const FilterLink = ({ filterValue }: FilterLinkProps) => {
-  const dispatch: ThunkDispatch<RootState, void, AnyAction> = useDispatch();
+  const dispatch: AppDispatch = useDispatch();
   const handleClick = () => dispatch(getFilteredLaunches(filterValue));
 
   return (

src/components/LaunchFilter/reducers/launchReducer.ts

@@ -1,25 +1,32 @@
-import { AnyAction } from '@reduxjs/toolkit';
-import { LaunchActions } from '../actions/actionTypes';
-import { InitialState } from '../constants/initialState';
+import { LaunchActions } from '../actions/actionTypesTemplates';
+import { LaunchFilters } from '../constants/filerConstants';
+import { FilterAction } from '../types/LaunchesAction';
 
-export const launchReducer = (
-  state = InitialState,
-  { type, payload }: AnyAction,
-) => {
-  if (!payload) return state;
-  switch (type) {
-    case `${payload.filterValue}_${LaunchActions.LAUNCH_REQUEST}`:
-      return { ...state, isLoading: true, error: null };
+const initialState = {
+  [LaunchFilters.PREVIOUS]: [],
+  [LaunchFilters.CREWED]: [],
+  [LaunchFilters.CALIFORNIA]: [],
+  [LaunchFilters.FLORIDA]: [],
+  isLoading: false,
+  error: '',
+};
+
+export const launchReducer = (state = initialState, action: FilterAction) => {
+  if (!action.payload) return state;
+  const { filterValue, error } = action.payload;
+  switch (action.type) {
+    case `${filterValue}${LaunchActions.LAUNCH_REQUEST}`:
+      return { ...state, isLoading: true, error: '' };
 
-    case `${payload.filterValue}_${LaunchActions.LAUNCH_SUCCESS}`:
+    case `${filterValue}${LaunchActions.LAUNCH_SUCCESS}`:
       return {
         ...state,
-        [payload.filterValue]: payload[payload.filterValue],
+        [filterValue]: action.payload[filterValue],
         isLoading: false,
       };
 
-    case `${payload.filterValue}_${LaunchActions.LAUNCH_ERROR}`:
-      return { ...state, isLoading: false, error: payload.error };
+    case `${filterValue}${LaunchActions.LAUNCH_ERROR}`:
+      return { ...state, isLoading: false, error };
 
     default:
       return state;

src/components/LaunchFilter/services/fetchLaunchConfig.ts

@@ -1,32 +1,32 @@
 import { Endpoints } from '../../../shared/api/constants/endpoints';
+import { LocationIds, LaunchFilters } from '../constants/filerConstants';
 import type { FetchLaunchConfig } from '../types/FetchLaunchConfig';
-import {
-  CA_LOCATION,
-  FL_LOCATION,
-  LaunchFilters,
-} from '../constants/filerConstants';
 
 export const fetchLaunchConfig = (filterValue: string): FetchLaunchConfig => {
   switch (filterValue) {
     case LaunchFilters.PREVIOUS:
       return {
         url: Endpoints.PREVIOUS_LAUNCH_ENDPOINT,
       };
+
     case LaunchFilters.CREWED:
       return {
         url: Endpoints.UPCOMING_LAUNCH_ENDPOINT,
         params: { is__crewed: true },
       };
-    case LaunchFilters.CA_LOCATION:
+
+    case LaunchFilters.CALIFORNIA:
       return {
         url: Endpoints.UPCOMING_LAUNCH_ENDPOINT,
-        params: { location__ids: CA_LOCATION },
+        params: { location__ids: LocationIds.CALIFORNIA },
       };
-    case LaunchFilters.FL_LOCATION:
+
+    case LaunchFilters.FLORIDA:
       return {
         url: Endpoints.UPCOMING_LAUNCH_ENDPOINT,
-        params: { location__ids: FL_LOCATION },
+        params: { location__ids: LocationIds.FLORIDA },
       };
+
     default:
       return {};
   }

src/components/LaunchFilter/services/fetchLaunches.ts

@@ -1,5 +1,5 @@
-import { axiosInstance } from '../../../shared/api/services/axiosInstance';
 import { fetchLaunchConfig } from './fetchLaunchConfig';
+import { axiosInstance } from '../../../shared/api/services/axiosInstance';
 
 export const fetchLaunches = async (launchFilter: string) =>
   await axiosInstance(fetchLaunchConfig(launchFilter));

src/components/LaunchFilter/types/LaunchesAction.ts

@@ -0,0 +1,16 @@
+import { Launch } from '../../../shared/api/types/Launch';
+import { LaunchFilters } from '../constants/filerConstants';
+
+export interface FilterActionPayload {
+  filterValue: LaunchFilters;
+  error: string;
+  [LaunchFilters.PREVIOUS]?: Launch[];
+  [LaunchFilters.CREWED]?: Launch[];
+  [LaunchFilters.CALIFORNIA]?: Launch[];
+  [LaunchFilters.FLORIDA]?: Launch[];
+}
+
+export interface FilterAction {
+  type: string;
+  payload: FilterActionPayload;
+}

src/shared/api/constants/endpoints.ts

@@ -1,5 +1,5 @@
 export const enum Endpoints {
-  BASE_ENDPOINT = 'https://ll.thespacedevs.com/2.2.0/',
+  BASE_ENDPOINT = 'https://lldev.thespacedevs.com/2.2.0/',
   LAUNCH_ENDPOINT = 'launch/',
   PREVIOUS_LAUNCH_ENDPOINT = 'launch/previous/',
   UPCOMING_LAUNCH_ENDPOINT = 'launch/upcoming/',

src/store/index.ts

@@ -1,10 +1,19 @@
-import { configureStore } from '@reduxjs/toolkit';
+import { combineReducers, configureStore } from '@reduxjs/toolkit';
 import { appReducer } from './app/reducer';
+import { launchReducer } from '../components/LaunchFilter/reducers/launchReducer';
+
+const reducer = combineReducers({
+  app: appReducer,
+  launches: launchReducer,
+});
 
 export const store = configureStore({
-  reducer: {
-    app: appReducer,
-  },
+  reducer,
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware({
+      serializableCheck: false,
+    }),
 });
 
 export type StoreState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;