refactor: migrate react hooks to domain-driven structure

- Move use-memo and use-callback to frontend/react-hooks
- Update roadmap in README.md
- Apply linting fixes across the repository

Author: abdullahsadik00

README.md

@@ -31,6 +31,7 @@ This table tracks the chronological journey through the curriculum, mapped to th
 | **Week 4** | Backend Foundations | [`/backend/week-4`](./backend/week-4) | Express.js, Node.js Basics, Middlewares |
 | **Week 4** | Projects | [`/backend/todo-app-backend`](./backend/todo-app-backend) | Todo API, JSON persistence |
 | **Week 5** | Runtimes & Logic | [`/basics/week-5`](./basics/week-5) | Event Loops, Map/Filter/Arrow Functions |
+| **Week 6** | React Hooks | [`/frontend/react-hooks`](./frontend/react-hooks) | useMemo, useCallback, useRef |
 | **Week 6** | Database Mastery | [`/database/week-6`](./database/week-6) | SQL Basics, Querying, Indexing |
 | **Ongoing** | Frontend Styling | [`/frontend/tailwind-learning`](./frontend/tailwind-learning) | Utility-first CSS, Responsive Design |
 | **Ongoing** | Applications | [`/frontend/course-rating-app`](./frontend/course-rating-app) | Full-stack UI, Rating Logic |

basics/week-2/Assignment/week-2-async-js/medium/2-clock.js

@@ -5,18 +5,18 @@
 
 function Time(format) {
 
-    setInterval(() => {
-        let date = new Date();
-        const hours = date.getHours().toString().padStart(2, '0');
-        const minutes = date.getMinutes().toString().padStart(2, '0');
-        const seconds = date.getSeconds().toString().padStart(2, '0');
-        let ampm = '';
-        if (format) {
-            ampm = hours <= 12 ? 'AM' : 'PM';
-            hours = hours % 12 || 12;
-        }
-        console.log(`${hours}:${minutes}:${seconds} ${ampm}`);
-    }, 1000);
+  setInterval(() => {
+    let date = new Date();
+    let hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    const seconds = date.getSeconds().toString().padStart(2, '0');
+    let ampm = '';
+    if (format) {
+      ampm = hours <= 12 ? 'AM' : 'PM';
+      hours = hours % 12 || 12;
+    }
+    console.log(`${hours}:${minutes}:${seconds} ${ampm}`);
+  }, 1000);
 }
 
 Time(false);

frontend/course-rating-app/src/helpers/validator.js

@@ -1,22 +1,22 @@
 export function validateCourseInfo(courseInfo) {
     if (
-        courseInfo.hasOwnProperty("course") &&
-        courseInfo.hasOwnProperty("courseId") &&
-        courseInfo.hasOwnProperty("cohort") &&
-        courseInfo.hasOwnProperty("college") &&
-        courseInfo.hasOwnProperty("semester") &&
-        courseInfo.hasOwnProperty("instructor") &&
-        courseInfo.hasOwnProperty("averageRating") &&
-        courseInfo.hasOwnProperty("studentsVoted")
+        Object.prototype.hasOwnProperty.call(courseInfo, 'course') &&
+        Object.prototype.hasOwnProperty.call(courseInfo, 'courseId') &&
+        Object.prototype.hasOwnProperty.call(courseInfo, 'cohort') &&
+        Object.prototype.hasOwnProperty.call(courseInfo, 'college') &&
+        Object.prototype.hasOwnProperty.call(courseInfo, 'semester') &&
+        Object.prototype.hasOwnProperty.call(courseInfo, 'instructor') &&
+        Object.prototype.hasOwnProperty.call(courseInfo, 'averageRating') &&
+        Object.prototype.hasOwnProperty.call(courseInfo, 'studentsVoted')
     ) {
         return {
             hasError: false,
-            message: "course has been added"
+            message: 'course has been added'
         };
     } else {
         return {
             hasError: true,
-            message: "course cannot be added"
+            message: 'course cannot be added'
         };
     }
 }

frontend/react-hooks/README.md

@@ -0,0 +1,4 @@
+## React hook assignments
+You will find a bunch of folders this week, each with some set of assignments for a specific hook
+Go to the folder (for example 1-use-memo) and comment out the Assignment component you are working on (Assignment1/Assignment2...) and try to solve it
+There are no tests, but solution videos will be provided

frontend/react-hooks/use-callback/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

frontend/react-hooks/use-callback/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/react-hooks/use-callback/README.md

@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

frontend/react-hooks/use-callback/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>