KQED · pamelagilmour · Jun 20, 2023 · Aug 1, 2023 · Aug 1, 2023 · Aug 2, 2023
diff --git a/README.md b/README.md
@@ -8,11 +8,31 @@ webpack 5.73.0
 Building and running
 See package.json for the details of the commands below.
 
-To run without SSR:
+## This project contains a call to the Giphy Gif Api and requires an api key.
 
-+ To build entire project, express to deliver react: `$ yarn build`
+You can get your own Giphy api key at : [https://developers.giphy.com/docs/api#quick-start-guide](https://developers.giphy.com/docs/api#quick-start-guide)
+
+
+## To run the API that serves Sailor Moon universe data
+
++ In the CLI,  `$ yarn sailorserver`
++ The endpoint can be found at [http://localhost:3001/](http://localhost:3001/)
+
+## To run client side rendering (csr):
+
++ To build the project in csr mode: `$ yarn build:csr`
+
++ To build the project in csr mode for development: `$ yarn watch:csr`
+
++ To deliver the project in csr mode: `$ yarn start:csr`
+
+
+## To run server side rendering (ssr):
+
++ To build the project in ssr mode: `$ yarn build:csr`
+
++ To deliver the project in ssr mode: `$ yarn start:csr`
 
-+ To start entire project, express server delivers react frontend: `$ yarn start`
 
 ## Redis and redis-cli
 ### KSM-3867 Deliverables

diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
   "private": true,
   "license": "unlicensed",
   "scripts": {
+    "sailorserver": "node api/api-server.js",
     "build:csr": "webpack --mode=development --config webpack/webpack.client.config.js",
     "watch:csr": "webpack --mode=development --watch --config webpack/webpack.client.config.js",
     "start:csr": "node servers/server.csr.js",

diff --git a/react-app/src/icons8-ufo-emoji-32.png → react-app/icons8-ufo-emoji-32.png b/react-app/src/icons8-ufo-emoji-32.png → react-app/icons8-ufo-emoji-32.png
diff --git a/react-app/index.html b/react-app/index.html
@@ -5,7 +5,6 @@
     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <title>My React App</title>
-    <link rel='icon' type='image/png' href='./src/icons8-ufo-emoji-32.png' />
 </head>
 <body>
     <div id='root'></div>

diff --git a/react-app/src/components/Header/Header.jsx b/react-app/src/components/Header/Header.jsx
@@ -5,7 +5,7 @@ import styles from './Header.scss'
 export default function Header () {
   return (
     <div className={styles.rootHeader}>
-      <h1 className={styles}>KQED Initial Training Project - Pamela Gilmour</h1>
+      <h1>KQED Initial Training Project - Pamela Gilmour</h1>
       <nav>
         <ul>
           <li>

diff --git a/react-app/src/components/HexPicker/HexPicker.jsx b/react-app/src/components/HexPicker/HexPicker.jsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import {
   randomize,
@@ -12,17 +12,30 @@ export default function HexPicker () {
 
   const dispatch = useDispatch()
 
-  const applyColor = () => {
-    document.body.style.background = generatedValue
+  const applyColor = (color) => {
+    document.body.classList.remove('oppositeFontColor')
+    document.body.style.background = color
   }
-  const applyFontColor = () => {
-    document.body.style.color = fontValue
+  const applyFontColor = (color) => {
+    document.body.classList.add('oppositeFontColor')
+    document.body.style.color = color
   }
 
   // console.log('generatedValue:', generatedValue)
   // console.log('fontValue:', fontValue)
-  applyColor()
-  applyFontColor()
+
+  useEffect(() => {
+    dispatch(oppositeColor())
+    applyColor(generatedValue)
+    applyFontColor(fontValue)
+  }, [dispatch, generatedValue, fontValue])
+
+  const handleButtonClick = () => {
+    dispatch(randomize())
+    dispatch(oppositeColor())
+    // applyColor(generatedValue)
+    // applyFontColor(fontValue)
+  }
 
   return (
     <div className={style}>
@@ -31,11 +44,7 @@ export default function HexPicker () {
         <p>{generatedValue}</p>
         <button
           aria-label='Generate random RGB value'
-          onClick={() => {
-            dispatch(randomize())
-            dispatch(oppositeColor())
-          }
-          }
+          onClick={handleButtonClick}
         >
           Click to Generate a Random RBG Value
         </button>

diff --git a/react-app/src/components/HexPicker/HexPicker.scss b/react-app/src/components/HexPicker/HexPicker.scss
@@ -4,4 +4,8 @@ button {
 
 p {
   padding: 15px;
+}
+
+.oppositeFontColor {
+  color: #fff;
 }
diff --git a/react-app/src/index.js b/react-app/src/index.js
@@ -5,10 +5,19 @@ import { store } from './slices/store'
 import App from './App'
 
 const rootElement = document.getElementById('root')
-const root = createRoot(rootElement)
 
-root.render(
-  <Provider store={store}>
-    <App />
-  </Provider>
-)
+if(typeof window !== 'undefined' && rootElement) {
+  const root = createRoot(rootElement)
+
+  root.render(
+    <Provider store={store}>
+      <App />
+    </Provider>
+  )
+} else {
+  const SSRPlaceholder = () => (
+    <div> Server Side Rendering Placeholder</div>
+  )
+
+  createRoot(<SSRPlaceholder />).render()
+}
diff --git a/webpack/webpack.client.config.js b/webpack/webpack.client.config.js
@@ -96,7 +96,7 @@ module.exports={
     new HtmlWebpackPlugin({
       template: './react-app/index.html',
       publicPath: '/',
-      favicon: './react-app/src/icons8-ufo-emoji-32.png'
+      favicon: './react-app/icons8-ufo-emoji-32.png'
     }),
     new ESLintPlugin({
       extensions:['js', 'jsx', 'json']