Feature/logo image

README.md

@@ -1,96 +1,137 @@
-# Open LXP: Experience Discovery Service UI
+# OpenLXP: Experience Discovery Service UI (XDS UI)
 
-This is the UI for the Open LXP: Experience Discovery Service. It allows you to create and manage your own experience collection, subscribe to other people's experience collections, and search for experiences indexed in the service.
+This is the UI for the OpenLXP: Experience Discovery Service. It allows you to create and manage your own experience collection, subscribe to other people's experience collections, and search for experiences indexed in the service.
 
-_Note_: For this service to work properly you will need the XDS Backend component to accompany it.
+**Note: For this service to work properly you will need the XDS Backend component to accompany it.**
 
-## Table of Contents
+## Prerequisites
+### Install Docker & docker-compose
+#### Windows & MacOS
+- Download and install [Docker Desktop](https://www.docker.com/products/docker-desktop) (docker compose included)
 
-- [**Installation**](#installation)
-- [**Development**](#development)
-  - [**Frontend Stack Documentation**](#frontend-stack-documentation)
-  - [**Devtools Documentation**](#dev-tools-documentation)
-- [**Testing**](#testing)
 
-## Installation
+#### Linux
+You can download Docker Compose binaries from the
+[release page](https://github.com/docker/compose/releases) on this repository.
 
-### Step 1: Clone the project
+Rename the relevant binary for your OS to `docker-compose` and copy it to `$HOME/.docker/cli-plugins`
 
+Or copy it into one of these folders to install it system-wide:
+
+* `/usr/local/lib/docker/cli-plugins` OR `/usr/local/libexec/docker/cli-plugins`
+* `/usr/lib/docker/cli-plugins` OR `/usr/libexec/docker/cli-plugins`
+
+(might require making the downloaded file executable with `chmod +x`)
+
+## 1. Clone the repository
+Clone the Github repository
 ```terminal
-git clone git clone git@github.com:OpenLXP/openlxp-xds-ui.git
-```
+git clone https://github.com/OpenLXP/openlxp-xds-ui.git
+```  
 
-### Step 2: Install yarn
+## 2. Set up your environment variables
+- Create a `.env` file in the root directory
+- The following environment variables are required:
 
-This project uses yarn as the package manager. If you already have yarn installed or are using a different package manager feel free to skip this step.
+| Environment Variable            | Description                       |
+| ------------------------------- | --------------------------------- |
+| NEXT_PUBLIC_BACKEND_HOST        | The endpoint for your XDS backend |
+| NEXT_PUBLIC_XAPI_LRS_ENDPOINT   | The endpoint for your SQL-LRS     |
+| NEXT_PUBLIC_XAPI_LRS_KEY        | The SQL-LRS key                   |
+| NEXT_PUBLIC_XAPI_LRS_SECRET     | The SQL-LRS secret                |
 
-> Start by installing yarn globally
+**Note: These environment variables need to be set up at build time**
 
-```terminal
-npm install -g yarn
-```
+## 3. Deployment
+1. Create the OpenLXP docker network. Open a terminal and run the following command in the root directory of the project.
 
-> Verify yarn was installed
+    ```terminal
+    docker network create openlxp
+    ```
 
-```terminal
-yarn -version
-```
+2. Run the command below to build your image for XDS UI
 
-### Step 3: Install project dependencies
+    ```terminal
+    docker build -t xdsui .
+    ```
+
+3. Run the command below to deploy the image built in step 2
 
-> Installs all requirements for development
+    ```terminal
+    docker run -p 3000:3000 xdsui -d
+    ```
 
-```terminal
-yarn
-```
+## Local development/testing
+### 1. Install yarn
 
-### Step 4: Update .env file
+This project uses yarn as the package manager. If you already have yarn installed or are using a different package manager feel free to skip this step.
 
-The `.env` file can be found in the root directory of the project folder
+ - Start by installing yarn globally
 
-> Example `.env` file
+    ```terminal
+    npm install -g yarn
+    ```
+
+ - Verify yarn was installed
 
-```js
-// api gateway
-NEXT_PUBLIC_BACKEND_HOST=
-NEXT_PUBLIC_XAPI_LRS_ENDPOINT=
-NEXT_PUBLIC_XAPI_LRS_KEY=
-NEXT_PUBLIC_XAPI_LRS_SECRET=
-```
+    ```terminal
+    yarn -version
+    ```
 
-**NEXT_PUBLIC_BACKEND_HOST**: The url for the XDS component
+### 2: Install project dependencies
 
-> Note: the lrs component is not required for the UI to function.
+   - Installs all requirements for development
+
+      ```terminal
+      yarn install
+      ```
 
-**NEXT_PUBLIC_XAPI_LRS_ENDPOINT**: The url for the LRS component
+### 3. Build the project
 
-**NEXT_PUBLIC_XAPI_LRS_KEY**: The key for the LRS component
+  - bundle your app into static files
 
-**NEXT_PUBLIC_XAPI_LRS_SECRET**: The secret for the LRS component
+      ```terminal
+      yarn build
+      ``` 
 
-### Step 5: Run the project
+### 4. Run your project
+
+  - Run the project in development mode
 
-> Run the project in development mode
+    ```terminal
+    yarn start
+    ```
 
-```terminal
-yarn dev
-```
+## Testing
+
+All of the components in the project are unit tested and are covered by the [Jest](https://jestjs.io/) testing framework. When testing components there are three key files to utilize:
 
-### Step 6: Run the project in production mode
+1. `jest.setup.js`: This file is used to configure the testing environment including any mocks and setup functions for the code to work.
+2. `mockSetUp.js`: This file is used to mock any functions that are reliant on external APIs or services.
+3. `.test.js`: This file is used to test the components. Any file in the **tests** directory will be run by the testing framework as long as the child components are appended with `.test.js` or `.spec.js`.
 
-> Build the docker image
+### Our current threshold for testing coverage is:
 
-```terminal
-docker build -t openlxp-xds-ui .
-```
+- **Statement Coverage**: 80%
+- **Branch Coverage**: 80%
+- **Function Coverage**: 80%
+- **Line Coverage**: 80%
 
-> Run the docker image
+### Command to run tests
 
-```terminal
-docker run -p 3000:3000 openlxp-xds-ui
-```
+ - Runs all the tests in the project with cached results
+
+    ```terminal
+    yarn test
+    ```
+
+- Run all the tests in the project without cached results. This produces a coverage report which can be viewed in the terminal or in the browser by opening the `/coverage/Icov-report/index.html` file in the project directory.
 
-## Development
+    ```terminal
+    yarn coverage
+    ```
+
+## Documentation
 
 ### Frontend Stack Documentation
 
@@ -111,32 +152,3 @@ docker run -p 3000:3000 openlxp-xds-ui
 [Prettier Documentation can be found here](https://prettier.io/docs/en/install.html)
 
 [Jest Documentation can be found here](https://jestjs.io/docs/en/getting-started)
-
-## Testing
-
-All of the components in the project are unit tested and are covered by the [Jest](https://jestjs.io/) testing framework. When testing components there are three key files to utilize:
-
-1. **jest.setup.js**: This file is used to configure the testing environment including any mocks and setup functions for the code to work.
-2. **mockSetUp.js**: This file is used to mock any functions that are reliant on external APIs or services.
-3. **.test.js**: This file is used to test the components. Any file in the **tests** directory will be run by the testing framework as long as the child components are appended with `.test.js` or `.spec.js`.
-
-### Our current threshold for testing coverage is:
-
-- **Statement Coverage**: 80%
-- **Branch Coverage**: 80%
-- **Function Coverage**: 80%
-- **Line Coverage**: 80%
-
-### Command to run tests
-
-> Runs all the tests in the project with cached results
-
-```terminal
-yarn test
-```
-
-> Runs all the tests in the project without cached results produces a coverage report which can be viewed in the terminal or in the browser by opening the `/coverage/Icov-report/index.html` file in the project directory.
-
-```terminal
-yarn coverage
-```

src/components/Header.js

@@ -5,6 +5,9 @@ import Link from 'next/link';
 import UserMenu from '@/components/menus/UserMenu';
 import logo from '@/public/logo.png';
 import Notifications from './menus/Notifications';
+import { useConfig } from '@/hooks/useConfig';
+import { backendHost } from '@/config/endpoints';
+import { useMemo } from 'react';
 
 const menuItems = [
   {
@@ -45,6 +48,16 @@ function Button({ data }) {
 
 export default function Header() {
   const { user } = useAuth();
+  const config = useConfig();
+
+  const thumbnail = useMemo(() => { 
+    return (
+      (config?.data?.ui_logo &&
+        `${backendHost}${config?.data?.ui_logo}`) ||
+      null
+    );
+  }, [config]);
+
   return (
     <header className={'bg-white w-full shadow z-50'}>
       <nav
@@ -60,7 +73,11 @@ export default function Header() {
                 id={'homepage-button'}
                 className={'cursor-pointer'}
               >
-                <Image src={logo} alt={'home'} height={'60'} width={'60'} />
+              {config.isSuccess && thumbnail ? <img
+                src={thumbnail}
+                alt=''
+                className='h-12 w-12 m-2'
+              /> : <Image src={logo} height={60} width={60} alt='' />}
               </button>
             </Link>
             {menuItems.map((item) => {

src/pages/index.js

@@ -6,15 +6,18 @@ import Footer from '@/components/Footer';
 import Head from 'next/head'
 import Header from '@/components/Header';
 import Image from 'next/image';
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import SearchBar from '@/components/inputs/SearchBar';
 import logo from '@/public/logo.png';
 import useField from '@/hooks/useField';
 import useSpotlightCourses from '@/hooks/useSpotlightCourses';
+import { useConfig } from '@/hooks/useConfig';
+import { backendHost } from '@/config/endpoints';
 
 export default function Home() {
   const router = useRouter();
   const { user } = useAuth();
+  const config = useConfig();
 
   const spotlight = useSpotlightCourses();
   const { fields, updateKeyValuePair, resetKey } = useField({
@@ -50,6 +53,14 @@ export default function Home() {
     updateKeyValuePair(event.target.name, event.target.value);
   };
 
+  const thumbnail = useMemo(() => { 
+    return (
+      (config?.data?.ui_logo &&
+        `${backendHost}${config?.data?.ui_logo}`) ||
+      null
+    );
+  }, [config]);
+
   return (
     <>
       <Head>
@@ -58,7 +69,11 @@ export default function Home() {
       </Head>
       <Header />
       <div className='max-w-7xl mx-auto flex flex-col items-center justify-center mt-10'>
-        <Image src={logo} height={150} width={150} alt='' />
+        {config.isSuccess && thumbnail ? <img
+            src={thumbnail}
+            alt=''
+            className='h-32 w-32 m-2'
+          /> : <Image src={logo} height={150} width={150} alt='' />}
         <h1 className='text-3xl font-bold mt-4'>Enterprise Course Catalog</h1>
         <h2 className='text-xl font-sans mt-2'>Department of Defense</h2>
       </div>