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 => (
-  <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 */}
-      <span role="button" tabIndex="0" onClick={props.toggleInterviewsListModal}>View</span> {/* eslint-disable-line */}
-    </div>
-    <Modal
-      isModalOpen={props.isInterviewsListModalOpen}
-      closeModal={props.toggleInterviewsListModal}
-      modalOnMobileOnly
-    >
-      <div className="interviews-list">
-        <h4>Interviews ({ props.data.length })</h4>
-        <ul>
-          { props.data.map(interview => (
-            // eslint-disable-next-line
-            <li
-              id={interview.id}
-              key={interview.id}
-              onClick={props.toggleSingleInterview}
-            >
-              { interview.name }
-            </li>
-            ))
-          }
-        </ul>
+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">
+        {/* eslint-disable-next-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>
-  </div>
-);
+      <Modal
+        isModalOpen={props.isInterviewsListModalOpen}
+        closeModal={props.toggleInterviewsListModal}
+        modalOnMobileOnly
+      >
+        <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>
+                      {interviews[firstLetter].map(interview => (
+                        // eslint-disable-next-line
+                        <li
+                          id={interview.id}
+                          key={interview.id}
+                          onClick={props.toggleSingleInterview}
+                        >
+                          {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;
+    }
+  }
+}