From ecc07c70e47a9b564fc0af727713ad3521f2d174 Mon Sep 17 00:00:00 2001 From: Noah Spannbauer Date: Fri, 26 Feb 2021 11:06:05 -0600 Subject: [PATCH] Adding app context --- .devcontainer/Dockerfile | 2 + .devcontainer/devcontainer.json | 10 +-- package-lock.json | 61 +++++++++++++++++ package.json | 3 + src/App.js | 25 ------- src/{ => components/app}/App.css | 0 src/components/app/App.jsx | 17 +++++ src/{ => components/app}/App.test.js | 0 src/components/calendar/Calendar.jsx | 94 ++++++++++++++++++++++++++ src/components/menu/Menu.jsx | 18 +++++ src/components/modal/Modal.jsx | 0 src/context/AppContext.jsx | 3 + src/context/AppContextProvider.jsx | 26 +++++++ src/hooks/appContext/UseAppContext.jsx | 11 +++ src/index.js | 2 +- 15 files changed, 241 insertions(+), 31 deletions(-) delete mode 100644 src/App.js rename src/{ => components/app}/App.css (100%) create mode 100644 src/components/app/App.jsx rename src/{ => components/app}/App.test.js (100%) create mode 100644 src/components/calendar/Calendar.jsx create mode 100644 src/components/menu/Menu.jsx create mode 100644 src/components/modal/Modal.jsx create mode 100644 src/context/AppContext.jsx create mode 100644 src/context/AppContextProvider.jsx create mode 100644 src/hooks/appContext/UseAppContext.jsx diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile index a21e1a8..e06063a 100644 --- a/.devcontainer/Dockerfile +++ b/.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 diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 919ea99..7875b42 100644 --- a/.devcontainer/devcontainer.json +++ b/.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": [ - "dbaeumer.vscode-eslint" - ], + // "extensions": [ + // "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", diff --git a/package-lock.json b/package-lock.json index be4ac8f..2652892 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 878cc86..b2bb94a 100644 --- a/package.json +++ b/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", diff --git a/src/App.js b/src/App.js deleted file mode 100644 index 3784575..0000000 --- a/src/App.js +++ /dev/null @@ -1,25 +0,0 @@ -import logo from './logo.svg'; -import './App.css'; - -function App() { - return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
- ); -} - -export default App; diff --git a/src/App.css b/src/components/app/App.css similarity index 100% rename from src/App.css rename to src/components/app/App.css diff --git a/src/components/app/App.jsx b/src/components/app/App.jsx new file mode 100644 index 0000000..1fffc39 --- /dev/null +++ b/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 ( +
+ + + + +
+ ); +} + +export default App; diff --git a/src/App.test.js b/src/components/app/App.test.js similarity index 100% rename from src/App.test.js rename to src/components/app/App.test.js diff --git a/src/components/calendar/Calendar.jsx b/src/components/calendar/Calendar.jsx new file mode 100644 index 0000000..868be4d --- /dev/null +++ b/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 ( +
+ {state.isLoading && +
+ Loading... +
+ } + +
+ ) +} + +export default Calendar \ No newline at end of file diff --git a/src/components/menu/Menu.jsx b/src/components/menu/Menu.jsx new file mode 100644 index 0000000..bbac592 --- /dev/null +++ b/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 ( +
+ Menu +
+ ) +} + +export default Menu \ No newline at end of file diff --git a/src/components/modal/Modal.jsx b/src/components/modal/Modal.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/context/AppContext.jsx b/src/context/AppContext.jsx new file mode 100644 index 0000000..ee7d17d --- /dev/null +++ b/src/context/AppContext.jsx @@ -0,0 +1,3 @@ +import { createContext } from 'react' + +export const AppContext = createContext(undefined) \ No newline at end of file diff --git a/src/context/AppContextProvider.jsx b/src/context/AppContextProvider.jsx new file mode 100644 index 0000000..da27890 --- /dev/null +++ b/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 ( + + {props.children} + + ) +} + +export default AppContextProvider \ No newline at end of file diff --git a/src/hooks/appContext/UseAppContext.jsx b/src/hooks/appContext/UseAppContext.jsx new file mode 100644 index 0000000..cc26f57 --- /dev/null +++ b/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 + } +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index ef2edf8..a5f93c2 100644 --- a/src/index.js +++ b/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(