PoC for Assotiates Directory

package.json

@@ -23,6 +23,7 @@
     "cnbuilder": "^3.1.0",
     "cookie-parser": "^1.4.6",
     "decanter": "^7.0.0-rc.2",
+    "fast-sort": "^3.4.0",
     "gatsby": "^4.14.0",
     "gatsby-link": "^4.14.0",
     "gatsby-plugin-fontawesome-css": "^1.2.0",

src/components/components.js

@@ -84,12 +84,16 @@ import VerticalNavWrapper from './navigation/verticalNavWrapper';
 import VerticalNavItem from './navigation/verticalNavItem';
 import Wysiwyg from './simple/wysiwyg';
 import MembershipPaymentOptions from './page-types/membershipFormPage/membershipPaymentOptions';
+import AssociatesDirectoryPage from './page-types/associatesDirectoryPage/associatesDirectoryPage';
+import AssociatesDirectory from './page-types/associatesDirectoryPage/associatesDirectory';
 
 const ComponentList = {
   accordion: Accordion,
   accordionItem: AccordionItem,
   alert: SBAlert,
   alertCtaLink: SBAlertCtaLink,
+  associatesDirectoryPage: AssociatesDirectoryPage,
+  associatesDirectory: AssociatesDirectory,
   basicCard: BasicCard,
   basicCardHorizontal: BasicCardHorizontal,
   basicPage: BasicPage,

src/components/page-types/associatesDirectoryPage/associatesDirectory.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import SbEditable from 'storyblok-react';
+import { Container } from '../../layout/Container';
+import LegacyDirectory from './legacyDirectory/LegacyDirectory';
+
+const AssociatesDirectory = (props) => {
+  const { blok } = props;
+
+  return (
+    <SbEditable content={blok}>
+      <Container id="directory">
+        <LegacyDirectory />
+      </Container>
+    </SbEditable>
+  );
+};
+
+export default AssociatesDirectory;

src/components/page-types/associatesDirectoryPage/associatesDirectoryPage.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import SbEditable from 'storyblok-react';
+import { dcnb } from 'cnbuilder';
+import { Container } from '../../layout/Container';
+import { Heading } from '../../simple/Heading';
+import Layout from '../../partials/layout';
+import hasRichText from '../../../utilities/hasRichText';
+import RichTextRenderer from '../../../utilities/richTextRenderer';
+import CreateBloks from '../../../utilities/createBloks';
+
+const AssociatesDirectoryPage = (props) => {
+  const {
+    blok: { title, intro = {}, directory },
+    blok,
+  } = props;
+
+  return (
+    <SbEditable content={blok}>
+      <Layout hasHero={false} {...props}>
+        <Container as="main" id="main-content">
+          <header className="su-basefont-23">
+            <Container>
+              <Heading align="center" font="serif" id="page-title">
+                {title}
+              </Heading>
+            </Container>
+          </header>
+          {hasRichText(intro) && (
+            <div className={dcnb('su-big-paragraph su-max-w-prose')}>
+              <RichTextRenderer
+                wysiwyg={intro}
+                className="children:su-leading-display"
+              />
+            </div>
+          )}
+        </Container>
+
+        <Container className="basic-page su-relative su-flex-grow su-w-full">
+          <CreateBloks blokSection={directory} />
+        </Container>
+      </Layout>
+    </SbEditable>
+  );
+};
+
+export default AssociatesDirectoryPage;

src/components/page-types/associatesDirectoryPage/legacyDirectory/LegacyDirectory.jsx

@@ -0,0 +1,80 @@
+/* eslint-disable*/
+
+import React from 'react';
+import axios from 'axios';
+import keys from './keys.js';
+import Counter from './counter/Counter.jsx';
+//import Search from './search/Search.jsx';
+import NameTabs from './nameTabs/NameTabs.jsx';
+import './app.css';
+
+class LegacyDirectory extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {};
+  }
+
+  componentDidMount() {
+    console.log('keys', keys);
+
+    const names = [];
+    axios
+      .get(
+        `https://cdn.contentful.com/spaces/${keys.space}/entries?access_token=${keys.accessToken}&limit=1000&order=sys.id`
+      )
+      .then((response) => {
+        response.data.items.forEach((person) => {
+          names.push(person.fields);
+        });
+
+        this.setState({
+          names,
+          total: response.data.total,
+        });
+
+        const loops = Math.ceil(response.data.total / 1000);
+        let skip = 0;
+        for (let i = 0; i < loops; i++) {
+          skip += 1000;
+          axios
+            .get(
+              `https://cdn.contentful.com/spaces/${keys.space}/entries?access_token=${keys.accessToken}&limit=1000&skip=${skip}&order=sys.id`
+            )
+            .then((response) => {
+              let newNames = [];
+              response.data.items.forEach((person) => {
+                newNames.push(person.fields);
+              });
+              let totalNames = this.state.names.concat(newNames);
+              this.setState({
+                names: totalNames,
+              });
+            });
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  }
+
+  render() {
+    return (
+      <main>
+        <header>
+          <div id="associates--top-of-page" />
+          <Counter
+            className="counter"
+            count={this.state.names ? this.state.names.length : 0}
+          />
+          {/* <Search className="search" names={this.state.names} /> */}
+        </header>
+        {this.state.names && this.state.names.length === this.state.total && (
+          <NameTabs names={this.state.names} />
+        )}
+      </main>
+    );
+  }
+}
+
+export default LegacyDirectory;

src/components/page-types/associatesDirectoryPage/legacyDirectory/app.css

@@ -0,0 +1,11 @@
+#su-associates main {
+  margin-top: 2em;
+}
+
+#su-associates header {
+  margin-left: 3%;
+}
+
+#su-associates .counter {
+  margin-bottom: 1em;
+}

