Alppy suggestions from code review and improve legibility of transcripts

Author: Yushin Jo

src/services/transcript.ts

@@ -22,8 +22,7 @@ const getItems = (username: string) =>
   Promise.all([
     userService.getMembershipHistory(username),
     http.get<StudentEmployment[]>('studentemployment/'),
-  ])
-    .then(([memberships, jobs]) => categorizeItems(memberships, jobs))
+  ]).then(([memberships, jobs]) => categorizeItems(memberships, jobs));
 
 // const MembershipTypeMap = {
 //   LEA: 'honors',
@@ -71,12 +70,13 @@ const categorizeItems = async (memberships: MembershipHistory[], jobs: StudentEm
 
   groupedMembershipHistory.activities = memberships;
 
-  // sorting job title by alphabetical order
-
-  // sorting the same job title by end date
+  /**
+   * Sorting job titles by alphabetical order.
+   * Sorting job titles by end date if there are the same job titles.
+   */
   groupedMembershipHistory.experiences.sort((a, b) =>
-    getJobTitle(a).localeCompare(getJobTitle(b)) != 0
-      ? 0
+    getJobTitle(a).localeCompare(getJobTitle(b)) !== 0
+      ? getJobTitle(a).localeCompare(getJobTitle(b))
       : getExperienceEndDate(b) - getExperienceEndDate(a),
   );
 
@@ -148,5 +148,5 @@ const transcriptService = {
 
 export default transcriptService;
 
-const getJobTitle = (experience: MembershipHistory | StudentEmployment) => 
-   'Sessions' in experience ? experience.ActivityCode : experience.Job_Title;
+const getJobTitle = (experience: MembershipHistory | StudentEmployment) =>
+  'Sessions' in experience ? experience.ActivityCode : experience.Job_Title;

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

@@ -31,8 +31,29 @@
   }
 }
 
+.experience_transcript_activities_empty_titles {
+  display: grid;
+  grid-template-columns: 5% 70% 25%;
+  grid-template-rows: auto auto;
+  justify-items: stretch;
+  position: relative;
+  top: -20px;
+
+  .organization_role {
+    grid-column: 2;
+    grid-row: 1;
+    text-align: left;
+  }
+
+  .date {
+    grid-column: 3;
+    grid-row: 1;
+    text-align: left;
+  }
+}
+
 @media print {
   .experience_transcript_activities {
-    grid-row-gap: 0px;
+    grid-row-gap: 20px;
   }
 }

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

@@ -10,11 +10,14 @@ type Props = {
 };
 
 const Experience = ({ Experience, previousTitles, setPreviousTitles }: Props) => {
+  const jobTitles = newJobTitle(Experience, previousTitles, setPreviousTitles);
+  const experienceTranscript =
+    jobTitles === ''
+      ? styles.experience_transcript_activities_empty_titles
+      : styles.experience_transcript_activities;
   return (
-    <div className={styles.experience_transcript_activities}>
-      <div className={styles.organization_role}>
-        {newJobTitle(Experience, previousTitles, setPreviousTitles)}
-      </div>
+    <div className={experienceTranscript}>
+      <div className={styles.organization_role}>{jobTitles}</div>
       <div className={styles.date}> {formatDuration(Experience)} </div>
     </div>
   );

src/views/CoCurricularTranscript/index.tsx

@@ -33,6 +33,10 @@ const CoCurricularTranscript = () => {
           return;
         }
         setLoading(true);
+        /**
+         * When you return the transcript from other page, the job titles will be lost
+         * Fixing bug by setting PreviousTitles to empty array when the transcript is loaded
+         */
         setPreviousTitles([]);
         const transcriptItems = await transcriptService.getItems(profile.AD_Username);
         setTranscriptItems(transcriptItems);