From cdafaa90db37915ab5be9513acaa33cdd363c0b1 Mon Sep 17 00:00:00 2001
From: Katalina Okano <git@kat.cafe>
Date: Sat, 10 Oct 2020 05:01:12 -0400
Subject: [PATCH] fix(design-system): redo tab view to be based on index
 instead of title

---
 .../atoms/tab-view/TabView.stories.tsx        | 17 +++++++++-------
 src/design-system/atoms/tab-view/TabView.tsx  | 20 +++++++++++--------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/design-system/atoms/tab-view/TabView.stories.tsx b/src/design-system/atoms/tab-view/TabView.stories.tsx
index 4179a93..86f42d0 100644
--- a/src/design-system/atoms/tab-view/TabView.stories.tsx
+++ b/src/design-system/atoms/tab-view/TabView.stories.tsx
@@ -12,13 +12,16 @@ export default {
 };
 
 export const ManyTabs = ({ tabCount }) => {
-    const tabs = [...'0'.repeat(tabCount)].reduce(
-        (acc, _, idx) => ({
-            ...acc,
-            [`Tab ${idx + 1}`]: <Tab>{() => <div>tab {idx + 1}</div>}</Tab>,
-        }),
-        {}
-    );
+    const tabs = [...'0'.repeat(tabCount)].map((_, i) => (
+        <Tab title={`tab ${i}`}>
+            {() => (
+                <>
+                    <h1>tab {i}</h1>
+                    <p>hello!!!!!</p>
+                </>
+            )}
+        </Tab>
+    ));
 
     return <TabView>{tabs}</TabView>;
 };
diff --git a/src/design-system/atoms/tab-view/TabView.tsx b/src/design-system/atoms/tab-view/TabView.tsx
index 36be0dd..3cb4a7b 100644
--- a/src/design-system/atoms/tab-view/TabView.tsx
+++ b/src/design-system/atoms/tab-view/TabView.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 import { TabTitleRow, TabContent, TabViewStyled, TabTitle } from './TabView.styled';
 
 export type TabViewProps = {
-    children: { [title: string]: React.ReactNode };
-    initialTab?: string;
+    children: React.ReactNode[];
+    initialTab?: number;
 };
 
 type TabProps = {
@@ -12,15 +12,19 @@ type TabProps = {
 };
 
 export const TabView = (props: TabViewProps) => {
-    const tabNames = Object.keys(props.children);
+    const tabNames = React.Children.map(props.children, (child) => {
+        if (!React.isValidElement(child)) {
+            return null;
+        }
+
+        return child.props.title;
+    });
 
     if (tabNames.length === 0) {
         return null;
     }
 
-    const [currentTab, setCurrentTab] = React.useState<keyof TabViewProps['children']>(
-        props.initialTab ?? tabNames[0]
-    );
+    const [currentTab, setCurrentTab] = React.useState<number>(props.initialTab ?? 0);
 
     return (
         <TabViewStyled>
@@ -28,7 +32,7 @@ export const TabView = (props: TabViewProps) => {
                 {tabNames.map((tabName, idx) => (
                     <TabTitle
                         selected={currentTab === tabName}
-                        onClick={() => setCurrentTab(tabName)}
+                        onClick={() => setCurrentTab(idx)}
                         key={`tab${tabName}${idx}`}
                     >
                         {tabName}
@@ -37,7 +41,7 @@ export const TabView = (props: TabViewProps) => {
             </TabTitleRow>
             <TabContent>
                 {props.children[currentTab] || (
-                    <i onLoad={() => setCurrentTab(tabNames[0])}>
+                    <i onLoad={() => setCurrentTab(0)}>
                         Tabs were misconfigured, resetting to zero.
                     </i>
                 )}