Merge branch 'refactor/contacts-page' into 'master'

Refactor/contacts page

See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!63

src/views/ContactsPage/ContactsPageView.tsx

@@ -9,11 +9,26 @@ import HvtmkJson from "./hvtmk.json";
 import MtmkJson from "./mtmk.json";
 import OptmkJson from "./optmk.json";
 import OtmkJson from "./otmk.json";
-import PtmkJson from "./ptmk.json";
+import EPtmkJson from "./eptmk.json";
 import SstmkJson from "./sstmk.json";
 import TtmkJson from "./ttmk.json";
 import UtmkJson from "./utmk.json";
 import YtmkJson from "./ytmk.json";
+import Others from "./others.json";
+
+const orderedCommittees = [
+  BoardJson,
+  HvtmkJson,
+  MtmkJson,
+  OptmkJson,
+  OtmkJson,
+  EPtmkJson,
+  SstmkJson,
+  TtmkJson,
+  UtmkJson,
+  YtmkJson,
+  Others,
+];
 
 const blank_profile = "/img/blank_profile.png";
 
@@ -25,6 +40,28 @@ const BlueLink = styled(Link)`
   }
 `;
 
+const IndexUL = styled.ul`
+  padding: 0;
+  list-style: none;
+
+  li:before {
+    content: attr(data-icon);
+    margin-right: 4px;
+  }
+`;
+
+const Index: React.FC<{ committees: typeof orderedCommittees }> = ({ committees }) => (
+  <IndexUL>
+    {committees.map(({ slug, name_fi }) => (
+      <BlueLink to={`#${slug}`} key={slug}>
+        <li data-icon="»">
+          {name_fi}
+        </li>
+      </BlueLink>
+    ))}
+  </IndexUL>
+);
+
 const Container = styled.div`
   color: ${colors.darkBlue};
 
@@ -92,74 +129,33 @@ const ContactsPageView: React.FC = () => (
         Asiaa olisi, mutta kehen ottaa yhteyttä?<br />
         Tämä sivu yrittää valottaa sen oikean ihmisen puhelinnumeroa ja sähköpostiosoitetta.
       </p>
+      <aside>
+        <div>
+          <h6>Toimikuntaluettelo</h6>
+          <Index committees={orderedCommittees} />
+        </div>
+      </aside>
     </TextSection>
 
-    <TextSection>
-      <CommitteeContainer committee={BoardJson}>
-        <p>
-          {"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
-          <BlueLink to="mailto:hallitus@sahkoinsinoorikilta.fi">
-            hallitus@sahkoinsinoorikilta.fi
-          </BlueLink>
-        </p>
-      </CommitteeContainer>
-    </TextSection>
-
-    <Divider />
-
-    <TextSection>
-      <CommitteeContainer committee={HvtmkJson} />
-    </TextSection>
-
-    <Divider />
-
-    <TextSection>
-      <CommitteeContainer committee={MtmkJson} />
-    </TextSection>
-
-    <Divider />
-
-    <TextSection>
-      <CommitteeContainer committee={OptmkJson} />
-    </TextSection>
-
-    <Divider />
-
-    <TextSection>
-      <CommitteeContainer committee={OtmkJson} />
-    </TextSection>
-
-    <Divider />
-
-    <TextSection id="eptmk">
-      <CommitteeContainer committee={PtmkJson} />
-    </TextSection>
-
-    <Divider />
-
-    <TextSection>
-      <CommitteeContainer committee={SstmkJson} />
-    </TextSection>
-
-    <Divider />
-
-    <TextSection id="ttmk">
-      <CommitteeContainer committee={TtmkJson} />
-    </TextSection>
-
-    <Divider />
-
-    <TextSection>
-      <CommitteeContainer committee={UtmkJson} />
-    </TextSection>
-
-    <Divider />
-
-    <TextSection>
-      <CommitteeContainer committee={YtmkJson} />
-    </TextSection>
-
-    <Divider />
+    {orderedCommittees.map((json) => (
+      <React.Fragment key={json.slug}>
+        {(json.slug !== "board") && (
+          <Divider />
+        )}
+        <TextSection id={json.slug}>
+          <CommitteeContainer committee={json}>
+            {(json.slug === "board") && (
+            <p>
+              {"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
+              <BlueLink to="mailto:hallitus@sahkoinsinoorikilta.fi">
+                hallitus@sahkoinsinoorikilta.fi
+              </BlueLink>
+            </p>
+            )}
+          </CommitteeContainer>
+        </TextSection>
+      </React.Fragment>
+    ))}
   </>
 );