From 6e22ee068f44214eff35cb15dfa1c9186e401c4e Mon Sep 17 00:00:00 2001
From: Paul Clue <67766160+Paul-Clue@users.noreply.github.com>
Date: Thu, 8 Dec 2022 14:59:21 -0500
Subject: [PATCH] Refactor tab component

---
 src/components/tabs/tabs.jsx  | 38 ++++++++++++----
 src/views/explore/explore.jsx | 85 +++++++++++++++++++----------------
 2 files changed, 76 insertions(+), 47 deletions(-)

diff --git a/src/components/tabs/tabs.jsx b/src/components/tabs/tabs.jsx
index cc637ff56..fec36dfdf 100644
--- a/src/components/tabs/tabs.jsx
+++ b/src/components/tabs/tabs.jsx
@@ -10,17 +10,37 @@ require('./tabs.scss');
  * Container for a custom, horizontal list of navigation elements
  * that can be displayed within a view or component.
  */
-const Tabs = props => (
-    <div className="tab-background">
-        <SubNavigation className={classNames('tabs', props.className)}>
-            {props.children}
-        </SubNavigation>
-    </div>
-);
+const Tabs = ({ items, activeTabName }) => {
+    const itemsRendered = items.map(({ name, onTrigger, getContent }) => {
+        const isActive = name === activeTabName
+        return (
+            <li 
+                className={`${isActive ? 'active' : ''}`}
+                onClick={onTrigger}
+                key={name}
+            >
+                {getContent(isActive)}
+            </li>
+        )
+    })
+    return (
+        <div className="tab-background">
+            <SubNavigation className="tabs">
+                {itemsRendered}
+            </SubNavigation>
+        </div>
+    )
+};
 
 Tabs.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string
+    items: PropTypes.arrayOf(
+        PropTypes.shape({
+            name: PropTypes.string.isRequired,
+            onTrigger: PropTypes.func.isRequired,
+            getContent: PropTypes.func.isRequired
+        })
+    ).isRequired,
+    activeTabName: PropTypes.string.isRequired,
 };
 
 module.exports = Tabs;
diff --git a/src/views/explore/explore.jsx b/src/views/explore/explore.jsx
index 664c266ee..f39ec6ed6 100644
--- a/src/views/explore/explore.jsx
+++ b/src/views/explore/explore.jsx
@@ -27,7 +27,6 @@ class Explore extends React.Component {
             'handleGetExploreMore',
             'handleChangeSortMode',
             'getBubble',
-            'getTab'
         ]);
 
         this.state = this.getExploreState();
@@ -125,45 +124,55 @@ class Explore extends React.Component {
                             </h1>
                         </div>
                     </TitleBanner>
-                    {/* <Tabs>
-                        {this.getTab('projects')}
-                        {this.getTab('studios')}
-                    </Tabs> */}
                     <Tabs
-                        items={
-                            [
-                                {
-                                    name: 'projects',
-                                    onTrigger: () => { 
-                                        window.location = `${window.location.origin}/explore/projects/${this.state.category}/${this.state.mode}`;
-                                    },
-                                    getContent: () =>(
-                                        <li className={classes}>
-                                            {this.state.itemType === type ? [
-                                                <img
-                                                    className={`tab-icon ${type}`}
-                                                    key={`tab-${type}`}
-                                                    src={`/svgs/tabs/${type}-active.svg`}
-                                                />
-                                            ] : [
-                                                <img
-                                                    className={`tab-icon ${type}`}
-                                                    key={`tab-${type}`}
-                                                    src={`/svgs/tabs/${type}-inactive.svg`}
-                                                />
-                                            ]}
-                                            <FormattedMessage id={`general.${type}`} />
-                                        </li>
-                                    )
+                        items={[
+                            {
+                                name: 'projects',
+                                onTrigger: () => { 
+                                    window.location = `${window.location.origin}/explore/projects/${this.state.category}/${this.state.mode}`;
                                 },
-                                {
-                                    name: 'studios',
-                                    onTrigger: () => { 
-                                        window.location = `${window.location.origin}/explore/studios/${this.state.tab}/${this.state.mode}`;
-                                    },
-                                    content: 'studios'
-                                }
-                            ]}
+                                getContent: (isActive) => (
+                                    <div>
+                                        {isActive ? (
+                                                <img 
+                                                    className="tab-icon projects"
+                                                    src="/svgs/tabs/projects-active.svg"
+                                                />
+                                            ) : (
+                                                <img
+                                                    className="tab-icon projects"
+                                                    src="/svgs/tabs/projects-inactive.svg"
+                                                />
+                                            )
+                                        }
+                                        <FormattedMessage id="general.projects" />
+                                    </div>
+                                )
+                            },
+                            {
+                                name: 'studios',
+                                onTrigger: () => { 
+                                    window.location = `${window.location.origin}/explore/studios/${this.state.category}/${this.state.mode}`;
+                                },
+                                getContent: (isActive) => (
+                                    <div>
+                                        {isActive ? (
+                                                <img 
+                                                    className="tab-icon studios"
+                                                    src="/svgs/tabs/studios-active.svg"
+                                                />
+                                            ) : (
+                                                <img
+                                                    className="tab-icon studios"
+                                                    src="/svgs/tabs/studios-inactive.svg"
+                                                />
+                                            )
+                                        }
+                                        <FormattedMessage id="general.studios" />
+                                    </div>
+                                )
+                            }
+                        ]}
                         activeTabName={ this.state.itemType }
                     />
                     <div className="sort-controls">