Updating interviews list

- Sorting interviews alphabetically
- Building up interviews object with letter key
- Looping through each letter and listing intervies by that letter
- Adding scroll into view with letters nav

components/interviews/interviewsList/index.js

@@ -3,36 +3,91 @@ import { PropTypes } from 'prop-types';
 import Modal from '../../modal';
 import './style.scss';
 
-const InterviewsList = props => (
+const InterviewsList = props => {
+
+  // Sort interviews alphabetically
+  const sortedInterviews = props.data.sort((a, b) => { return a.name.localeCompare(b.name); });
+  const interviews = {};
+
+  // Build up interviews object with letter key
+  sortedInterviews.forEach(interview => {
+    const firstLetter = interview.name.charAt(0);
+    if (typeof interviews[firstLetter] === 'undefined') {
+      interviews[firstLetter] = [];
+    }
+    interviews[firstLetter].push(interview);
+  });
+
+  return (
     <div className="interviews-wrap">
       <div className="mob-interviews-link">
-      <span role="button" tabIndex="0" onClick={props.toggleInterviewsListModal}>Interviews ({ props.data.length })</span> {/* eslint-disable-line */}
+        {/* eslint-disable-next-line */}
-      <span role="button" tabIndex="0" onClick={props.toggleInterviewsListModal}>View</span> {/* eslint-disable-line */}
+        <span
+          role="button"
+          tabIndex="0"
+          onClick={props.toggleInterviewsListModal}
+        >
+          Interviews ({props.data.length})
+        </span>
+        {/* eslint-disable-next-line */}
+        <span
+          role="button"
+          tabIndex="0"
+          onClick={props.toggleInterviewsListModal}
+        >
+          View
+        </span>
       </div>
       <Modal
         isModalOpen={props.isInterviewsListModalOpen}
         closeModal={props.toggleInterviewsListModal}
         modalOnMobileOnly
       >
-      <div className="interviews-list">
+        <React.Fragment>
           <h4>Interviews ({ props.data.length })</h4>
+          <div className="interviews-nav-wrap">
+            <div className="interviews-list">
+              {
+                Object.keys(interviews).map(firstLetter => (
+                  <div className="letter-block" key={firstLetter}>
+                    <div id={firstLetter}>{ firstLetter }</div>
                     <ul>
-          { props.data.map(interview => (
+                      {interviews[firstLetter].map(interview => (
                         // eslint-disable-next-line
                         <li
                           id={interview.id}
                           key={interview.id}
                           onClick={props.toggleSingleInterview}
                         >
-              { interview.name }
+                          {interview.name}
                         </li>
-            ))
+                        )
-          }
+                      )}
                     </ul>
                   </div>
+                  )
+                )
+              }
+            </div>
+            <div className="letters-nav">
+              {
+                Object.keys(interviews).map(firstLetter => (
+                  <span
+                    key={firstLetter}
+                    onClick={() => { document.querySelector(`#${firstLetter}`).scrollIntoView({ behavior: 'smooth' }); }}
+                  >
+                    { firstLetter }
+                  </span>
+                  )
+                )
+              }
+            </div>
+          </div>
+        </React.Fragment>
       </Modal>
     </div>
-);
+  );
+};
 
 InterviewsList.propTypes = {
   isInterviewsListModalOpen: PropTypes.bool.isRequired,

components/interviews/interviewsList/style.scss

@@ -19,8 +19,28 @@
   }
 }
 
+.interviews-nav-wrap {
+  display: flex;
+  justify-content: space-between;
+  justify-content: flex-end;
+  position: relative;
+}
+
 .interviews-list {
 
+  @media (min-width: $desktop) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    overflow: auto;
+    width: 96%;
+  }
+
+  .letter-block {
+    padding-bottom: calculateRem(32);
+  }
+
   li {
     cursor: pointer;
     outline: none;
@@ -30,3 +50,16 @@
     }
   }
 }
+
+.letters-nav {
+  display: none;
+
+  @media (min-width: $desktop) {
+    display: flex;
+    flex-direction: column;
+
+    span {
+      cursor: pointer;
+    }
+  }
+}