Adding app context

.devcontainer/Dockerfile

@@ -4,6 +4,8 @@
 ARG VARIANT="14-buster"
 FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}
 
+ENV NODE_OPTIONS=--max_old_space_size=8192
+
 # [Optional] Uncomment this section to install additional OS packages.
 # RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
 #     && apt-get -y install --no-install-recommends <your-package-list-here>

.devcontainer/devcontainer.json

@@ -5,7 +5,7 @@
 	"build": {
 		"dockerfile": "Dockerfile",
 		// Update 'VARIANT' to pick a Node version: 10, 12, 14
-		"args": { "VARIANT": "14" }
+		"args": { "VARIANT": "12" }
 	},
 
 	// Set *default* container specific settings.json values on container create.
@@ -14,12 +14,12 @@
 	},
 
 	// Add the IDs of extensions you want installed when the container is created.
-	"extensions": [
+	// "extensions": [
-		"dbaeumer.vscode-eslint"
+	// 	"dbaeumer.vscode-eslint"
-	],
+	// ],
 
 	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	// "forwardPorts": [],
+	"forwardPorts": [3000],
 
 	// Use 'postCreateCommand' to run commands after the container is created.
 	// "postCreateCommand": "yarn install",

package-lock.json

@@ -1182,6 +1182,54 @@
         }
       }
     },
+    "@fullcalendar/common": {
+      "version": "5.5.1",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/common/-/common-5.5.1.tgz",
+      "integrity": "sha512-tfVlX4aBHxCDJAVkUm93FXScOhmdz6/vUy/ISfpNeRNYuUvhJbmjoH67DpGNdS3we2n6/dVte021TE4Bbo4uRA==",
+      "requires": {
+        "ical.js": "^1.4.0",
+        "tslib": "^2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+          "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
+        }
+      }
+    },
+    "@fullcalendar/daygrid": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-5.5.0.tgz",
+      "integrity": "sha512-O/59C3ihElLsPnkjlD1xUgAf3v7WEARXVO+wZfASKtK14Ccux2MA9mWUA1+80m9q8on7SYL36ORhrea7GKy/qQ==",
+      "requires": {
+        "@fullcalendar/common": "~5.5.0",
+        "tslib": "^2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+          "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
+        }
+      }
+    },
+    "@fullcalendar/react": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/react/-/react-5.5.0.tgz",
+      "integrity": "sha512-ss109y/kYIb9mwmE9dZc5c2o5I4CoqREDqLNAur83CGC5NvCH8gRzZXEilZz1E6ORuziBEYkPPtREn7Mp+6lYg==",
+      "requires": {
+        "@fullcalendar/common": "~5.5.0",
+        "tslib": "^2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+          "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A=="
+        }
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -3009,6 +3057,14 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.1.2.tgz",
       "integrity": "sha512-V+Nq70NxKhYt89ArVcaNL9FDryB3vQOd+BFXZIfO3RP6rwtj+2yqqqdHEkacutglPaZLkJeuXKCjCJDMGPtPqg=="
     },
+    "axios": {
+      "version": "0.21.1",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
+      "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "axobject-query": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
@@ -7389,6 +7445,11 @@
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
       "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw=="
     },
+    "ical.js": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/ical.js/-/ical.js-1.4.0.tgz",
+      "integrity": "sha512-ltHZuOFNNjcyEYbzDgjemS7LWIFh2vydJeznxQHUh3dnarbxqOYsWONYteBVAq1MEOHnwXFGN2eskZReHclnrA=="
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",

package.json

@@ -3,9 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fullcalendar/daygrid": "^5.5.0",
+    "@fullcalendar/react": "^5.5.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.7.3",
+    "axios": "^0.21.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.3",

src/App.js

@@ -1,25 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;

src/components/app/App.jsx

@@ -0,0 +1,17 @@
+import './App.css';
+import AppContextProvider from '../../context/AppContextProvider'
+import Menu from '../menu/Menu'
+import Calendar from '../calendar/Calendar'
+
+const App = () => {
+  return (
+    <div className="App">
+      <AppContextProvider>
+        <Menu />
+        <Calendar />
+      </AppContextProvider>
+    </div>
+  );
+}
+
+export default App;

src/components/calendar/Calendar.jsx

