resources/assets/js/components/HRPortal/JobReviewHrPage.tsx - Code Metrics - Inspection of "Allow hr advisor to view version of job review pag..." - GCTC-NTGC/TalentCloud - Measure and Improve Code Quality continuously with Scrutinizer

Passed

Push — task/hr-job-review ( 0c21f5 )

by Tristan

created 2020-01-13 17:38 UTC

resources/assets/js/components/HRPortal/JobReviewHrPage.tsx A

↳ Parent: Project

Complexity

Total Complexity	7
Complexity/F	0

Size

Lines of Code	179
Function Count	0

Duplication

Duplicated Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
wmc	7
eloc	145
dl	0
loc	179
rs	10
c	0
b	0
f	0
mnd	7
bc	7
fnc	0
bpm	0
cpm	0
noi	12

import React, { useEffect } from "react";
import { WrappedComponentProps, injectIntl, useIntl } from "react-intl";

import nprogress from "nprogress";

import { connect, useDispatch, useSelector } from "react-redux";

import ReactDOM from "react-dom";
import RootContainer from "../RootContainer";
import {
  Job,
  JobPosterKeyTask,
  Criteria,
  Skill,
  Manager,
  Department,
} from "../../models/types";
import {
  managerJobIndex,

  jobBuilderSkills,

  hrJobSummary,
} from "../../helpers/routes";
import { RootState } from "../../store/store";
import {
  getJob,
  getTasksByJob,
  getCriteriaByJob,
} from "../../store/Job/jobSelector";
import { getSkills } from "../../store/Skill/skillSelector";
import { DispatchType } from "../../configureStore";

import {
  submitJobForReview,

  fetchJob,
  fetchJobTasks,
  fetchCriteria,
} from "../../store/Job/jobActions";
import { getDepartments as fetchDepartments } from "../../store/Department/deptActions";
import { getDepartments } from "../../store/Department/deptSelector";
import {
  getSelectedManager,

  getManagerById,
} from "../../store/Manager/managerSelector";
import {
  fetchManager,
  setSelectedManager,

} from "../../store/Manager/managerActions";
import { navigate } from "../../helpers/router";
import { isJobBuilderComplete } from "../JobBuilder/jobBuilderHelpers";
import JobReview from "../JobBuilder/Review/JobReview";
import { fetchSkills } from "../../store/Skill/skillActions";

interface JobReviewHrPageProps {
  jobId: number;
  job: Job | null;
  skills: Skill[];
  keyTasks: JobPosterKeyTask[];
  criteria: Criteria[];
  departments: Department[];
  manager: Manager | null;
}

const JobReviewHrPage: React.FunctionComponent<JobReviewHrPageProps> = ({
  jobId,
  job,
  skills,
  keyTasks,
  criteria,
  departments,
  manager,
}): React.ReactElement => {
  const { locale } = useIntl();
  if (locale !== "en" && locale !== "fr") {
    throw new Error("Unexpected locale");
  }

  const handleReturn = (): void => {
    // Go to Previous page
    navigate(hrJobSummary(locale, jobId));
  };
  const handleContinue = (): void => {
    // do nothing
  };
  const handleSubmitJob = async (): Promise<void> => {
    // do nothing
  };
  const jobIsComplete =
    job !== null && isJobBuilderComplete(job, keyTasks, criteria, locale);

  return job !== null ? (
    <JobReview
      job={job}
      manager={manager}
      tasks={keyTasks}
      criteria={criteria}
      skills={skills}
      departments={departments}
      validForSubmission={jobIsComplete}
      handleSubmit={handleSubmitJob}
      handleReturn={handleReturn}
      handleContinue={handleContinue}
    />
  ) : (
    <h3>Data is loading</h3> // TODO:
  );
};

