feat: integrate Redux for job management and add selected category de… #5

pushmeets · 2025-07-19T06:17:26Z

…tail page

Added Redux actions and reducers for job fetching.
Created a Redux store and integrated it into the application.
Updated PopularCategories component to fetch and display job categories dynamically.
Implemented SelectedCategoryDetail component to show jobs based on selected category.
Refactored Jobs component to utilize Redux for job data management.
Updated App component to include new routes for selected category detail.
Added necessary dependencies for Redux and Axios in package.json.

…tail page - Added Redux actions and reducers for job fetching. - Created a Redux store and integrated it into the application. - Updated PopularCategories component to fetch and display job categories dynamically. - Implemented SelectedCategoryDetail component to show jobs based on selected category. - Refactored Jobs component to utilize Redux for job data management. - Updated App component to include new routes for selected category detail. - Added necessary dependencies for Redux and Axios in package.json.

exclusiveabhi · 2025-07-19T06:31:27Z

Thankyou @pushmeets i will review your code and merge if it's fine !

Copilot

Pull Request Overview

This PR integrates Redux for job data management and introduces category-based job navigation.

Adds Redux store, actions, and reducers for fetching jobs, and wires Provider into the app.
Refactors Jobs and PopularCategories to use Redux; adds SelectedCategoryDetail route and component.
Updates backend Cloudinary import and package scripts; adds frontend dependencies.

Reviewed Changes

Copilot reviewed 11 out of 13 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
frontend/src/main.jsx	Wraps the app with Redux Provider to enable global state.
frontend/src/components/Job/SelectedCategoryDetail.jsx	New component showing jobs filtered by selected category via Redux state.
frontend/src/components/Job/Jobs.jsx	Refactors job fetching to Redux, introduces loading UI.
frontend/src/components/Home/PopularCategories.jsx	Dynamically builds categories from jobs and navigates to category detail route.
frontend/src/Redux/store.js	Creates Redux store with jobs reducer.
frontend/src/Redux/reducers.js	Adds jobs reducer handling request/success/failure.
frontend/src/Redux/actions.js	Adds thunk to fetch jobs from API.
frontend/src/App.jsx	Adds route for category detail page.
frontend/package.json	Adds Redux-related deps (and other packages).
backend/server.js	Updates Cloudinary import/config to v2-style API.
backend/package.json	Switches scripts to nodemon and bumps cloudinary version.

Files not reviewed (1)

backend/package-lock.json: Language not supported

Comments suppressed due to low confidence (1)

frontend/src/components/Home/PopularCategories.jsx:1

These icon imports are currently unused after switching to dynamic categories. Remove unused imports to reduce bundle size and avoid linter warnings.

import React, { useEffect } from "react";

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-10-07T07:28:58Z

frontend/src/components/Home/PopularCategories.jsx

+
+  const handleClick = (category) => {
+    navigate(`/jobs/${category}`);
+    console.log(id);


id is not defined; this will throw a ReferenceError on click. Remove the log or change it to console.log(category).

Suggested change

console.log(id);

console.log(category);

Copilot · 2025-10-07T07:28:58Z

frontend/src/components/Home/PopularCategories.jsx

-              <div className="icon">{element.icon}</div>
+            <div
+              className="card"
+              key={element.id}


fetchEachCategory is an array of strings, so element.id is undefined and will produce unstable/missing keys. Use the string itself or an index as the key, e.g., key={element}.

Suggested change

key={element.id}

key={element}

Copilot · 2025-10-07T07:28:59Z

frontend/src/components/Home/PopularCategories.jsx

+  useEffect(() => {
+    dispatch(getJobs());
+  }, []);
+  console.log(jobs);


Remove debug logging or guard it behind a development flag to keep console output clean in production.

Suggested change

console.log(jobs);

if (process.env.NODE_ENV === 'development') {

console.log(jobs);

}

Copilot · 2025-10-07T07:28:59Z

frontend/src/components/Home/PopularCategories.jsx

+            <div
+              className="card"
+              key={element.id}
+              onClick={() => {
+                handleClick(element);
+              }}
+            >
+              <p>{element}</p>


Clickable divs are not keyboard accessible. Use a semantic button/Link or add role='button', tabIndex={0}, and an onKeyDown handler for Enter/Space to support keyboard users.

Copilot · 2025-10-07T07:28:59Z

frontend/src/components/Job/Jobs.jsx

@@ -1,46 +1,72 @@
 import React, { useContext, useEffect, useState } from "react";
 import axios from "axios";


axios is no longer used after refactoring to Redux; remove the unused import to satisfy linters and reduce bundle size.

Suggested change

import axios from "axios";

Copilot · 2025-10-07T07:29:00Z

frontend/src/components/Job/Jobs.jsx

+
+    if (!isAuthorized) {
+      navigateTo("/");
    }
-  }, []);
-  if (!isAuthorized) {
-    navigateTo("/");
-  }
+  }, [dispatch]);