src/components/page-types/associatesDirectoryPage/legacyDirectory/counter/Counter.jsx

@@ -0,0 +1,9 @@
+/* eslint-disable*/
+
+import React from 'react';
+
+const Counter = (props) => {
+  return <div className="counter">{props.count} Associates Total</div>;
+};
+
+export default Counter;

src/components/page-types/associatesDirectoryPage/legacyDirectory/keys.js

@@ -0,0 +1,7 @@
+// It's not necessary to set these as environment variables because they are used on the client side.
+const keys = {
+  space: '0f39zonxf59w',
+  accessToken: '10OGNlSRGeKn81WAaTUxMjVL0nhXFEUszwRJIY7vPeI',
+};
+
+export default keys;

src/components/page-types/associatesDirectoryPage/legacyDirectory/letter/Letter.jsx

@@ -0,0 +1,45 @@
+/* eslint-disable*/
+
+import React from 'react';
+import './letter.css';
+
+const Letter = (props) => {
+  return (
+    <div>
+      {props.names.map((person, index) => {
+        let degrees = [];
+        for (const key in person.years) {
+          let degree;
+          degree = person.years[key];
+          if (degree.slice(0, 2) !== 'AB' && degree.slice(0, 2) !== 'BS') {
+            degrees.push(
+              `${degree.slice(0, -4)} '${degree.substr(degree.length - 2)}`
+            );
+          } else {
+            degrees.push(`'${degree.substring(5)}`);
+          }
+        }
+
+        if (person.yearAdded === props.recentlyAdded) {
+          return (
+            <div key={index}>
+              <b>
+                <div className="name">{`${person.entryTitle}`}</div>
+                <div className="degrees">{`${degrees.join(', ')}`}</div>
+              </b>
+            </div>
+          );
+        } else {
+          return (
+            <div key={index}>
+              <div className="name">{`${person.entryTitle}`}</div>
+              <div className="degrees">{`${degrees.join(', ')}`}</div>
+            </div>
+          );
+        }
+      })}
+    </div>
+  );
+};
+
+export default Letter;

src/components/page-types/associatesDirectoryPage/legacyDirectory/letter/letter.css

@@ -0,0 +1,11 @@
+#su-associates .name {
+  margin-left: 5%;
+  padding: 0.3em 0;
+  display: inline-block;
+  width: 40%;
+}
+
+#su-associates .degrees {
+  margin-left: 5%;
+  display: inline;
+}