const JobReviewHrDataFetcher: React.FC<{ jobId: number }> = ({ jobId }) => {
  const dispatch = useDispatch();

  // Request and select the job
  useEffect(() => {
    dispatch(fetchJob(jobId));
  }, [dispatch, jobId]);
  const job = useSelector((state: RootState) => getJob(state, { jobId }));

  // Request and select the job tasks
  useEffect(() => {
    dispatch(fetchJobTasks(jobId));
  }, [dispatch, jobId]);
  const tasks = useSelector((state: RootState) =>
    getTasksByJob(state, { jobId }),
  );

  // Request and select job criteria
  useEffect(() => {
    dispatch(fetchCriteria(jobId));
  }, [dispatch, jobId]);
  const criteria = useSelector((state: RootState) =>
    getCriteriaByJob(state, { jobId }),
  );

  // Load all skills
  useEffect(() => {
    dispatch(fetchSkills());
  }, [dispatch]);
  const skills = useSelector(getSkills);

  // Load all departments
  useEffect(() => {
    dispatch(fetchDepartments());
  }, [dispatch]);
  const departments = useSelector(getDepartments);

  // Load manager after Job has loaded
  const managerId = job?.manager_id;

  useEffect(() => {
    if (managerId) {
      dispatch(fetchManager(managerId));
    }
  }, [dispatch, managerId]);
  const manager = useSelector((state: RootState) =>
    managerId ? getManagerById(state, { managerId }) : null,
  );

  return (
    <JobReviewHrPage

      jobId={jobId}
      job={job}
      manager={manager}
      keyTasks={tasks}
      criteria={criteria}
      skills={skills}
      departments={departments}
    ></JobReviewHrPage>
  );
};

export default JobReviewHrDataFetcher;

const container = document.getElementById("job-review-hr");
if (container !== null) {
  if ("jobId" in container.dataset) {
    const jobId = Number(container.dataset.jobId as string);
    ReactDOM.render(
      <RootContainer>
        <JobReviewHrDataFetcher jobId={jobId} />
      </RootContainer>,
      container,
    );
  }
}


1			import React, { useEffect } from "react";
2			import { WrappedComponentProps, injectIntl, useIntl } from "react-intl";
			0 ignored issues – show Unused Code introduced 2020-01-13 17:52 UTC by Report Bug Copy Issue Report 'WrappedComponentProps' is defined but never used. Loading history... Unused Code introduced 2020-01-13 17:52 UTC by Report Bug Copy Issue Report 'injectIntl' is defined but never used. Loading history...
3			import nprogress from "nprogress";
			0 ignored issues – show Unused Code introduced 2020-01-13 17:52 UTC by Report Bug Copy Issue Report 'nprogress' is defined but never used. Loading history...
4			import { connect, useDispatch, useSelector } from "react-redux";
			0 ignored issues – show Unused Code introduced 2020-01-13 17:52 UTC by Report Bug Copy Issue Report 'connect' is defined but never used. Loading history...
5			import ReactDOM from "react-dom";
6			import RootContainer from "../RootContainer";
7			import {
8			Job,
9			JobPosterKeyTask,
10			Criteria,
11			Skill,
12			Manager,
13			Department,
14			} from "../../models/types";
15			import {
16			managerJobIndex,
			0 ignored issues – show Unused Code introduced 2020-01-13 17:52 UTC by Report Bug Copy Issue Report 'managerJobIndex' is defined but never used. Loading history...
17			jobBuilderSkills,
			0 ignored issues – show Unused Code introduced 2020-01-13 17:52 UTC by Report Bug Copy Issue Report 'jobBuilderSkills' is defined but never used. Loading history...
18			hrJobSummary,
19			} from "../../helpers/routes";
20			import { RootState } from "../../store/store";
21			import {
22			getJob,
23			getTasksByJob,
24			getCriteriaByJob,
25			} from "../../store/Job/jobSelector";
26			import { getSkills } from "../../store/Skill/skillSelector";
27			import { DispatchType } from "../../configureStore";
			0 ignored issues – show Unused Code introduced 2020-01-13 17:52 UTC by Report Bug Copy Issue Report 'DispatchType' is defined but never used. Loading history...