The effect depends on isAuthorized and navigateTo but they aren’t included in the dependency array, which can cause stale navigation behavior and ESLint warnings. Either split into two effects or include all dependencies, for example: useEffect(() => { dispatch(getJobs()); }, [dispatch]); useEffect(() => { if (!isAuthorized) navigateTo('/'); }, [isAuthorized, navigateTo]);

Suggested change

if (!isAuthorized) {

navigateTo("/");

}

}, []);

if (!isAuthorized) {

navigateTo("/");

}

}, [dispatch]);

}, [dispatch]);

useEffect(() => {

if (!isAuthorized) {

navigateTo("/");

}

}, [isAuthorized, navigateTo]);

Copilot · 2025-10-07T07:29:00Z

frontend/package.json

+    "install": "^0.13.0",
+    "npm": "^11.4.2",


install and npm should not be application dependencies; they add unnecessary supply-chain risk and bloat. Remove these entries from dependencies.

Suggested change

"install": "^0.13.0",

"npm": "^11.4.2",

Copilot · 2025-10-07T07:29:00Z

backend/package.json

+    "start": "nodemon server.js",
+    "dev": "nodemon server.js"


Scripts use nodemon but it's not declared in dependencies/devDependencies in this package. Add nodemon as a devDependency (e.g., npm i -D nodemon) or revert scripts to node server.js.

Copilot · 2025-10-07T07:29:01Z

frontend/src/Redux/actions.js

+export const getJobs = () => async (dispatch) => {
+  try {
+    dispatch({ type: GET_JOBS_REQUEST });
+    const res = await axios.get("http://localhost:4000/api/v1/job/getall");


Avoid hard-coding the API URL; use an environment variable (e.g., import.meta.env.VITE_API_BASE_URL) or a centralized axios instance so builds can target different environments.

Suggested change

const res = await axios.get("http://localhost:4000/api/v1/job/getall");

const res = await axios.get(`${import.meta.env.VITE_API_BASE_URL}/api/v1/job/getall`);

Copilot · 2025-10-07T07:29:01Z

frontend/src/Redux/reducers.js

+  success: false,
+};
+
+const jobsReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case GET_JOBS_REQUEST:
+      return { ...state, loading: true, error: false, success: false };
+    case GET_JOBS_SUCCESS:
+      return { ...state, loading: false, success: true, jobs: action.payload };
+    case GET_JOBS_FAILURE:
+      return { ...state, loading: false, error: action.payload };


initialState.error is a boolean but here it's replaced with a string (the error message), creating a type inconsistency. Consider keeping error as a boolean and adding errorMessage for details: return { ...state, loading: false, error: true, errorMessage: action.payload };

Suggested change

success: false,

};

const jobsReducer = (state = initialState, action) => {

switch (action.type) {

case GET_JOBS_REQUEST:

return { ...state, loading: true, error: false, success: false };

case GET_JOBS_SUCCESS:

return { ...state, loading: false, success: true, jobs: action.payload };

case GET_JOBS_FAILURE:

return { ...state, loading: false, error: action.payload };

errorMessage: null,

success: false,

};

const jobsReducer = (state = initialState, action) => {

switch (action.type) {

case GET_JOBS_REQUEST:

return { ...state, loading: true, error: false, errorMessage: null, success: false };

case GET_JOBS_SUCCESS:

return { ...state, loading: false, success: true, jobs: action.payload, error: false, errorMessage: null };

case GET_JOBS_FAILURE:

return { ...state, loading: false, error: true, errorMessage: action.payload };

exclusiveabhi requested a review from Copilot October 7, 2025 07:24

Copilot AI reviewed Oct 7, 2025

View reviewed changes

		@@ -1,46 +1,72 @@
		import React, { useContext, useEffect, useState } from "react";
		import axios from "axios";

	const res = await axios.get("http://localhost:4000/api/v1/job/getall");
	const res = await axios.get(`${import.meta.env.VITE_API_BASE_URL}/api/v1/job/getall`);

feat: integrate Redux for job management and add selected category de… #5

Are you sure you want to change the base?

feat: integrate Redux for job management and add selected category de… #5

Uh oh!

Conversation

pushmeets commented Jul 19, 2025

Uh oh!

exclusiveabhi commented Jul 19, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants