Merge pull request #485 from EBISPOT/issue-468

issue-468: implement banner text on home page

frontend/build.mjs

@@ -1,48 +1,56 @@
-
+import { exec } from "child_process";
 import { build } from "esbuild";
-import fs from 'fs'
-import { exec } from 'child_process'
+import fs from "fs";
 
-let define = {}
-for (const k in process.env) { define[`process.env.${k}`] = JSON.stringify(process.env[k]) }
+let define = {};
+for (const k in process.env) {
+  define[`process.env.${k}`] = JSON.stringify(process.env[k]);
+}
 
 ///
 /// Build index.html (simple find and replace)
 ///
-console.log('### Building index.html')
-fs.writeFileSync('dist/index.html',
-	fs.readFileSync('index.html.in')
-		.toString()
-		.split('%PUBLIC_URL%/').join(process.env.PUBLIC_URL || '/')
-		.split('%PUBLIC_URL%').join(process.env.PUBLIC_URL || '/'));
+console.log("### Building index.html");
+fs.writeFileSync(
+  "dist/index.html",
+  fs
+    .readFileSync("index.html.in")
+    .toString()
+    .split("%PUBLIC_URL%/")
+    .join(process.env.PUBLIC_URL || "/")
+    .split("%PUBLIC_URL%")
+    .join(process.env.PUBLIC_URL || "/")
+);
 
 ///
 /// Build bundle.js (esbuild)
 ///
-console.log('### Building bundle.js')
+console.log("### Building bundle.js");
 build({
-	entryPoints: ["src/index.tsx"],
-	bundle: true,
-	platform: 'browser',
-	outfile: "dist/bundle.js",
-	define,
-	plugins: [
-	],
-	logLevel: 'info',
-    sourcemap: 'linked',
-
-	...(process.env.OLS_MINIFY === 'true' ? {
-		minify: true
-	} : {
-	})
+  entryPoints: ["src/index.tsx"],
+  bundle: true,
+  platform: "browser",
+  outfile: "dist/bundle.js",
+  define,
+  plugins: [],
+  logLevel: "info",
+  sourcemap: "linked",
+
+  ...(process.env.OLS_MINIFY === "true"
+    ? {
+        minify: true,
+      }
+    : {}),
 });
 
-
 ///
 /// Build styles.css (tailwind)
 ///
-console.log('### Building styles.css')
-exec('tailwind -i ./src/index.css -o ./dist/styles.css')
-
-
+console.log("### Building styles.css");
+exec("tailwind -i ./src/index.css -o ./dist/styles.css");
 
+///
+/// Copy files
+///
+console.log("### Copying misc files");
+exec("cp ./src/banner.txt ./dist"); // home page banner text

frontend/src/pages/home/Home.tsx

@@ -3,23 +3,36 @@ import { useEffect } from "react";
 import { Link } from "react-router-dom";
 import { Timeline } from "react-twitter-widgets";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
+import { Banner } from "../../components/Banner";
 import Header from "../../components/Header";
 import SearchBox from "../../components/SearchBox";
-import { getStats } from "./homeSlice";
+import { getBannerText, getStats } from "./homeSlice";
 
 export default function Home() {
   const dispatch = useAppDispatch();
   const stats = useAppSelector((state) => state.home.stats);
+  const banner = useAppSelector((state) => state.home.bannerText);
 
   useEffect(() => {
     dispatch(getStats());
   }, [dispatch]);
 
+  useEffect(() => {
+    dispatch(getBannerText());
+  }, [dispatch]);
+
+  if (banner !== "") console.log(banner);
+
   document.title = "Ontology Lookup Service (OLS)";
   return (
     <div>
       <Header section="home" />
       <main className="container mx-auto h-fit">
+        {banner !== "" && (
+          <div className="mt-4">
+            <Banner type="warning">{banner}</Banner>
+          </div>
+        )}
         <div className="grid grid-cols-4 gap-8">
           <div className="col-span-3">
             <div className="bg-gradient-to-r from-neutral-light to-white rounded-lg my-8 p-8">

frontend/src/pages/home/homeSlice.ts

@@ -2,6 +2,7 @@ import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { get } from "../../app/api";
 
 export interface HomeState {
+  bannerText: string;
   stats: Stats | undefined;
 }
 export interface Stats {
@@ -13,6 +14,7 @@ export interface Stats {
 }
 const initialState: HomeState = {
   stats: undefined,
+  bannerText: "",
 };
 
 export const getStats = createAsyncThunk(
@@ -25,6 +27,17 @@ export const getStats = createAsyncThunk(
     }
   }
 );
+export const getBannerText = createAsyncThunk(
+  "home_banner",
+  async (arg, { rejectWithValue }) => {
+    try {
+      const res = await fetch(process.env.REACT_APP_APIURL + "banner.txt");
+      return res.text();
+    } catch (error: any) {
+      return rejectWithValue(error.message);
+    }
+  }
+);
 
 const homeSlice = createSlice({
   name: "home",
@@ -40,6 +53,15 @@ const homeSlice = createSlice({
     builder.addCase(getStats.rejected, (state: HomeState) => {
       state.stats = initialState.stats;
     });
+    builder.addCase(
+      getBannerText.fulfilled,
+      (state: HomeState, action: any) => {
+        state.bannerText = action.payload;
+      }
+    );
+    builder.addCase(getBannerText.rejected, (state: HomeState) => {
+      state.bannerText = initialState.bannerText;
+    });
   },
 });