28			import {
29			submitJobForReview,
			0 ignored issues – show Unused Code introduced 2020-01-13 17:52 UTC by Report Bug Copy Issue Report 'submitJobForReview' is defined but never used. Loading history...
30			fetchJob,
31			fetchJobTasks,
32			fetchCriteria,
33			} from "../../store/Job/jobActions";
34			import { getDepartments as fetchDepartments } from "../../store/Department/deptActions";
35			import { getDepartments } from "../../store/Department/deptSelector";
36			import {
37			getSelectedManager,
			0 ignored issues – show Unused Code introduced 2020-01-13 17:52 UTC by Report Bug Copy Issue Report 'getSelectedManager' is defined but never used. Loading history...
38			getManagerById,
39			} from "../../store/Manager/managerSelector";
40			import {
41			fetchManager,
42			setSelectedManager,
			0 ignored issues – show Unused Code introduced 2020-01-13 17:52 UTC by Report Bug Copy Issue Report 'setSelectedManager' is defined but never used. Loading history...
43			} from "../../store/Manager/managerActions";
44			import { navigate } from "../../helpers/router";
45			import { isJobBuilderComplete } from "../JobBuilder/jobBuilderHelpers";
46			import JobReview from "../JobBuilder/Review/JobReview";
47			import { fetchSkills } from "../../store/Skill/skillActions";
48
49			interface JobReviewHrPageProps {
50			jobId: number;
51			job: Job \| null;
52			skills: Skill[];
53			keyTasks: JobPosterKeyTask[];
54			criteria: Criteria[];
55			departments: Department[];
56			manager: Manager \| null;
57			}
58
59			const JobReviewHrPage: React.FunctionComponent<JobReviewHrPageProps> = ({
60			jobId,
61			job,
62			skills,
63			keyTasks,
64			criteria,
65			departments,
66			manager,
67			}): React.ReactElement => {
68			const { locale } = useIntl();
69			if (locale !== "en" && locale !== "fr") {
70			throw new Error("Unexpected locale");
71			}
72
73			const handleReturn = (): void => {
74			// Go to Previous page
75			navigate(hrJobSummary(locale, jobId));
76			};
77			const handleContinue = (): void => {
78			// do nothing
79			};
80			const handleSubmitJob = async (): Promise<void> => {
81			// do nothing
82			};
83			const jobIsComplete =
84			job !== null && isJobBuilderComplete(job, keyTasks, criteria, locale);
85
86			return job !== null ? (
87			<JobReview
88			job={job}
89			manager={manager}
90			tasks={keyTasks}
91			criteria={criteria}
92			skills={skills}
93			departments={departments}
94			validForSubmission={jobIsComplete}
95			handleSubmit={handleSubmitJob}
96			handleReturn={handleReturn}
97			handleContinue={handleContinue}
98			/>
99			) : (
100			<h3>Data is loading</h3> // TODO:
101			);
102			};
103
104			const JobReviewHrDataFetcher: React.FC<{ jobId: number }> = ({ jobId }) => {
105			const dispatch = useDispatch();
106
107			// Request and select the job
108			useEffect(() => {
109			dispatch(fetchJob(jobId));
110			}, [dispatch, jobId]);
111			const job = useSelector((state: RootState) => getJob(state, { jobId }));
112
113			// Request and select the job tasks
114			useEffect(() => {
115			dispatch(fetchJobTasks(jobId));
116			}, [dispatch, jobId]);
117			const tasks = useSelector((state: RootState) =>
118			getTasksByJob(state, { jobId }),
119			);
120
121			// Request and select job criteria
122			useEffect(() => {
123			dispatch(fetchCriteria(jobId));
124			}, [dispatch, jobId]);
125			const criteria = useSelector((state: RootState) =>
126			getCriteriaByJob(state, { jobId }),
127			);
128
129			// Load all skills
130			useEffect(() => {
131			dispatch(fetchSkills());
132			}, [dispatch]);
133			const skills = useSelector(getSkills);
134
135			// Load all departments
136			useEffect(() => {
137			dispatch(fetchDepartments());
138			}, [dispatch]);
139			const departments = useSelector(getDepartments);
140
141			// Load manager after Job has loaded
142			const managerId = job?.manager_id;
			0 ignored issues – show Coding Style introduced 2020-01-13 17:52 UTC by Report Bug Copy Issue Report As per coding-style, the identifier `manager_id` should be in camel-case. Loading history...
143			useEffect(() => {
144			if (managerId) {
145			dispatch(fetchManager(managerId));
146			}
147			}, [dispatch, managerId]);
148			const manager = useSelector((state: RootState) =>
149			managerId ? getManagerById(state, { managerId }) : null,
150			);
151
152			return (
153			<JobReviewHrPage
			0 ignored issues – show introduced 2020-01-13 17:52 UTC by Report Bug Copy Issue Report Empty components are self-closing Loading history...
154			jobId={jobId}
155			job={job}
156			manager={manager}
157			keyTasks={tasks}
158			criteria={criteria}
159			skills={skills}
160			departments={departments}
161			></JobReviewHrPage>
162			);
163			};
164
165			export default JobReviewHrDataFetcher;
166
167			const container = document.getElementById("job-review-hr");
168			if (container !== null) {
169			if ("jobId" in container.dataset) {
170			const jobId = Number(container.dataset.jobId as string);
171			ReactDOM.render(
172			<RootContainer>
173			<JobReviewHrDataFetcher jobId={jobId} />
174			</RootContainer>,
175			container,
176			);
177			}
178			}
179

GCTC-NTGC / TalentCloud

Push — task/hr-job-review ( 0c21f5 )

resources/assets/js/components/HRPortal/JobReviewHrPage.tsx A

Complexity

Size

Duplication

Importance

Duplication Side-by-Side

Filter issues like