ferzik85 · ferzik85 · Nov 16, 2023 · Nov 6, 2023 · Nov 6, 2023 · Nov 7, 2023
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -4,7 +4,7 @@
         "browser": true,
         "es2021": true
     },
-    "extends": ["airbnb", "react", "prettier"],
+    "extends": ["airbnb", "prettier"],
     "parserOptions": {
         "ecmaFeatures": {
             "jsx": true
@@ -13,13 +13,14 @@
         "sourceType": "module"
     },
     "plugins": [
-        "react",
         "prettier"
     ],
     "rules": {
+        "react/prop-types": 0,
+        "import/prefer-default-export": "off",
         "prettier/prettier": [
             "error", {
-                "printWidth": 80,
+                "printWidth": 160,
                 "trailingComma": "es5",
                 "semi": true,
                 "jsxSingleQuote": true,
@@ -38,6 +39,6 @@
                 "importOrderSortSpecifiers": true
             }
         ],
-      "no-duplicate-imports": "error"
+        "no-duplicate-imports": "error"
     }
 }
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run prepublish
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,7 +16,12 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "eslint": "eslint --ext .js --ext .jsx src",
+    "eslint:fix": "eslint --fix --ext .js --ext .jsx src",
+    "test:nowatch": "react-scripts test --watchAll=false",
+    "prepare": "husky install",
+    "prepublish": "npm run eslint:fix"
   },
   "eslintConfig": {
     "extends": [
@@ -46,6 +51,7 @@
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.3",
     "prettier": "^3.0.3"
   }
 }
diff --git a/public/index.css b/public/index.css
@@ -0,0 +1,14 @@
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
+
+#root {
+  margin: auto;
+  height: 100%;
+  width: 100%;
+  font-family: "Segoe UI", sans-serif;
+  display: flex;
+  flex-direction: column;
+}
diff --git a/public/index.html b/public/index.html
@@ -8,6 +8,7 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <link rel="stylesheet" href="index.css">
     <title>Courses App</title>
   </head>
   <body>

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,14 @@
+import React from 'react';
+import Header from './components/Header/Header';
+import Body from './components/Body/Body';
+
 function App() {
-    return <div>React</div>;
+	return (
+		<>
+			<Header />
+			<Body />
+		</>
+	);
 }
 
