move info to sidebar

app/components/Event/Event.css

@@ -6,7 +6,6 @@
   display: block;
   width: 1px;
   height: 100%;
-  font-family: monospace;
   line-height: 1.5em;
   color: #fff;
   background-color: var(--color-red);

app/components/Event/Event.js

@@ -29,7 +29,7 @@ Event.defaultProps = {
 };
 
 const StyledEvent = styled(Event)`
-  margin-left: ${props => props.year + 4026}px;
+  margin-left: ${props => props.year + 4100}px;
 `;
 
 export default StyledEvent;

app/components/Header/Header.css

@@ -26,13 +26,11 @@
 }
 
 .Header-title {
-  font-family: monospace;
   font-size: 1.5rem;
   text-transform: uppercase;
 }
 
 .Header-link--persons {
-  font-family: monospace;
   text-transform: uppercase;
 }
 

app/components/Sidebar/Sidebar.css

@@ -0,0 +1,30 @@
+/** @define Sidebar */
+
+.Sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 1rem;
+  font-size: 12px;
+  box-shadow: inset 1rem 0 .75rem -1rem rgba(0, 0, 0, .5);
+}
+
+.Sidebar-title {
+  margin-bottom: .5em;
+}
+
+.Sidebar-icon {
+  margin-bottom: 1rem;
+  font-size: 2rem;
+  cursor: pointer;
+}
+
+.Sidebar-image {
+  margin-bottom: 1rem;
+}
+
+.Sidebar-tableCell {
+  padding: .25em;
+  white-space: nowrap;
+  vertical-align: top;
+}

app/components/Sidebar/Sidebar.js

@@ -0,0 +1,149 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import gql from 'graphql-tag';
+import { MdArrowBack } from 'react-icons/md';
+import getAllData from '../../../scripts/cfGraphql-es6';
+
+import SidebarContentEvent from './SidebarContentEvent';
+import SidebarContentPerson from './SidebarContentPerson';
+import SidebarContentTime from './SidebarContentTime';
+
+import { formatPerson } from '../../../scripts/formatData';
+
+import './Sidebar.css';
+
+const schemaEvent = id => gql`{
+  event(id:"${id}") {
+    sys {
+      id
+    }
+    name,
+    year,
+  },
+}`;
+
+const schemaPerson = id => gql`{
+  person(id:"${id}") {
+    sys {
+      id
+    }
+    name,
+    image {
+      fileName,
+      url
+    },
+    gender,
+    startYear,
+    startVagueness,
+    endYear,
+    endVagueness,
+    stillActive,
+    father {
+      sys {
+        id
+      }
+      name
+    },
+    mother {
+      sys {
+        id
+      }
+      name
+    },
+    childsCollection {
+      items {
+        sys {
+          id
+        }
+        name
+      }
+    }
+  },
+}`;
+
+const schemaTime = id => gql`{
+  time(id:"${id}") {
+    sys {
+      id
+    }
+    name,
+    startYear,
+    endYear,
+  },
+}`;
+
+
+class Sidebar extends PureComponent {
+  state = {
+    content: undefined,
+  }
+
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (this.props.contentElement !== prevProps.contentElement) {
+      this.fetchData();
+    }
+  }
+
+  async fetchData() {
+    const { contentElement: { id, type: contentType } } = this.props;
+    if (id && contentType) {
+      try {
+        let data;
+        if (contentType === 'event') {
+          data = await getAllData(schemaEvent(id));
+        } else if (contentType === 'person') {
+          data = await getAllData(schemaPerson(id));
+        } else if (contentType === 'time') {
+          data = await getAllData(schemaTime(id));
+        }
+
+        this.setState({
+          content: data[contentType] && formatPerson(data[contentType]),
+        });
+      } catch (error) {
+        console.log(error);
+      }
+    } else {
+      this.setState({
+        content: undefined,
+      });
+    }
+  }
+
+  render() {
+    const { changeSidebarContent, contentElement: { type: contentType } } = this.props;
+    const { content } = this.state;
+
+    if (!content) return null;
+
+    return (
+      <div className="Sidebar">
+        <MdArrowBack className="Sidebar-icon Sidebar-icon--back" onClick={() => changeSidebarContent(undefined)} />
+        {contentType === 'event' && <SidebarContentEvent {...content} />}
+        {contentType === 'person' && <SidebarContentPerson {...content} />}
+        {contentType === 'time' && <SidebarContentTime {...content} />}
+      </div>
+    );
+  }
+}
+
+Sidebar.defaultProps = {
+  contentElement: undefined,
+};
+
+Sidebar.propTypes = {
+  contentElement: PropTypes.shape({
+    id: PropTypes.string,
+    type: PropTypes.oneOf([
+      'event',
+      'person',
+      'time',
+    ]),
+  }),
+};
+
+export default Sidebar;

