Fix(nightlife example app): Create an example of the nightlife take home project

.eslintrc.json

@@ -17,7 +17,7 @@
   "overrides": [
     {
       "files": ["apps/secure-real-time-multiplayer-game/tests/1_unit-tests.js",
-      "apps/build-a-pinterest-clone/client/*", "**/rollup.config.js", "apps/p2p-video-chat-application/src/client.js"],
+      "apps/build-a-pinterest-clone/client/*", "**/rollup.config.js", "apps/p2p-video-chat-application/src/client.js", "apps/nightlife-coordination-app/client/*"],
       "parserOptions": {
         "sourceType": "module"
       }

apps/nightlife-coordination-app/client/.babelrc.json

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    ["@babel/preset-env", { "targets": "> 0.25%, not dead" }],
+    "@babel/preset-react"
+  ]
+}

apps/nightlife-coordination-app/client/App.jsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from 'react';
+import EventCard from './EventCard.jsx';
+import PropTypes from 'prop-types';
+
+const API_URL = window.location.origin;
+
+function App({user, isGoingToEvent, searchValue, setSearchValue}){
+
+    const [events, setEvents] = useState([])
+
+    function getCityEvents(searchQuery=searchValue) {
+        if(searchQuery === "") {
+            alert("Search must be populated with city name")
+        } else {
+            const params = new URLSearchParams({location: searchQuery.toLowerCase().trim()})
+            fetch(`${API_URL}/api/events?` + params)
+            .then((res) => res.json())
+            .then((data) => setEvents(data))
+            .catch((err) => console.error(`Failed to get events from api: ${err}`))
+        }
+    }
+
+    useEffect(() => {
+        const searchParams = window.location.search;
+        const params = new URLSearchParams(searchParams);
+
+        if(params.size > 0 && params.get("search")) {
+            setSearchValue(params.get("search"))
+            getCityEvents(params.get("search"))
+        }
+    },[])
+
+    return (
+        <div className="splashContainer">
+            <div className="splash">
+                <h1 className="splashText">Nightlife</h1>
+                <hr className="nightLifeDivider" />
+                <span>Find your cities hot spots for a good time</span>
+            </div>
+
+            <div className="searchContainer">
+                <input className="searchBar" type="text" value={searchValue} onChange={(e) => setSearchValue(e.target.value)}/>
+                <button className="searchButton" onClick={() => getCityEvents()}>Search</button>
+            </div>
+
+            <div className="eventContainer">
+
+                {
+                    events.map((event, idx) => {
+                        return <EventCard key={idx}
+                            event_id={event._id}
+                            img_url={event.image_url}
+                            name={event.name}
+                            description={event.description}
+                            attending={event.attending_count}
+                            isRemoveable={isGoingToEvent(event._id)}
+                            user={user}
+                        />
+                    })
+                }
+            </div>
+        </div>
+    );
+}
+
+App.propTypes = {
+    user: PropTypes.any.isRequired,
+    isGoingToEvent: PropTypes.func.isRequired,
+    searchValue: PropTypes.string.isRequired,
+    setSearchValue: PropTypes.func.isRequired,
+  };
+
+export default App;

apps/nightlife-coordination-app/client/EventCard.jsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const API_URL = window.location.origin;
+
+function EventCard({event_id, img_url, name, description, attending, isRemoveable, user}) {
+
+    function addEventToUser() {
+        fetch(`${API_URL}/api/add/event`, {
+            method: "POST",
+            credentials: "include",
+            body: JSON.stringify({
+                eventId: event_id
+            }),
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        }).then((res) => {
+            if(res.ok) {
+                alert("This event has been added")
+                window.location.href = "/"
+            }
+        })
+        .catch((err) => console.error(err))
+    }
+
+    function removeUserFromEvent() {
+        fetch(`${API_URL}/api/remove/event`, {
+            method: "DELETE",
+            credentials: "include",
+            body: JSON.stringify({
+                eventId: event_id
+            }),
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        }).then((res) => {
+            if(res.ok) {
+                alert("This event has been removed")
+                window.location.href = "/"
+            }
+        })
+        .catch((err) => console.error(err))
+    }
+
+    return (
+        <div className="eventCard">
+
+            <img src={img_url} alt="No even image found" className="eventImage" />
+
+            <div className="eventContent">
+                <h2 >{name}</h2>
+                <hr className="nightLifeDivider" />
+                <p>{description}</p>
+                <span>People going: {attending}</span>
+            </div>
+
+            {
+                user &&
+                <>
+                {
+                    isRemoveable ?
+                        <div className="eventCardButtonContainer">
+                            <span>You&#39;re not going here</span>
+                            <button className="eventCardButton" onClick={() => addEventToUser()}>Add event</button>
+                        </div>
+                    :
+                        <div className="eventCardButtonContainer">
+                            <span>You&#39;re going</span>
+                            <button className="eventCardButton" onClick={() => removeUserFromEvent()}>Remove event</button>
+                        </div>
+                }
+                </>
+            }
+
+        </div>
+    )
+}
+
+EventCard.propTypes = {
+    event_id: PropTypes.string.isRequired,
+    img_url: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    attending: PropTypes.string.isRequired,
+    isRemoveable: PropTypes.func.isRequired,
+    user: PropTypes.any.isRequired,
+  };
+
+export default EventCard

