feat: FRON-33 shared secret, bearer token (#33)

* feat: FRON-33 shared secret used in fetch calls

.env.example

@@ -1,4 +1,5 @@
 # DEVELOPMENT TOOLS
 # Ideally, don't add them to production deployment envs
 # Change to true if we want to log data
-NEXT_PUBLIC_SHOW_LOGGER="false"
+# NEXT_PUBLIC_SHOW_LOGGER="false"
+NEXT_PUBLIC_BEARER_TOKEN="my-secret-token"

README.md

@@ -11,6 +11,7 @@ Table of Contents:
 - [Getting Started](#getting-started)
   - [Install dependencies](#install-dependencies)
   - [Run the development server](#run-the-development-server)
+  - [Connecting to the server](#connecting-to-the-server)
   - [Commit Message Convention](#commit-message-convention)
   - [Contribution Guidelines](#contribution-guidelines)
 - [Tests](#tests)
@@ -44,9 +45,14 @@ You can start the server using this command:
 pnpm dev
 ```
 
-csd
 Open [http://localhost:3000](http://localhost:3000) with your browser.
 
+### Connecting to the server
+
+Currently the standard is to run the backend locally. Follow instructions [here](https://github.com/Slick-Telemetry/backend/blob/dev/README.md) for setup.
+
+To make calls to API you need to duplicate the `.env.example` file to define a client-side bearer token
+
 ### Commit Message Convention
 
 This project is using [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/), it is mandatory to use it to commit changes.

src/app/page.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 import { BsPlusCircle } from 'react-icons/bs';
 
-import { NextEvent } from '../components/SelectionData/NextEvent';
+import { NextEvent } from '@/components/SelectionData';
 
 export default function Home() {
   return (

src/components/Footer/index.tsx

@@ -1,5 +1,16 @@
-const Footer = () => {
-  return <div className='container min-h-24'>Footer</div>;
-};
+import { fetchAPI } from '@/lib/helpers';
+
+async function Footer() {
+  const serverStatus = await fetchAPI('health', true);
+
+  return (
+    <div className='container min-h-24'>
+      <p>Footer</p>
+      <p>
+        <b>Server Status:</b> {serverStatus.status || 'Offline'}
+      </p>
+    </div>
+  );
+}
 
 export { Footer };

src/components/SelectionData/NextEvent.tsx

@@ -5,8 +5,10 @@ import { useAtom } from 'jotai';
 import { formatDuration } from '@/lib/helpers';
 import { formatSessionUrl } from '@/lib/transformers';
 
+import { fetchNextEvent } from '@/atoms/fetchCalls';
 import {
   nextEventAtom,
+  nextEventEffect,
   nextEventLiveAtom,
   nextEventTimeAtom,
 } from '@/atoms/nextEvent';
@@ -15,6 +17,8 @@ export const NextEvent = () => {
   const [nextEvent] = useAtom(nextEventAtom);
   const [liveEvent] = useAtom(nextEventLiveAtom);
   const [nextEventCountdown] = useAtom(nextEventTimeAtom);
+  useAtom(fetchNextEvent);
+  useAtom(nextEventEffect);
 
   return (
     <div className='bg-base-300 flex px-4 py-8'>

src/components/TopNav/UserNav.tsx

@@ -9,7 +9,7 @@ const UserNav = () => {
     >
       <path d='M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0' />
       <path
-        fill-rule='evenodd'
+        fillRule='evenodd'
         d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1'
       />
     </svg>

src/lib/helpers.tsx

@@ -117,9 +117,14 @@ export const fetchAPI = async (
   endpoint: string,
   statusCheck: boolean = false,
 ) => {
-  const useServer = statusCheck || document.body.classList.contains('server');
+  // const useServer = statusCheck || document.body.classList.contains('server');
   // Headers for statusCheck so
-  const options = statusCheck ? { headers: { cache: 'no-store' } } : {};
+  const options = {
+    headers: {
+      Authorization: `Bearer ${process.env.NEXT_PUBLIC_BEARER_TOKEN}`,
+      cache: statusCheck ? 'no-store' : 'force-cache',
+    },
+  };
 
   // Get dummy data or return false
   const dummy: string[] | DataConfigSchema['schedule'] | false =
@@ -128,12 +133,11 @@ export const fetchAPI = async (
     ] || false;
 
   // If we are not using the server return the dummy data
-  if (!useServer) {
-    return dummy;
-  }
+  // if (!useServer) {
+  //   return dummy;
+  // }
 
   // Fetch from server
-  // console.log(`making fetch to: ${serverUrl}/${endpoint}`);
   const data = await fetch(`${serverUrl}/${endpoint}`, { ...options })
     .then(
       (res) => {