revert "feat: Add routes and paths to nav bar items (anitab-org#315)" (…

…anitab-org#328)

This reverts commit 8865898.

package.json

@@ -8,7 +8,6 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/user-event": "^7.1.2",
     "dayjs": "^1.9.3",
-    "hookrouter": "^1.2.5",
     "html-react-parser": "^1.4.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

src/App.js

@@ -1,16 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { View } from 'react-native';
-import { useRoutes } from 'hookrouter';
-import Home from './Components/Home';
-import AboutUs from './Components/AboutUs';
 import Header from './Components/Header';
+import Content from './Components/Content';
 import Footer from './Components/Footer';
-import Programs from './Components/Programs';
-import Projects from './Components/Projects';
-import Events from './Components/Events';
-import Contribute from './Components/Contribute';
 
 function App() {
+  const [selected, setSelected] = useState(0);
   const titles = [
     'HOME',
     'ABOUT US',
@@ -19,21 +14,10 @@ function App() {
     'EVENTS',
     'CONTRIBUTE',
   ];
-
-  const routes = {
-    '/': () => <Home />,
-    '/about-us': () => <AboutUs />,
-    '/programs': () => <Programs />,
-    '/projects': () => <Projects />,
-    '/events': () => <Events />,
-    '/contribute': () => <Contribute />,
-  };
-
-  const routeResult = useRoutes(routes);
   return (
     <View style={{ position: 'absolute', width: '100%', alignItems: 'center' }}>
-      <Header titles={titles} />
-      {routeResult}
+      <Header selected={selected} setSelected={setSelected} titles={titles} />
+      <Content selected={selected} titles={titles} />
       <Footer />
     </View>
   );

src/Components/Header/index.js

@@ -6,9 +6,8 @@ import {
   TouchableHighlight,
   StyleSheet,
 } from 'react-native';
-import { usePath } from 'hookrouter';
 
-function Header({ titles }) {
+function Header({ selected, setSelected, titles }) {
   return (
     <View
       style={{
@@ -22,49 +21,42 @@ function Header({ titles }) {
       <TouchableHighlight
         style={styles.logoContainer}
         underlayColor="transparent"
+        onPress={() => setSelected(0)}
         accessible={true}
         accessibilityLabel={titles[0]}
       >
-        <a styles={styles.links} href="/">
-          <Image
-            style={{ height: 50, width: 100 }}
-            source={require('./../../assets/logo.png')}
-          />
-        </a>
+        <Image
+          style={{ height: 50, width: 100 }}
+          source={require('./../../assets/logo.png')}
+        />
       </TouchableHighlight>
-      {MenuItem(titles[1], '/about-us')}
-      {MenuItem(titles[2], '/programs')}
-      {MenuItem(titles[3], '/projects')}
-      {MenuItem(titles[4], '/events')}
-      {MenuItem(titles[5], '/contribute')}
+      {MenuItem(1, selected, setSelected, titles[1])}
+      {MenuItem(2, selected, setSelected, titles[2])}
+      {MenuItem(3, selected, setSelected, titles[3])}
+      {MenuItem(4, selected, setSelected, titles[4])}
+      {MenuItem(5, selected, setSelected, titles[5])}
     </View>
   );
 }
 
-function MenuItem(title, path) {
-  const currentPath = usePath();
-  const isSelected = (path) => currentPath === path;
-
+function MenuItem(index, selected, setSelected, title) {
   return (
     <TouchableHighlight
       style={styles.buttonContainer}
       underlayColor="transparent"
+      onPress={() => setSelected(index)}
       accessible={true}
       accessibilityLabel={title}
     >
-      <a href={path}>
-        <Text
-          style={{
-            borderBottomColor: isSelected(path)
-              ? 'powderblue'
-              : 'transparent',
-            borderBottomWidth: 2,
-            alignSelf: 'center',
-          }}
-        >
-          {title}
-        </Text>
-      </a>
+      <Text
+        style={{
+          borderBottomColor: selected === index ? 'powderblue' : 'transparent',
+          borderBottomWidth: 2,
+          alignSelf: 'center',
+        }}
+      >
+        {title}
+      </Text>
     </TouchableHighlight>
   );
 }

src/index.css

@@ -11,7 +11,3 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
-
-:any-link {
-  text-decoration-color: transparent;
-}

yarn.lock

@@ -5330,11 +5330,6 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hookrouter@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/hookrouter/-/hookrouter-1.2.5.tgz#ea1b88fd9f6a48816b17145bfb2b38dfc93df21e"
-  integrity sha512-9OLve2u+JZDCOgPnxJu5dvg/mU1w2ZWWlSOFxCKcGQKRSH1MXI8tMwEgm64mQfjZLET/7yFRTUrZ4hUYoK0ezw==
-
 hosted-git-info@^2.1.4:
   version "2.8.9"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"