@@ -0,0 +1,94 @@
+import { useEffect, useState } from 'react';
+import axios, { AxiosRespones } from 'axios';
+import FullCalendar from '@fullcalendar/react';
+import dayGridPlugin from '@fullcalendar/daygrid';
+
+const initialState = {
+    dates: undefined,
+    events: [],
+    isLoading: true
+}
+
+const Calendar = () => {
+    const [state, setState] = useState(initialState);
+
+    const datesSet = (dates) => {
+        setState((prevState) => {
+            return {
+                ...prevState,
+                dates: dates
+            }
+        })
+    }
+
+    const isLoading = (isLoading) => {
+        console.log(isLoading);
+        setState((prevState) => {
+            return {
+                ...prevState,
+                isLoading: isLoading
+            }
+        });
+    }
+    
+    useEffect(() => {
+        const getEvents = async () => {
+            const startDate = `${state.dates.start.getFullYear()}-${state.dates.start.getMonth() + 1 < 10 ? '0' + (state.dates.start.getMonth() + 1) : state.dates.start.getMonth() + 1}-${state.dates.start.getDate() < 10 ? '0' + state.dates.start.getDate() : state.dates.start.getDate()}`
+            const endDate = `${state.dates.end.getFullYear()}-${state.dates.end.getMonth() + 1 < 10 ? '0' + (state.dates.end.getMonth() + 1) : state.dates.end.getMonth() + 1}-${state.dates.end.getDate() < 10 ? '0' + state.dates.end.getDate() : state.dates.end.getDate()}`
+            const response = await axios({
+                method: 'GET',
+                url: `https://statsapi.mlb.com/api/v1/schedule`,
+                params: {
+                    sportId: 1,
+                    startDate: startDate,
+                    endDate: endDate
+                }
+            })
+            const games = [];
+            let events
+            
+            for (let date of response.data.dates) {
+                for (let game of date.games) {
+                    games.push(game);
+                }
+            }
+
+            events = games.map((game) => {
+                return {
+                    title: game.teams.home.team.name,
+                    start: game.gameDate
+                }
+            })
+
+            setState((prevState) => {
+                return {
+                    ...prevState,
+                    events: events,
+                }
+            })
+        }
+
+        if (state.dates !== undefined) {
+            getEvents();
+        }
+    }, [state.dates]);
+
+    return (
+        <div>
+            {state.isLoading &&
+                <div>
+                    Loading...
+                </div>
+            }
+            <FullCalendar
+                plugins={[dayGridPlugin]}
+                initialView='dayGridMonth'
+                datesSet={datesSet}
+                events={state.events}
+                loading={isLoading}
+            />
+        </div>
+    )
+}
+
+export default Calendar

src/components/menu/Menu.jsx

@@ -0,0 +1,18 @@
+import { useEffect } from 'react'
+import { useAppContext } from '../../hooks/appContext/UseAppContext'
+
+const Menu = () => {
+    const { appContext, setAppContext } = useAppContext()
+
+    useEffect(() => {
+        console.log(appContext.isMenuOpen)
+    }, [])
+
+    return (
+        <div>
+            Menu
+        </div>
+    )
+}
+
+export default Menu

src/context/AppContext.jsx

@@ -0,0 +1,3 @@
+import { createContext } from 'react'
+
+export const AppContext = createContext(undefined)

src/context/AppContextProvider.jsx

@@ -0,0 +1,26 @@
+import { useState, useMemo } from 'react';
+import AppContext from './AppContext'
+
+const initialState = {
+    isMenuOpen: false,
+    isModalOpen: false
+}
+
+const AppContextProvider = (props) => {
+    const [appContext, setAppContext] = useState(initialState)
+
+    const contextValue = useMemo(() => {
+        return {
+            appContext,
+            setAppContext
+        }
+    }, [appContext, setAppContext])
+
+    return (
+        <AppContext.Provider value={contextValue}>
+            {props.children}
+        </AppContext.Provider>
+    )
+}
+
+export default AppContextProvider

src/hooks/appContext/UseAppContext.jsx

@@ -0,0 +1,11 @@
+import { useContext } from 'react'
+import AppContext from '../../context/AppContext'
+
+export const useAppContext = () => {
+    const { appContext, setAppContext } = useContext(AppContext)
+
+    return {
+        appContext,
+        setAppContext
+    }
+}

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import App from './components/app/App';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(