Pull request to make a code review

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ]
+}

.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+indent_size = 2
+indent_style = tab

.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+.vscode
+yarn-error.log
+.DS_Store
+.env

README.md

@@ -5,4 +5,13 @@ A showcase project of how Eugene Khristenko does his job.
 ### Stages
 1. Look at tasks
 2. Look at commits
-3. See how the flow went
+3. See how I implemented the project
+
+### Getting started
+To start the project localy you need to:
+
+- `git clone git@github.com:KhristenkoE/bank-account.git`
+- `cd bank-account`
+- `yarn install` or `npm install`
+- `yarn start` or `npm run start`
+- open `http://localhost:8080`

declaration.d.ts

@@ -0,0 +1,5 @@
+// declaration.d.ts
+declare module '*.css' {
+	const content: Record<string, string>;
+	export default content;
+}

package.json

@@ -0,0 +1,33 @@
+{
+  "name": "bank-account",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "git@github.com:KhristenkoE/bank-account.git",
+  "author": "Eugene Khristenko <ekhristenko0@gmail.com>",
+  "license": "MIT",
+  "scripts": {
+    "start": "webpack serve --config webpack.config.js --mode development --hot",
+    "build": "webpack --mode production"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.2",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-typescript": "^7.18.6",
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@types/uuid": "^8.3.4",
+    "babel-loader": "^8.2.3",
+    "css-loader": "^6.7.1",
+    "html-webpack-plugin": "^5.5.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "style-loader": "^3.3.1",
+    "typescript": "^4.7.4",
+    "uuid": "^8.3.2",
+    "webpack": "^5.68.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.9.3",
+		"react-router-dom": "6"
+  }
+}

src/components/App/App.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Route, Routes } from 'react-router-dom';
+import BreadcrumbsContextProvider from '../../contexts/BreadcrumbsContext';
+import DataContext, { initialContext as initialDataContext } from '../../contexts/DataContext';
+import FiltersContextProvider from '../../contexts/FiltersContext';
+import CardDetails from '../../pages/CardDetails/CardDetails';
+import CardsList from '../../pages/CardsList/CardsList';
+import Home from '../../pages/Home/Home';
+import TransactionDetails from '../../pages/TransactionDetails/TransactionDetails';
+import TransactionsList from '../../pages/TransactionsList/TransactionsList';
+import _404 from '../../pages/_404/_404';
+import Breadcrumbs from '../Breadcrumbs/Breadcrumbs';
+
+const App = () => {
+	return (
+		<DataContext.Provider value={initialDataContext}>
+			<FiltersContextProvider>
+				<BreadcrumbsContextProvider>
+					<Breadcrumbs />
+					<Routes>
+						<Route path="transactions" element={<TransactionsList />} />
+						<Route path="transactions/:transactionID" element={<TransactionDetails />} />
+						<Route path="transactions/:transactionID/:cardID" element={<CardDetails />} />
+						<Route path="cards" element={<CardsList />} />
+						<Route path="cards/:cardID" element={<CardDetails />} />
+						<Route path="cards/:cardID/transactions" element={<TransactionsList />} />
+						<Route path="cards/:cardID/transactions/:transactionID" element={<TransactionDetails />} />
+						<Route path="/" element={<Home />} />
+						<Route path="*" element={<_404 />} />
+					</Routes>
+				</BreadcrumbsContextProvider>
+			</FiltersContextProvider>
+		</DataContext.Provider>
+	)
+};
+
+export default App;

src/components/Breadcrumbs/Breadcrumbs.module.css

@@ -0,0 +1,35 @@
+.list {
+	padding: 20px 20px;
+	margin: 0;
+	display: flex;
+	list-style: none;
+}
+
+.list li {
+	margin-right: 10px;
+	position: relative;
+}
+
+.list li button {
+	border: none;
+	background-color: transparent;
+	color: #959595;
+	cursor: pointer;
+}
+
+.list li button.breadcrumbActive {
+	color: white;
+	cursor: default;
+}
+
+.list li:not(:last-child):before {
+	content: '';
+	position: absolute;
+	height: 5px;
+	width: 5px;
+	background: #27303c;
+	border-radius: 100%;
+	top: 50%;
+	transform: translateY(-1px);
+	right: -7px;
+}

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,27 @@
+import React, { useContext } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { BreadcrumbsContext } from '../../contexts/BreadcrumbsContext';
+import styles from './Breadcrumbs.module.css';
+
+const Breadcrumbs = () => {
+	const { breadcrumbs } = useContext(BreadcrumbsContext);
+	const navigate = useNavigate();
+
+	const onBreadcrumbClick = (url: string, index: number) => {
+		navigate(url);
+	}
+
+	return (
+		<nav>
+			<ul className={styles.list}>
+				{breadcrumbs.map(({ url, name }, index) => (
+					<li key={index}>
+						<button className={index === breadcrumbs.length - 1 ? styles.breadcrumbActive : ''} onClick={() => onBreadcrumbClick(url, index)}>{name}</button>
+					</li>
+				))}
+			</ul>
+		</nav>
+	);
+};
+
+export default Breadcrumbs;

src/components/Filter/Filter.module.css