apps/nightlife-coordination-app/client/Index.jsx

@@ -0,0 +1,68 @@
+import React, {useEffect, useState} from 'react';
+import ReactDOM from 'react-dom';
+import App from './App.jsx';
+import Navbar from './Navbar.jsx';
+import UserDashboard from './UserDashboard.jsx';
+
+const API_URL = window.location.origin;
+
+function Index() {
+    const [currentPage, setCurrentPage] = useState("home")
+    const [user, setUser] = useState(null)
+    const [searchQuery, setSearchQuery] = useState("")
+
+    function eventInUser(eventId) {
+        if(user) {
+            return !user.events.find(event => event._id === eventId)
+        }
+
+        return false
+    }
+
+    useEffect(() => {
+        fetch(`${API_URL}/auth/user`)
+        .then((res) => { 
+            if(!res.ok) {
+                throw new Error(res.status);  
+            } 
+            else {
+                return res.json()  
+            } 
+        })
+        .then((user) => {
+            setUser(user)
+        })
+        .catch((err) => console.error(err))
+
+    }, [])
+
+    return(
+        <>
+            <Navbar 
+                user={user}
+                setCurrentPage={setCurrentPage}
+                currentPage={currentPage}
+                searchQuery={searchQuery}
+                setSearchQuery={setSearchQuery}
+            />
+            <>
+            {
+                (currentPage === "userDash" && user) ? 
+                    <UserDashboard
+                        user={user}
+                        isGoingToEvent={eventInUser}
+                    />
+                :
+                    <App
+                        user={user}
+                        isGoingToEvent={eventInUser}
+                        searchValue={searchQuery}
+                        setSearchValue={setSearchQuery}
+                    />
+            }
+            </> 
+        </>
+    )
+}
+
+ReactDOM.render(<Index />, document.querySelector('#root'));

apps/nightlife-coordination-app/client/Navbar.jsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+
+const API_URL = window.location.origin;
+
+function Navbar({ user, setCurrentPage, currentPage, searchQuery, setSearchQuery }) {
+
+    function handleLogin() {
+        if(searchQuery) {
+            const params = new URLSearchParams({search: searchQuery})
+            window.open(`${API_URL}/auth/github?` + params, "_self")
+        } else {
+            window.open(`${API_URL}/auth/github`, "_self")
+        }
+    }
+
+    function handleLogout() {
+        fetch(`${API_URL}/auth/logout`)
+        .then((res) => {
+            if(res.ok) {
+                window.location.href = "/"
+            }
+        })
+        .catch((err) => console.error(err))
+    }
+
+    function switchPage(page) {
+        setSearchQuery("")
+        setCurrentPage(page)
+    }
+
+    return (
+        <div className="navbar">
+
+            { user ? 
+                <>
+                    <span className="displayName">{user.github.displayName}</span>
+                    {
+                        currentPage === "home" ? 
+                            <button className="navButton" onClick={() => switchPage("userDash")}>Plans</button>
+                        :
+                            <button className="navButton" onClick={() => switchPage("home")}>Home</button>
+                    }
+
+                    <button className="navButton" onClick={() => handleLogout()}>Logout</button>
+                </>
+
+                :
+                <button className="navButton" onClick={() => handleLogin()}>Login</button>
+            }            
+
+        </div>
+    )
+}
+
+Navbar.propTypes = {
+    setCurrentPage: PropTypes.func.isRequired,
+    currentPage: PropTypes.string.isRequired,
+    searchQuery: PropTypes.string.isRequired,
+    setSearchQuery: PropTypes.func.isRequired,
+    user: PropTypes.any.isRequired,
+  };
+
+export default Navbar

apps/nightlife-coordination-app/client/UserDashboard.jsx

@@ -0,0 +1,36 @@
+import React from "react";
+import EventCard from './EventCard.jsx';
+import PropTypes from 'prop-types';
+
+function UserDashboard({user, isGoingToEvent}) {
+
+    return(
+        <div className="splashContainer">
+            <h1 className="splashTextDashboard">Events you are going to</h1>
+
+            <div className="eventContainerDashboard">
+                {
+                    user.events.map((event, idx) => {
+                        return <EventCard key={idx}
+                                    event_id={event._id}
+                                    img_url={event.image_url}
+                                    name={event.name}
+                                    description={event.description}
+                                    attending={event.attending_count}
+                                    isRemoveable={isGoingToEvent(event._id)}
+                                    user={user}
+                                />
+                    })
+                }
+
+            </div>
+        </div>
+    )
+}
+
+UserDashboard.propTypes = {
+    isGoingToEvent: PropTypes.func.isRequired,
+    user: PropTypes.any.isRequired
+  };
+
+export default UserDashboard