feature: PR 4/8 — routes, App shell, Header/Footer/Settings

src/main.tsx

@@ -1,7 +1,7 @@
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
-import App from './react/App';
 import { SettingsProvider } from './react/context/SettingsContext';
+import AppRoutes from './react/routes';
 import './react/styles.scss';
 
 const rootElement = document.getElementById('root');
@@ -13,7 +13,7 @@ if (!rootElement) {
 createRoot(rootElement).render(
     <BrowserRouter>
         <SettingsProvider>
-            <App />
+            <AppRoutes />
         </SettingsProvider>
     </BrowserRouter>
 );

src/react/App.scss

@@ -0,0 +1,24 @@
+@import "./scss/media";
+@import "./scss/theme_variables";
+
+.body-cover {
+  width: 100%;
+  z-index: 0;
+  position: fixed;
+  height: 100%;
+}
+
+.wrapper {
+  position: relative;
+  width: 85%;
+  min-height: 80px;
+  margin: 0 auto;
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+  font-size: 15px;
+  height: 100%;
+  line-height: 1.3;
+
+   @media #{$mobile-only} {
+    width: 100%;
+  }
+}

src/react/App.tsx

@@ -1,11 +1,23 @@
+import { Outlet } from 'react-router-dom';
 import { useSettings } from './context/SettingsContext';
+import { usePageViews } from './hooks/usePageViews';
+import Footer from './components/Footer';
+import Header from './components/Header';
+import './App.scss';
 
 export default function App() {
     const { settings } = useSettings();
 
+    usePageViews();
+
     return (
-        <main className={settings.theme}>
-            <h1>Hacker News</h1>
-        </main>
+        <div className={settings.theme}>
+            <div className="body-cover"></div>
+            <div className="wrapper">
+                <Header />
+                <Outlet />
+                <Footer />
+            </div>
+        </div>
     );
 }

src/react/components/Feed.tsx

@@ -0,0 +1,17 @@
+import { useParams } from 'react-router-dom';
+import { FeedName } from '../models/feed-name.type';
+
+interface FeedProps {
+    feedName: FeedName;
+}
+
+export default function Feed({ feedName }: FeedProps) {
+    const { page } = useParams<'page'>();
+
+    return (
+        <main>
+            <h2>{feedName}</h2>
+            <p>Page {page}</p>
+        </main>
+    );
+}

src/react/components/Footer.scss

@@ -0,0 +1,23 @@
+@import "../scss/media";
+@import "../scss/theme_variables";
+
+#footer {
+  position: relative;
+  padding: 10px;
+  height: 60px;
+  letter-spacing: 0.7px;
+  text-align: center;
+
+  a {
+  	font-weight: bold;
+  	text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  @media #{$mobile-only} {
+    display: none;
+  }
+}

src/react/components/Footer.tsx

@@ -0,0 +1,14 @@
+import './Footer.scss';
+
+export default function Footer() {
+    return (
+        <div id="footer">
+            <p>
+                Show this project some ❤ on{' '}
+                <a href="https://github.com/hdjirdeh/angular2-hn" target="_blank" rel="noopener">
+                    GitHub
+                </a>
+            </p>
+        </div>
+    );
+}

src/react/components/Header.scss