app/components/Sidebar/SidebarContentEvent.js

@@ -0,0 +1,33 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+import { ourTime } from '../../js/utils';
+
+const SidebarContentEvent = ({ name, year }) => (
+  <Fragment>
+    <h1 className="Sidebar-title">{name}</h1>
+
+    <table>
+      <tbody>
+        <tr>
+          <td className="Sidebar-tableCell">Jahr:</td>
+          <td className="Sidebar-tableCell">
+            {ourTime(year)}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </Fragment>
+);
+
+SidebarContentEvent.defaultProps = {
+  name: undefined,
+  year: undefined,
+};
+
+SidebarContentEvent.propTypes = {
+  name: PropTypes.string,
+  year: PropTypes.number,
+};
+
+export default SidebarContentEvent;

app/components/Sidebar/SidebarContentPerson.js

@@ -0,0 +1,114 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+import { ourTime, timeperiod } from '../../js/utils';
+
+const SidebarContentPerson = (props) => {
+  const {
+    name,
+    avatar: image,
+    startYear,
+    startVagueness,
+    endYear,
+    endVagueness,
+    father,
+    mother,
+    childs,
+  } = props;
+
+  const age = timeperiod(startYear, (endYear || new Date().getFullYear()));
+
+
+  return (
+    <Fragment>
+      { image &&
+        <picture>
+          <source srcSet={`${image}?w=480&fl=progressive`} media="(min-resolution: 120dpi)" />
+          <img className="Sidebar-image" src={`${image}?w=320&fl=progressive`} alt={`Bild von ${name}`} />
+        </picture>
+      }
+
+      <h1 className="Sidebar-title">{name}</h1>
+
+      <table>
+        <tbody>
+
+          <tr>
+            <td className="Sidebar-tableCell">Geboren:</td>
+            <td className="Sidebar-tableCell">
+              {ourTime(startYear)}{startVagueness && `(${startVagueness})`}
+            </td>
+          </tr>
+
+          { endYear &&
+            <tr>
+              <td className="Sidebar-tableCell">Gestorben:</td>
+              <td className="Sidebar-tableCell">
+                {ourTime(endYear)} {endVagueness && `(${endVagueness})`}
+              </td>
+            </tr>
+          }
+
+          <tr>
+            <td className="Sidebar-tableCell">Lebensdauer:</td>
+            <td className="Sidebar-tableCell">{age} Jahre</td>
+          </tr>
+
+          { father &&
+            <tr>
+              <td className="Sidebar-tableCell">Vater:</td>
+              <td className="Sidebar-tableCell">
+                {father}
+              </td>
+            </tr>
+          }
+
+          { mother &&
+            <tr>
+              <td className="Sidebar-tableCell">Mutter:</td>
+              <td className="Sidebar-tableCell">
+                {mother}
+              </td>
+            </tr>
+          }
+
+          { childs.length > 0 &&
+            <tr>
+              <td className="Sidebar-tableCell">Kinder:</td>
+              <td className="Sidebar-tableCell">
+                <ul>
+                  { childs.map(child => <li key={child}>{child}</li>)}
+                </ul>
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    </Fragment>
+  );
+};
+
+SidebarContentPerson.defaultProps = {
+  avatar: undefined,
+  startYear: undefined,
+  startVagueness: undefined,
+  endYear: undefined,
+  endVagueness: undefined,
+  father: undefined,
+  mother: undefined,
+  childs: [],
+};
+
+SidebarContentPerson.propTypes = {
+  name: PropTypes.string.isRequired,
+  avatar: PropTypes.string,
+  startYear: PropTypes.number,
+  startVagueness: PropTypes.string,
+  endYear: PropTypes.number,
+  endVagueness: PropTypes.string,
+  father: PropTypes.string,
+  mother: PropTypes.string,
+  childs: PropTypes.array,
+};
+
+export default SidebarContentPerson;