@@ -0,0 +1,110 @@
+.filterButton {
+	padding: 10px 20px;
+	background-color: #141921;
+	border-radius: 5px;
+	text-decoration: none;
+	color: inherit;
+	border: none;
+	position: relative;
+}
+
+.filterButton:hover {
+	cursor: pointer;
+	transform: scale(1.01);
+	background-color: #1d232e;
+}
+
+.filterButtonIndicate::before {
+	content: '';
+	position: absolute;
+	top: 5px;
+	right: 7px;
+	width: 5px;
+	height: 5px;
+	background-color: #b0104b;
+	border-radius: 100%;
+}
+
+.filtersBlock {
+	background-color:	#202630;
+	display: block;
+	/* overflow: hidden; */
+	border-radius: 5px;
+	/* animation: show-filters 0.5s; */
+	/* animation-fill-mode: forwards; */
+}
+
+.filtersBlockContent {
+	padding: 20px 20px;
+	/* animation: show-filter-contnet 0.5s; */
+	/* opacity: 0; */
+	/* animation-delay: 0.2s;
+	animation-fill-mode: forwards; */
+}
+
+.filterBlockClosed {
+	/* animation: hide-filters 0.5s;
+	animation-fill-mode: forwards; */
+	display: none;
+}
+
+/* @keyframes show-filter-contnet {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes show-filters {
+	0% {
+		height: 0;
+	}
+	100% {
+		height: 100%;
+	}
+}
+
+@keyframes hide-filters {
+	0% {
+		height: 100%;
+	}
+
+	100% {
+		height: 0;
+	}
+} */
+
+
+.title {
+	margin: 0 0 20px 0;
+}
+
+.list {
+	margin: 0 0 20px 0;
+	padding: 0;
+	list-style: none;
+	display: grid;
+	column-gap: 40px;
+	row-gap: 10px;
+}
+
+.filter {
+	display: grid;
+	grid-auto-flow: column;
+	column-gap: 10px;
+	justify-content: flex-start;
+}
+
+.clearFilters {
+	border: none;
+	border-radius: 5px;
+	padding: 5px 12px;
+	background-color: #c6cfde;
+	cursor: pointer;
+}
+
+.clearFilters:hover {
+	background-color: #e6eaf1;
+}

src/components/Filter/Filter.tsx

@@ -0,0 +1,75 @@
+import React, { useEffect, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import { AppliedFilter, Filter as FilterInterface, FilterName, FilterType } from '../../interfaces/Filter';
+import styles from './Filter.module.css';
+import FilterDate from './FilterDate/FilterDate';
+import FilterRange from './FilterRange/FilterRange';
+import FilterSelect from './FilterSelect/FilterSelect';
+
+interface Props {
+	filters: FilterInterface[];
+	intialAppliedFilters: AppliedFilter;
+	onChange(value: string | { min: number, max: number }, name: string, type: FilterType): void;
+	onClear(): void;
+}
+
+const Filter = ({
+	filters,
+	intialAppliedFilters,
+	onChange,
+	onClear,
+}: Props) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const filterContainerRef = useRef<HTMLElement>(null);
+
+	useEffect(() => {
+		filterContainerRef.current = document.getElementById('filters-block');
+	}, []);
+
+	const onChangeSelect = (value: string, name: string, type: FilterType) => {
+		onChange(value, name, type);
+	};
+
+	const onRangeChange = (value: { min: number, max: number }, name: string, type: FilterType) => {
+		onChange(value, name, type);
+	};
+
+	const onDateChange = (value: string, name: string, type: FilterType) => {
+		onChange(value, name, type);
+	};
+
+	return (
+		<article>
+			<button onClick={() => setIsOpen((isOpenPrev) => !isOpenPrev)} className={`${styles.filterButton} ${Object.keys(intialAppliedFilters).length ? styles.filterButtonIndicate : ''}`}>Filters</button>
+			{filterContainerRef.current && ReactDOM.createPortal(
+				<article className={`${styles.filtersBlock} ${!isOpen ? styles.filterBlockClosed : ''}`}>
+					<div className={styles.filtersBlockContent}>
+						<h4 className={styles.title}>Filters</h4>
+						<ul className={styles.list}>
+							{filters.map(({ label, name, options, from, to, type }) => {
+								return (
+									<li className={styles.filter} key={label}>
+										<label htmlFor={label}>{name}</label>
+										{type === FilterType.SELECT_ONE && (
+											<FilterSelect initialValue={(intialAppliedFilters[label] || 'All') as string} onChange={(value) => onChangeSelect(value, label, FilterType.SELECT_ONE)} name={label} options={options} />
+										)}
+										{type === FilterType.DATE && (
+											<FilterDate initialValue={(intialAppliedFilters[label] || '') as string} onChange={(value) => onDateChange(value, label, FilterType.DATE)}/>
+										)}
+										{type === FilterType.RANGE && (
+											<FilterRange initialValue={intialAppliedFilters[label] as { min: number; max: number }} min={from} max={to} onChange={(value) => onRangeChange(value, label, FilterType.RANGE)}/>
+										)}
+									</li>
+								)
+							})}
+						</ul>
+						<button className={styles.clearFilters} onClick={onClear}>Clear filters</button>
+					</div>
+				</article>,
+				filterContainerRef.current
+			)}
+		</article>
+	);
+};
+
+export default Filter;

src/components/Filter/FilterDate/FilterDate.module.css

@@ -0,0 +1,7 @@
+.datePicker {
+	background-color: #29303d;
+	color: white;
+	border-radius: 5px;
+	padding: 3px 10px;
+	border: none;
+}