@@ -0,0 +1,149 @@
+@import "../scss/media";
+@import "../scss/theme_variables";
+
+#header {
+  color: #fff;
+  padding: 6px 0;
+  line-height: 18px;
+  vertical-align: middle;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+
+  @media #{$mobile-only} {
+    height: 50px;
+    position: fixed;
+    top: 0;
+  }
+
+  a {
+    display: inline;
+  }
+}
+
+.home-link {
+  width: 50px;
+  height: 66px;
+}
+
+.logo-inner {
+  width: 32px;
+  position: absolute;
+  left: 17px;
+  top: 18px;
+  z-index: -1;
+  height: 32px;
+  border-radius: 50%;
+
+  @media #{$mobile-only} {
+    left: 16px;
+    top: 12px;
+  }
+}
+
+.logo {
+  width: 50px;
+  padding: 3px 8px 0;
+
+  @media #{$mobile-only} {
+    width: 45px;
+    padding: 0 0 0 10px;
+  }
+}
+
+h1 {
+  font-weight: normal;
+  display: inline-block;
+  vertical-align:middle;
+  margin: 0;
+  font-size: 16px;
+
+  a {
+    color: #fff;
+    text-decoration: none;
+  }
+}
+
+.name {
+  margin-right: 30px;
+  margin-bottom: 2px;
+
+  @media #{$mobile-only} {
+    display: none;
+  }
+}
+
+.header-text {
+  position: absolute;
+  width: inherit;
+  height: 20px;
+  left: 10px;
+  top: 27px;
+  z-index: -1;
+
+  @media #{$mobile-only} {
+    top: 22px;
+  }
+}
+
+.left {
+  position: absolute;
+  left: 60px;
+  font-size: 16px;
+
+  @media #{$mobile-only} {
+    width: 100%;
+    left: 0;
+  }
+}
+
+.header-nav {
+  display: inline-block;
+  margin-left: 20px;
+
+  @media #{$mobile-only} {
+    margin-left: 60px;
+  }
+
+  a {
+    color: hsla(0,0%,100%,.9);
+    text-decoration: none;
+    margin: 0 5px;
+    letter-spacing: 1.8px;
+
+    &:hover {
+      color: #fff;
+    }
+  }
+
+  .active {
+    color: #fff;
+  }
+}
+
+.info {
+  position: absolute;
+  top: 0;
+  right: 20px;
+  height: 100%;
+
+  @media #{$mobile-only} {
+    right: 10px;
+  }
+
+  img {
+    opacity: 0.8;
+    width: 25px;
+    margin-top: 21.5px;
+    display: block;
+
+    &:hover {
+      opacity: 1;
+      cursor: pointer;
+    }
+
+    @media #{$mobile-only} {
+      margin-top: 15px;
+    }
+  }
+}

src/react/components/Header.tsx

@@ -0,0 +1,72 @@
+import { Fragment } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import { useSettings } from '../context/SettingsContext';
+import { FeedName } from '../models/feed-name.type';
+import Settings from './Settings';
+import './Header.scss';
+
+const feedLinks: Array<{ feedName: FeedName; path: string; label: string }> = [
+    { feedName: 'newest', path: '/newest/1', label: 'new' },
+    { feedName: 'show', path: '/show/1', label: 'show' },
+    { feedName: 'ask', path: '/ask/1', label: 'ask' },
+    { feedName: 'jobs', path: '/jobs/1', label: 'jobs' },
+];
+
+function isFeedActive(pathname: string, feedName: FeedName): boolean {
+    return pathname.split('/')[1] === feedName;
+}
+
+function scrollTop(): void {
+    window.scrollTo(0, 0);
+}
+
+export default function Header() {
+    const { pathname } = useLocation();
+    const { settings, toggleSettings } = useSettings();
+
+    return (
+        <header>
+            <div id="header">
+                <NavLink
+                    to="/news/1"
+                    className={({ isActive }) =>
+                        isActive || isFeedActive(pathname, 'news') ? 'home-link active' : 'home-link'
+                    }
+                    onClick={scrollTop}
+                >
+                    <div className="logo-inner"></div>
+                    <img className="logo" src="/assets/images/logo.svg" alt="Logo" />
+                </NavLink>
+                <div className="header-text">
+                    <div className="left">
+                        <span className="header-nav">
+                            {feedLinks.map((link, index) => (
+                                <Fragment key={link.feedName}>
+                                    {index > 0 && ' | '}
+                                    <NavLink
+                                        to={link.path}
+                                        className={({ isActive }) =>
+                                            isActive || isFeedActive(pathname, link.feedName) ? 'active' : ''
+                                        }
+                                        onClick={scrollTop}
+                                    >
+                                        {link.label}
+                                    </NavLink>
+                                </Fragment>
+                            ))}
+                        </span>
+                    </div>
+                </div>
+                <div className="info">
+                    <img
+                        className="settings"
+                        src="/assets/images/cog.svg"
+                        alt="Settings"
+                        onClick={toggleSettings}
+                    />
+                </div>
+            </div>
+            {settings.showSettings && <Settings />}
+        </header>
+    );
+}

src/react/components/ItemDetails.tsx

@@ -0,0 +1,12 @@
+import { useParams } from 'react-router-dom';
+
+export default function ItemDetails() {
+    const { id } = useParams<'id'>();
+
+    return (
+        <main>
+            <h2>Item details</h2>
+            <p>Item {id}</p>
+        </main>
+    );
+}