Feature/launches filters on home page

src/components/Home/Home.scss

@@ -0,0 +1,9 @@
+.home-container {
+  margin: 0 auto;
+  padding-top: 6rem;
+}
+
+.home-inner-container {
+  margin: 0 auto;
+  max-width: 96rem;
+}

src/components/Home/Home.tsx

@@ -1,4 +1,15 @@
 import React from 'react';
+import { Outlet } from 'react-router-dom';
+import { LaunchFilter } from '../LaunchFilter/LaunchFilter';
 import { Slider } from '../Slider';
+import './Home.scss';
 
-export const Home = () => <Slider />;
+export const Home = () => (
+  <div className="home-container">
+    <LaunchFilter />
+    <div className="home-inner-container">
+      <Slider />
+      <Outlet />
+    </div>
+  </div>
+);

src/components/LaunchFilter/LaunchFilter.scss

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

src/components/LaunchFilter/LaunchFilter.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FilterLink } from './components/FilterLink/FilterLink';
+import { LaunchFilters } from './constants/filerConstants';
+import './LaunchFilter.scss';
+
+export const LaunchFilter = () => (
+  <ul className="launch-filter-list">
+    {Object.values(LaunchFilters).map((filterValue, index) => (
+      <FilterLink key={index} filterValue={filterValue} />
+    ))}
+  </ul>
+);

src/components/LaunchFilter/actions/actionCreators.ts

@@ -0,0 +1,31 @@
+import { LaunchActions } from '../types/launchActionTypes';
+import { LaunchFilters } from '../constants/filerConstants';
+import type {
+  FilterActionError,
+  FilterActionRequest,
+  FilterActionSuccess,
+} from '../types/LaunchActions';
+import type { Launch } from '../../../shared/api/types/Launch';
+
+export const filterRequestAction = (
+  filterValue: LaunchFilters,
+): FilterActionRequest => ({
+  type: `${filterValue}${LaunchActions.LAUNCH_REQUEST}`,
+  payload: { filterValue },
+});
+
+export const filterSuccessAction = (
+  filterValue: LaunchFilters,
+  launches: Launch[],
+): FilterActionSuccess => ({
+  type: `${filterValue}${LaunchActions.LAUNCH_SUCCESS}`,
+  payload: { filterValue, [filterValue]: launches },
+});
+
+export const filterErrorAction = (
+  filterValue: LaunchFilters,
+  error: string,
+): FilterActionError => ({
+  type: `${filterValue}${LaunchActions.LAUNCH_ERROR}`,
+  payload: { filterValue, error },
+});

src/components/LaunchFilter/actions/getFilteredLaunches.ts

@@ -0,0 +1,22 @@
+import { Dispatch } from '@reduxjs/toolkit';
+import {
+  filterErrorAction,
+  filterRequestAction,
+  filterSuccessAction,
+} from './actionCreators';
+import { LaunchFilters } from '../constants/filerConstants';
+import { fetchLaunches } from '../services/fetchLaunches';
+import type { FilterAction } from '../types/LaunchActions';
+import type { LaunchResponse } from '../types/LaunchResponse';
+
+export const getFilteredLaunches =
+  (filterValue: LaunchFilters) =>
+  async (dispatch: Dispatch<FilterAction>): Promise<void> => {
+    dispatch(filterRequestAction(filterValue));
+    try {
+      const response: LaunchResponse = await fetchLaunches(filterValue);
+      dispatch(filterSuccessAction(filterValue, response.data.results));
+    } catch (error) {
+      dispatch(filterErrorAction(filterValue, (error as Error).message));
+    }
+  };

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

@@ -0,0 +1,74 @@
+@import '../../../../shared/styles/variables';
+
+.launches-filter-item {
+  display: flex;
+  width: 5rem;
+  height: 5rem;
+
+  background-color: $primary-main;
+  border-radius: 50%;
+
+  &:not(:last-child) {
+    margin-bottom: 1rem;
+  }  
+
+  &:hover,
+  &:focus {
+    width: 16rem;
+    border-radius: 50% / 7.5rem;
+    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);
+
+    transition-property: background-color, background-position, width;
+    transition-duration: $default-transition-delay;
+    transition-timing-function: ease;
+  }
+}
+
+.launches-filter-link {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+
+  background-size: 3rem;
+  background-repeat: no-repeat;
+  background-position: center;
+
+  font-family: $default-font;
+  text-decoration: none;
+  font-size: 0.75rem;
+  color: $contrast-text-color;
+
+  & .launches-filter-caption {
+    visibility: hidden;
+  }
+
+  &:hover {
+    background-position-x: 1rem;
+
+    & .launches-filter-caption {
+      visibility: inherit;
+      margin-left: 5rem;
+      text-transform: uppercase;
+      transition: visibility 0ms ease $default-transition-delay;
+    }
+  }
+
+  &.previous {
+    background-image: url('../../../../../public/previous.svg');
+  }
+
+  &.crewed {
+    background-image: url('../../../../../public/crewed.svg');
+  }
+
+  &.california {
+    background-image: url('../../../../../public/california.svg');
+  }
+
+  &.florida {
+    background-image: url('../../../../../public/florida.svg');
+  }
+}

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
+import { Dispatch } from '@reduxjs/toolkit';
+import { RoutesPath } from '../../../Router/routesPath';
+import { getFilteredLaunches } from '../../actions/getFilteredLaunches';
+import { FilterCaptions, LaunchFilters } from '../../constants/filerConstants';
+import type { FilterAction } from '../../types/LaunchActions';
+import './FilterLink.scss';
+
+interface FilterLinkProps {
+  filterValue: LaunchFilters;
+}
+
+export const FilterLink = ({ filterValue }: FilterLinkProps) => {
+  const dispatch: Dispatch<FilterAction> = useDispatch();
+  const handleClick = () => getFilteredLaunches(filterValue)(dispatch);
+
+  return (
+    <li className="launches-filter-item">
+      <Link
+        className={`launches-filter-link ${filterValue.toLowerCase()}`}
+        to={RoutesPath[filterValue]}
+        onClick={handleClick}
+      >
+        <span className="launches-filter-caption">
+          {FilterCaptions[filterValue]}
+        </span>
+      </Link>
+    </li>
+  );
+};

src/components/LaunchFilter/components/FilterLink/index.ts

@@ -0,0 +1 @@
+export { FilterLink } from './FilterLink';

src/components/LaunchFilter/constants/filerConstants.ts

@@ -0,0 +1,18 @@
+export enum LaunchFilters {
+  PREVIOUS = 'PREVIOUS',
+  CREWED = 'CREWED',
+  CALIFORNIA = 'CALIFORNIA',
+  FLORIDA = 'FLORIDA',
+}
+
+export enum FilterCaptions {
+  PREVIOUS = 'Previous launches',
+  CREWED = 'Crewed launches',
+  CALIFORNIA = 'Location: California',
+  FLORIDA = 'Location: Florida',
+}
+
+export enum LocationIds {
+  CALIFORNIA = '11',
+  FLORIDA = '12,27',
+}

src/components/LaunchFilter/index.ts

@@ -0,0 +1 @@
+export { LaunchFilter } from './LaunchFilter';