-export default App;
+export default App;
diff --git a/src/assets/epam-logo.svg b/src/assets/epam-logo.svg
diff --git a/src/common/Button/Button.jsx b/src/common/Button/Button.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import styles from './Button.module.css';
+
+function Button({ label, onClick }) {
+	return (
+		<button type='button' className={styles.button} onClick={onClick}>
+			{label}
+		</button>
+	);
+}
+
+export default Button;
diff --git a/src/common/Button/Button.module.css b/src/common/Button/Button.module.css
@@ -0,0 +1,10 @@
+.button {
+  background-color: rgb(0, 113, 155);
+  border-radius: 3px;
+  border: none;
+  color: white;
+  padding: 6px 32px;
+  font-size: 14px;
+  font-weight: bold;
+  cursor: pointer;
+}
diff --git a/src/common/Input/Input.jsx b/src/common/Input/Input.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import styles from './Input.module.css';
+
+function Input({ onChange }) {
+	return <input type='text' className={styles.input} placeholder='Search course ...' onChange={(e) => onChange(e.target.value)} />;
+}
+
+export default Input;
diff --git a/src/common/Input/Input.module.css b/src/common/Input/Input.module.css
@@ -0,0 +1,3 @@
+.input {
+  height: 22px; 
+}
diff --git a/src/components/Body/Body.jsx b/src/components/Body/Body.jsx
@@ -0,0 +1,38 @@
+import React, { useState, useCallback } from 'react';
+import Courses from '../Courses/Courses';
+import mockedCoursesList from '../../data/CoursesList';
+import mockedAuthorsList from '../../data/AuthorsList';
+import EmptyCourseList from '../EmptyCourseList/EmptyCourseList';
+import CourseInfo from '../CourseInfo/CourseInfo';
+import styles from './Body.module.css';
+
+function Body() {
+	const courses = mockedCoursesList.map((course) => ({
+		...course,
+		authors: course.authors.map((authorId) => mockedAuthorsList.find((author) => author.id === authorId)?.name ?? 'Unknown author'),
+	}));
+
+	const [courseId, setCourseId] = useState(null);
+
+	const handleShowCourse = useCallback((id) => setCourseId(id), [setCourseId]);
+
+	const handleShowCourses = useCallback(() => setCourseId(null), [setCourseId]);
+
+	const isCourseSelected = () => courseId !== null;
+
+	const courseExists = () => courses.some((course) => course.id === courseId);
+
+	const findCourse = () => courses.find((course) => course.id === courseId);
+
+	const courseListIsEmpty = () => courses.length === 0;
+
+	const renderCourses = () => (courseListIsEmpty() ? <EmptyCourseList /> : <Courses courses={courses} onShowCourseClick={handleShowCourse} />);
+
+	return (
+		<div className={styles.body}>
+			{isCourseSelected() && courseExists() ? <CourseInfo course={findCourse(courseId)} onBackClick={handleShowCourses} /> : renderCourses()}
+		</div>
+	);
+}
+
+export default Body;
diff --git a/src/components/Body/Body.module.css b/src/components/Body/Body.module.css
@@ -0,0 +1,4 @@
+.body {
+  background-color: #e8e8e8;
+  flex-grow: 1;
+}
diff --git a/src/components/CourseInfo/CourseInfo.jsx b/src/components/CourseInfo/CourseInfo.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import Button from '../../common/Button/Button';
+import formatDate from '../../utils/FormatDate';
+import formatDuration from '../../utils/FormatDuration';
+import formatAuthors from '../../utils/FormatAuthors';
+import styles from './CourseInfo.module.css';
+
+function CourseInfo({ course, onBackClick }) {
+	const formatDurationInHours = (duration) => {
+		const formattedDuration = formatDuration(duration).split(' ');
+		const formattedTime = formattedDuration[0];
+		const formattedText = formattedDuration[1];
+		return (
+			<>
+				<b>{formattedTime}</b> {formattedText}
+			</>
+		);
+	};
+
+	return (
+		<div className={styles.courseInfo}>
+			<div className={styles.courseInfoTitle}>{course.title}</div>
+			<div className={styles.courseDescription}>
+				<div>Description:</div>
+				<div className={styles.courseDescriptionLayout}>
+					<div className={styles.courseDescriptionText}>{course.description}</div>
+					<div className={styles.courseDescriptionMetadata}>
+						<table>
+							<tbody>
+								<tr>
+									<td>ID:</td>
+									<td>{course.id}</td>
+								</tr>
+								<tr>
+									<td>Duration:</td>
+									<td>{formatDurationInHours(course.duration)}</td>
+								</tr>
+								<tr>
+									<td>Created:</td>
+									<td>{formatDate(course.creationDate)}</td>
+								</tr>
+								<tr>
+									<td>Authors:</td>
+									<td>{formatAuthors(course.authors)}</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+			<div>
+				<Button label='BACK' onClick={onBackClick} />
+			</div>
+		</div>
+	);
+}
+
+export default CourseInfo;
diff --git a/src/components/CourseInfo/CourseInfo.module.css b/src/components/CourseInfo/CourseInfo.module.css
@@ -0,0 +1,60 @@
+.courseInfo {
+  display: flex;
+  flex-direction: column;
+  width: 80%;
+  margin: auto;
+}
+.courseInfo > div:last-of-type {
+  width: 100%;
+  text-align: right;
+  margin-top: 20px;
+}
+
+.courseInfoTitle {
+  font-weight: bold;
+  font-size: 24px;
+  width: 100%;
+  text-align: left;
+  margin-bottom: 20px;
+  margin-top: 30px;
+}
+
+.courseDescription {
+  background-color: white;
+  padding: 20px;
+}
+
+.courseDescription > div:first-of-type {
+  margin-bottom: 10px;
+  font-weight: bold;
+}
+
+tr > td:first-of-type {
+  margin-bottom: 10px;
+  font-weight: bold;
+}
+
+.courseDescriptionLayout {
+  display: flex;
+  margin: auto;
+}
+
+.courseDescriptionText {
+  text-align: justify;
+  border-right: 1px solid #e8e8e8;
+  padding-right: 20px;
+  width: 50%;
+}
+
+.courseDescriptionMetadata {
+  padding-left: 20px;
+}
+
+tr td {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+
+tr td:last-of-type {
+  padding-left: 20px;
+}