reduce redundancy in transcript

src/services/transcript.ts

@@ -18,6 +18,12 @@ export type TranscriptItems = {
   activities: MembershipHistory[];
 };
 
+export type Groupexperience = {
+  Job_Title: string;
+  job: StudentEmployment[] | undefined;
+  latestDate?: string;
+};
+
 const getItems = (username: string) =>
   Promise.all([
     userService.getMembershipHistory(username),
@@ -50,7 +56,7 @@ const getItems = (username: string) =>
 const categorizeItems = async (memberships: MembershipHistory[], jobs: StudentEmployment[]) => {
   const groupedMembershipHistory: TranscriptItems = {
     honors: [] as MembershipHistory[],
-    experiences: jobs as (MembershipHistory | StudentEmployment)[],
+    experiences: jobs as StudentEmployment[],
     service: [] as MembershipHistory[],
     activities: [] as MembershipHistory[],
   };
@@ -70,10 +76,71 @@ const categorizeItems = async (memberships: MembershipHistory[], jobs: StudentEm
 
   groupedMembershipHistory.activities = memberships;
 
-  groupedMembershipHistory.experiences.sort(
-    (a, b) => getExperienceEndDate(b) - getExperienceEndDate(a),
+  // Sort experiences by experience name then by end date
+  groupedMembershipHistory.experiences.sort((a, b) => {
+    const nameComparison = getName(a).localeCompare(getName(b));
+    return nameComparison !== 0
+      ? nameComparison
+      : getExperienceEndDate(b) - getExperienceEndDate(a);
+  });
+
+  //groupedMembershipHistory.experiences = jobs;
+
+  let GroupByTitle = Object.entries(Object.groupBy(jobs, (job) => job.Job_Title)).map(
+    ([title, job]) => ({
+      Job_Title: title,
+      job,
+      latestDate: '',
+    }),
   );
 
+  // This code is has a lot of ? and ! opeators because typescript can't analyze the
+  // loop to recognize that the array indexing is safe.
+  for (let i = 0; i < GroupByTitle.length; i++) {
+    let maxDate: string = '';
+    let tempJob = GroupByTitle?.[i].job;
+    let numJobs = tempJob!.length;
+    for (let j = 0; j < numJobs; j++) {
+      let tempVal = GroupByTitle[i];
+      let value = tempVal!.job?.[j].Job_End_Date;
+      if (maxDate! < value!) {
+        maxDate = value!;
+      }
+    }
+    GroupByTitle[i].latestDate = maxDate;
+  }
+
+  // Sorting the grouped job by the latest end date
+  GroupByTitle.sort((a, b) => {
+    return getLatestEndDate(b)! - getLatestEndDate(a)!;
+  });
+
+  console.log(GroupByTitle);
+
+  let test = [];
+  for (let i = 0; i < GroupByTitle.length; i++) {
+    let tempJob = GroupByTitle?.[i].job;
+    let numJobs = tempJob!.length;
+    for (let j = 0; j < numJobs; j++) {
+      let tempVal = GroupByTitle[i];
+      let value = tempVal!.job?.[j];
+      if (j > 0) {
+        value!.Job_Title = '';
+      }
+      if (value) {
+        test.push(value);
+      }
+    }
+  }
+
+  for (let i = 0; i < test.length; i++) {
+    jobs[i] = test[i];
+  }
+
+  //console.log('jobs');
+  //console.log(jobs);
+  //console.log('groupedMembershipHistory');
+  //console.log(groupedMembershipHistory);
   return groupedMembershipHistory;
 };
 
@@ -141,3 +208,14 @@ const transcriptService = {
 };
 
 export default transcriptService;
+
+const getName = (experience: MembershipHistory | StudentEmployment) =>
+  'Sessions' in experience ? experience.ActivityCode : experience.Job_Title;
+
+const getLatestEndDate = (GroupByTitle: Groupexperience) => {
+  const date = GroupByTitle.latestDate;
+
+  if (date) {
+    return Date.parse(date);
+  }
+};

src/views/CoCurricularTranscript/Components/Experience/Experience.module.scss

@@ -29,10 +29,16 @@
     grid-row: 1;
     text-align: left;
   }
-}
 
-@media print {
-  .experience_transcript_activities {
-    grid-row-gap: 0px;
+  @media print {
+    .experience_transcript_activities {
+      grid-row-gap: 20px;
+    }
   }
 }
+
+.empty_title {
+  position: relative;
+  grid-row-gap: 5px;
+  top: -15px;
+}

src/views/CoCurricularTranscript/Components/Experience/index.tsx

@@ -6,14 +6,21 @@ type Props = {
   Experience: StudentEmployment;
 };
 
-const Experience = ({ Experience }: Props) => (
-  <div className={styles.experience_transcript_activities}>
-    <div className={styles.organization_role}>
-      {Experience.Job_Department_Name}, {Experience.Job_Title}
+const Experience = ({ Experience }: Props) => {
+  const jobTitles = newJobTitle(Experience);
+  return (
+    <div
+      className={
+        jobTitles === ''
+          ? `${styles.experience_transcript_activities} ${styles.empty_title}`
+          : styles.experience_transcript_activities
+      }
+    >
+      <div className={styles.organization_role}>{jobTitles}</div>
+      <div className={styles.date}> {formatDuration(Experience)} </div>
     </div>
-    <div className={styles.date}> {formatDuration(Experience)} </div>
-  </div>
-);
+  );
+};
 
 const formatDuration = ({ Job_Start_Date, Job_End_Date }: StudentEmployment) => {
   if (!Job_Start_Date) {
@@ -35,4 +42,11 @@ const formatDuration = ({ Job_Start_Date, Job_End_Date }: StudentEmployment) =>
   }
 };
 
+const newJobTitle = ({ Job_Department_Name, Job_Title }: StudentEmployment) => {
+  if (Job_Title === '') {
+    return '';
+  }
+  return Job_Title === '' ? Job_Title : `${Job_Department_Name}, ${Job_Title}`;
+};
+
 export default Experience;