setDisplaySort(!displaySort)}
38 | />
39 |
40 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 | );
57 | }
58 |
--------------------------------------------------------------------------------
/client/src/components/library/LibraryNav.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "styled-components";
3 | import {
4 | BrowserRouter as Router,
5 | Route,
6 | Link,
7 | useRouteMatch,
8 | useLocation
9 | } from "react-router-dom";
10 |
11 | const NavGrid = styled.div`
12 | display: grid;
13 | height: 60px;
14 | grid-template-columns: 1fr 1fr 1fr;
15 | border: none;
16 | `;
17 |
18 | const NavGridButton = styled.button`
19 | color: ${props => (props ? "white" : props.theme.darkFont)};
20 | background: ${props => props.theme.accent};
21 | font-size: 20px;
22 | display: flex;
23 | width: 100%;
24 | height: inherit;
25 | align-items: center;
26 | justify-content: center;
27 | border: none;
28 | border-bottom: ${props =>
29 | props.selected ? `6px solid ${props.theme.brightEffect}` : "none"};
30 | color: ${props => (props.selected ? "white" : props.theme.darkFont)};
31 | outline: none;
32 | `;
33 |
34 | const StyledLink = styled(Link)`
35 | text-decoration: none;
36 | color: inherit;
37 | height: inherit;
38 | `;
39 |
40 | export default function LibraryNav({ selected, onNavigationChange }) {
41 | let { url } = useRouteMatch();
42 | let location = useLocation();
43 | return (
44 |
45 |
46 | onNavigationChange(`${url}/games`)}
50 | >
51 | Games
52 |
53 |
54 |
55 | onNavigationChange(`${url}/browse`)}
59 | >
60 | Browse
61 |
62 |
63 |
64 | onNavigationChange(`${url}/wishlist`)}
68 | >
69 | Wishlist
70 |
71 |
72 |
73 | );
74 | }
75 |
--------------------------------------------------------------------------------
/client/src/components/user-management/LoginForm.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import styled from "styled-components";
3 | import InputField from "./InputField";
4 | import Form from "./Form";
5 | import { Link } from "react-router-dom";
6 | import { validateCredentials } from "../../api/fetchUser";
7 |
8 | const FailMessage = styled.div`
9 | color: red;
10 | `;
11 | const LinkContainer = styled.div`
12 | fill: white;
13 | color: white;
14 | margin: 6px;
15 | `;
16 |
17 | const StyledLink = styled(Link)`
18 | text-decoration: none;
19 | color: ${props => props.theme.brightEffect};
20 | `;
21 |
22 | export default function LoginForm() {
23 | const [failed, setFailed] = useState(null);
24 | const [user, setUser] = useState({
25 | email: "",
26 | password: ""
27 | });
28 | const { email, password } = user;
29 |
30 | function handleChange(event) {
31 | setUser({ ...user, [event.target.name]: event.target.value });
32 | }
33 |
34 | function submit(event) {
35 | event.preventDefault();
36 |
37 | validateCredentials(user)
38 | .then(response => response.json())
39 | .then(function(data) {
40 | if (data === "access denied") {
41 | setFailed(true);
42 | window.navigator.vibrate(400);
43 | } else {
44 | localStorage.setItem("user", data.name);
45 | window.location.pathname = "/Library/browse";
46 | }
47 | });
48 | }
49 |
50 | return (
51 | <>
52 | {failed && Username or password incorrect}
53 |
72 |
73 | Don't have an Account ? Sign Up
74 |
75 |
76 | );
77 | }
78 |
--------------------------------------------------------------------------------
/client/src/components/Header.js:
--------------------------------------------------------------------------------
1 | import React, { useRef, useState } from "react";
2 | import styled from "styled-components";
3 | import IconButton from "./IconButton";
4 | import BurgerMenu from "../icons/BurgerMenuIcon";
5 | import Magnifier from "../icons/Magnifier";
6 | import VerticalPoints from "../icons/VerticalPoints";
7 | import SearchBar from "./library/SearchBar";
8 | import BurgerMenuList from "./BurgerMenuList";
9 | import { useOnClickOutside } from "../hooks";
10 | import OptionBox from "./library/OptionBox";
11 | import SortModal from "./library/SortModal";
12 | import { Background } from "./popup-card/CardModal";
13 | import AxeViking from "../icons/AxeViking";
14 |
15 | const HeaderContainer = styled.header`
16 | display: flex;
17 | justify-content: center;
18 | align-items: center;
19 | background-color: ${props => props.theme.lightBackground};
20 | color: white;
21 | height: 60px;
22 | font-size: 20px;
23 | box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15);
24 | position: sticky;
25 | top: 0;
26 | `;
27 |
28 | const PageSpan = styled.span``;
29 |
30 | const IconSpan = styled.span`
31 | position: absolute;
32 | `;
33 | export default function Header({
34 | toggleOptions,
35 | toggleSearchbar,
36 | active,
37 | handleInputChange,
38 | onSearch,
39 | page
40 | }) {
41 | const [showMenu, setShowMenu] = React.useState(false);
42 | const [showOptions, setShowOptions] = useState(false);
43 | const [showSort, setShowSort] = useState(false);
44 | const node = useRef();
45 |
46 | useOnClickOutside(node, () => {
47 | setShowMenu(false);
48 | setShowOptions(false);
49 | setShowSort(false);
50 | });
51 | return (
52 | <>
53 | {showMenu && (
54 | <>
55 |
56 |
57 | setShowMenu(false)} />
58 |
59 |
60 | )}
61 |
62 |
63 | setShowMenu(!showMenu)}>
64 |
65 |
66 | {page}
67 | {!active && (
68 |
69 |
70 |
71 | )}
72 |
73 | handleInputChange(event)}
76 | onSearch={onSearch}
77 | />
78 |
79 |
80 |
81 |
82 |
83 |
84 | {showOptions && (
85 |
86 |
87 | {showSort && }
88 |
89 | )}
90 |
91 |
92 | );
93 | }
94 |
--------------------------------------------------------------------------------
/client/src/pages/User.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import {
3 | BrowserRouter as Router,
4 | Switch,
5 | Route,
6 | useHistory
7 | } from "react-router-dom";
8 | import styled from "styled-components";
9 | import Header from "../components/Header";
10 | import PictureContainer from "../components/User-page.js/RoundPicture";
11 | import AmountGames from "../components/User-page.js/AmountGames";
12 | import { useUser } from "../hooks";
13 | import { getGamesCollection } from "../api/fetchGames";
14 | import compare from "../components/User-page.js/CompareFunction";
15 | import UserNameArea from "../components/User-page.js/UserNameArea";
16 | import { getWishlistCollection } from "../api/fetchWishlist";
17 | import UserStatistics from "./UserStatistics";
18 | import UserFriends from "./UserFriends";
19 | import UserOverview from "./UserOverview";
20 | import NameText from "../components/User-page.js/NameText";
21 | import NavBar from "../components/User-page.js/NavBar";
22 | import LibraryBrowse from "./LibraryBrowse";
23 |
24 | const Container = styled.div`
25 | display: flex;
26 | height: 100vh;
27 | width: 100vw;
28 | flex-direction: column;
29 | color: white;
30 | `;
31 |
32 | const TopArea = styled.section`
33 | height: 20%;
34 | display: flex;
35 | justify-content: space-around;
36 | align-items: center;
37 | `;
38 |
39 | export default function User() {
40 | const [games, setGames] = useState([]);
41 | const [wishlistGames, setWishlistGames] = useState([]);
42 |
43 | React.useEffect(() => {
44 | getWishlistCollection().then(gameArray => {
45 | setWishlistGames(gameArray);
46 | });
47 | }, []);
48 |
49 | React.useEffect(() => {
50 | getGamesCollection().then(gameArray => {
51 | setGames(gameArray);
52 | });
53 | }, []);
54 |
55 | const filteredGames = games.sort(compare);
56 | const [user] = useUser();
57 | let history = useHistory();
58 |
59 | return (
60 |
61 | {
64 | history.push("/library/browse");
65 | }}
66 | />
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 | );
91 | }
92 |
--------------------------------------------------------------------------------
/client/src/components/user-management/RegisterForm.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import styled from "styled-components";
3 | import InputField from "./InputField";
4 | import Form from "./Form";
5 | import { Link, useHistory } from "react-router-dom";
6 | import { createUser } from "../../api/fetchUser";
7 |
8 | const ErrorContainer = styled.div`
9 | color: red;
10 | `;
11 |
12 | const SuccessContainer = styled.div`
13 | color: green;
14 | `;
15 | const LinkContainer = styled.div`
16 | fill: white;
17 | color: white;
18 | margin: 6px;
19 | `;
20 |
21 | const StyledLink = styled(Link)`
22 | text-decoration: none;
23 | color: ${props => props.theme.brightEffect};
24 | `;
25 |
26 | export default function RegisterForm() {
27 | const [feedback, setFeedback] = useState(null);
28 | const [success, setSuccess] = useState(null);
29 | const [failed, setFailed] = useState(null);
30 | const [user, setUser] = useState({
31 | name: "",
32 | email: "",
33 | password: "",
34 | password2: ""
35 | });
36 |
37 | let history = useHistory();
38 | const { name, email, password, password2 } = user;
39 |
40 | function handleChange(event) {
41 | setUser({ ...user, [event.target.name]: event.target.value });
42 | }
43 |
44 | function submit(event) {
45 | event.preventDefault();
46 | if (password !== password2) {
47 | setFailed(true);
48 | setFeedback("passwords don't match");
49 | return;
50 | } else {
51 | createUser(user)
52 | .then(response => response.json())
53 | .then(function(data) {
54 | if (data === "email already exists") {
55 | setFeedback("Email adress is already being used");
56 | setSuccess(false);
57 | setFailed(true);
58 | return;
59 | } else {
60 | setFeedback("Account succesfully created");
61 | setFailed(false);
62 | setSuccess(true);
63 | setTimeout(() => {
64 | history.push("/");
65 | }, 1300);
66 | return;
67 | }
68 | })
69 | .catch(function() {
70 | console.log("error");
71 | });
72 | }
73 | }
74 | return (
75 | <>
76 | {failed && {feedback}}
77 | {success && {feedback}}
78 |
113 |
114 | Already have an Account ? Login
115 |
116 |
117 | );
118 | }
119 |
--------------------------------------------------------------------------------
/client/src/components/BurgerMenuList.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "styled-components";
3 | import NavigationMenuButton from "./library/NavigationMenuButton";
4 | import Dice from "../icons/Dice";
5 | import { useHistory, useLocation, useRouteMatch, Link } from "react-router-dom";
6 | import Logout from "../icons/Logout";
7 |
8 | import { useUser } from "../hooks";
9 | import { unsetUser } from "../api/fetchUser";
10 | import Person from "../icons/Person";
11 | import Clear from "../icons/Clear";
12 | import { morph } from "../animations/morph";
13 |
14 | const PositionContainer = styled.nav`
15 | position: fixed;
16 | left: 0px;
17 | z-index: 1;
18 | display: flex;
19 | flex-grow: 1;
20 | flex-direction: column;
21 | justify-content: flex-start;
22 | width: 70vw;
23 | height: 100vh;
24 | background-color: ${props => props.theme.accent};
25 | animation: ${morph} 0.4s ease-in-out;
26 | `;
27 |
28 | const NameContainer = styled.div`
29 | color: ${props => props.theme.brightEffect};
30 | margin-left: 5px;
31 | font-size: 1.2em;
32 | height: 10vh;
33 | display: flex;
34 | justify-content: center;
35 | align-items: center;
36 | `;
37 |
38 | const FlexDiv = styled.div`
39 | display: flex;
40 | flex-grow: 1;
41 | justify-content: center;
42 | align-items: center;
43 | font-size: 1.1em;
44 | margin-left: -10px;
45 | `;
46 |
47 | const CloseButton = styled.button`
48 | display: flex;
49 | justify-content: center;
50 | align-items: center;
51 | border: none;
52 | outline: none;
53 | color: inherit;
54 | width: 40px;
55 | height: 40px;
56 | background: inherit;
57 | `;
58 |
59 | const ImpressumLink = styled(Link)`
60 | position: absolute;
61 | bottom: 15px;
62 | right: 5%;
63 | color: white;
64 | `;
65 | export default function BurgerMenuList({ handleClose }) {
66 | let history = useHistory();
67 | let location = useLocation();
68 | let { url } = useRouteMatch();
69 | const [user] = useUser();
70 | return (
71 | <>
72 |
73 |
74 |
75 |
76 |
77 | Hello, {user}!
78 |
79 |
80 | history.push("/library/browse")}
82 | selected={
83 | location.pathname === `${url}/browse` ||
84 | location.pathname === `${url}/games` ||
85 | location.pathname === `${url}/wishlist`
86 | }
87 | >
88 |
95 | Library
96 |
97 | {
99 | history.push("/user/overview");
100 | }}
101 | selected={
102 | location.pathname === `${url}/overview` ||
103 | location.pathname === `${url}/statistics` ||
104 | location.pathname === `${url}/friends`
105 | }
106 | >
107 |
114 | User
115 |
116 | {
118 | unsetUser();
119 | localStorage.clear();
120 | history.push("/");
121 | }}
122 | >
123 |
124 | Logout
125 |
126 | Impressum
127 |
128 |
129 | );
130 | }
131 |
--------------------------------------------------------------------------------
/client/src/icons/Wishlist.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default function Wishlist({ className }) {
4 | return (
5 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/client/src/components/popup-card/CardModal.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import styled from "styled-components";
3 | import CollectionItemPositioned from "./GamePositioned";
4 | import AddButtonCollection from "./AddButtonCollection";
5 | import AddButtonWishlist from "./AddButtonWishlist";
6 | import { removeGameEntry, newGame } from "../../api/fetchGames";
7 | import { newWishlistEntry, removeGameWishlist } from "../../api/fetchWishlist";
8 | import DetailButton from "./DetailButton";
9 | import ConfirmationMessage from "./ConfirmationMessage";
10 | import Grid from "./Grid";
11 | import GameName from "./GameName";
12 | import Players from "./Players";
13 | import TrimText from "./TrimText";
14 | import Rating from "react-rating";
15 | import StarRatingFull from "../../icons/StarRatingFull";
16 | import StarRatingEmpty from "../../icons/StarRatingEmpty";
17 | import RatingContainer from "./RatingContainer";
18 | import RemoveButton from "./RemoveButton";
19 | import CardBack from "./CardBack";
20 | import ModalContainer from "./ModalContainer";
21 |
22 | export const Background = styled.div`
23 | height: 100%;
24 | width: 100%;
25 | background: transparent;
26 | position: fixed;
27 | outline: none;
28 | border: none;
29 | top: 0;
30 | z-index: 1;
31 | backdrop-filter: blur(2.8px);
32 | overflow-y: hidden;
33 | `;
34 |
35 | const FlexContainer = styled.div`
36 | display: flex;
37 | justify-content: center;
38 | align-items: flex-end;
39 | `;
40 |
41 | const Info = styled.span`
42 | margin: 6px 0px;
43 | `;
44 |
45 | const ColoredSpan = styled.span`
46 | color: ${props => props.theme.brightEffect};
47 | margin-right: 10px;
48 | `;
49 |
50 | export default function CardModal({
51 | handleOutsideClick,
52 | singleGame,
53 | enabled,
54 | removeGame,
55 | removeWishlist
56 | }) {
57 | const [showBack, setShowBack] = useState(false);
58 | const [startAnimation, setStartAnimation] = useState(false);
59 |
60 | const regex = /((<([^>&"]+)>)|(\"\;))/gi;
61 | const description = singleGame.description.replace(regex, "");
62 |
63 | return (
64 | <>
65 |
66 |
67 | {!showBack && (
68 |
69 |
70 |
71 | }
75 | emptySymbol={}
76 | />
77 | ({singleGame.num_user_ratings})
78 |
79 |
80 |
81 | {TrimText(`${singleGame.name}`, 45)}
82 |
83 | Players: {singleGame.min_players}-
84 | {singleGame.max_players}
85 |
86 | Playtime:
87 | {singleGame.min_playtime}min - {singleGame.max_playtime}min
88 |
89 | Description:
90 |
91 | {TrimText(`${description}`, 43)}
92 | setShowBack(!showBack)} />
93 |
94 |
95 |
96 | {enabled && (
97 |
102 | To Collection
103 |
104 | )}
105 | {enabled && (
106 |
111 | To Wishlist
112 |
113 | )}
114 | {removeWishlist && (
115 | {
117 | removeGameWishlist(singleGame);
118 | window.location.reload(true);
119 | }}
120 | >
121 | Remove
122 |
123 | )}
124 | {removeGame && (
125 | {
127 | removeGameEntry(singleGame);
128 | window.location.reload(true);
129 | }}
130 | >
131 | Remove
132 |
133 | )}
134 |
135 | )}
136 | {showBack && (
137 |
142 | )}
143 |
144 | {startAnimation && }
145 |
146 | );
147 | }
148 |
--------------------------------------------------------------------------------
/client/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === "localhost" ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === "[::1]" ||
17 | // 127.0.0.1/8 is considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener("load", () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | "This web app is being served cache-first by a service " +
46 | "worker. To learn more, visit https://bit.ly/CRA-PWA"
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === "installed") {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | "New content is available and will be used when all " +
74 | "tabs for this page are closed. See https://bit.ly/CRA-PWA."
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log("Content is cached for offline use.");
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error("Error during service worker registration:", error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl)
104 | .then(response => {
105 | // Ensure service worker exists, and that we really are getting a JS file.
106 | const contentType = response.headers.get("content-type");
107 | if (
108 | response.status === 404 ||
109 | (contentType != null && contentType.indexOf("javascript") === -1)
110 | ) {
111 | // No service worker found. Probably a different app. Reload the page.
112 | navigator.serviceWorker.ready.then(registration => {
113 | registration.unregister().then(() => {
114 | window.location.reload();
115 | });
116 | });
117 | } else {
118 | // Service worker found. Proceed as normal.
119 | registerValidSW(swUrl, config);
120 | }
121 | })
122 | .catch(() => {
123 | console.log(
124 | "No internet connection found. App is running in offline mode."
125 | );
126 | });
127 | }
128 |
129 | export function unregister() {
130 | if ("serviceWorker" in navigator) {
131 | navigator.serviceWorker.ready.then(registration => {
132 | registration.unregister();
133 | });
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | require("dotenv").config();
2 |
3 | const express = require("express");
4 | const { getGames, setGames, removeGame } = require("./lib/games");
5 | const {
6 | getWishlist,
7 | setWishlist,
8 | removeWishlistEntry
9 | } = require("./lib/wishlist");
10 | const { getUsers, setUser, validateUser } = require("./lib/users");
11 | const { initDatabase } = require("./lib/database");
12 | const {
13 | createSession,
14 | getUserBySession,
15 | deleteSession
16 | } = require("./lib/sessions");
17 | const axios = require("axios");
18 |
19 | const app = express();
20 | const path = require("path");
21 | const cookieParser = require("cookie-parser");
22 |
23 | app.use(express.json());
24 | app.use(cookieParser());
25 |
26 | app.get(`/api/wishlist`, async (request, response) => {
27 | try {
28 | const user = getUserBySession(request.cookies.session);
29 | if (!user) return response.status(403).end("unauthorized request");
30 | if (user) {
31 | const wishlist = await getWishlist(user.name);
32 | return response.json(wishlist);
33 | } else {
34 | response.send("User not found");
35 | }
36 | } catch (error) {
37 | return response.end("Error");
38 | }
39 | response.end();
40 | });
41 |
42 | app.get(`/api/games`, async (request, response) => {
43 | try {
44 | const user = getUserBySession(request.cookies.session);
45 | if (!user) return response.status(403).end("unauthorized request");
46 | if (user) {
47 | const games = await getGames(user.name);
48 | return response.json(games);
49 | } else {
50 | response.send("User not found");
51 | }
52 | } catch (error) {
53 | console.log(error);
54 | return response.end("Error");
55 | }
56 | });
57 |
58 | app.post("/api/wishlist", async (request, response) => {
59 | try {
60 | const user = getUserBySession(request.cookies.session);
61 | if (!user) return response.status(403).end("unauthorized request");
62 | request.body.owner = user.name;
63 | const WishlistEntry = await setWishlist(request.body);
64 | return response.json({ WishlistEntry });
65 | } catch (error) {
66 | console.error(error);
67 | response.end(error);
68 | }
69 | });
70 |
71 | app.post("/api/games", async (request, response) => {
72 | try {
73 | const user = getUserBySession(request.cookies.session);
74 | if (!user) return response.status(403).end("unauthorized request");
75 | request.body.owner = user.name;
76 | request.body.date_added = Date.now();
77 | const newGame = await setGames(request.body);
78 | return response.json({ newGame });
79 | } catch (error) {
80 | console.error(error);
81 | response.end("Error");
82 | }
83 | });
84 |
85 | app.get("/api/users", async (request, response) => {
86 | try {
87 | const users = await getUsers(request.params);
88 | return response.json(users);
89 | } catch (error) {
90 | return response.end("Error");
91 | }
92 | });
93 |
94 | app.post("/api/users", async (request, response) => {
95 | try {
96 | const emailExist = await getUsers(request.body.email);
97 | if (emailExist) {
98 | return response.status(400).json("email already exists");
99 | } else {
100 | await setUser(request.body);
101 | return response.status(200).json("Account succesfully created");
102 | }
103 | } catch (error) {
104 | console.error(error);
105 | response.end("Error");
106 | }
107 | });
108 |
109 | app.post("/api/login", async (request, response) => {
110 | try {
111 | const userExist = await validateUser(request.body);
112 | if (userExist) {
113 | const sessionId = createSession(userExist);
114 | response.cookie("session", sessionId);
115 | return response.json({ name: userExist.name });
116 | } else if (!userExist) {
117 | return response.status(401).json("access denied");
118 | }
119 | } catch (error) {
120 | response.end("Error");
121 | console.log(error);
122 | }
123 | response.end();
124 | });
125 |
126 | app.post("/api/logout", async (request, response) => {
127 | try {
128 | const session = request.cookies.session;
129 | deleteSession(session);
130 | response.clearCookie("session");
131 | return response.end();
132 | } catch (error) {
133 | response.end();
134 | }
135 | });
136 |
137 | app.get("/api/search", async (request, response) => {
138 | const name = request.query.name;
139 | const targetUrl = `https://www.boardgameatlas.com/api/search?name=${name}&limit=15&fields=id,name,description,image_url,publishers,average_user_rating,num_user_ratings,mechanics,categories,min_players,max_players,min_playtime,max_playtime&client_id=5cIY9zBPpt`;
140 |
141 | return axios({
142 | url: targetUrl,
143 | method: "GET",
144 | headers: {
145 | Accept: "application/json",
146 | "client-id": "5cIY9zBPpt"
147 | }
148 | })
149 | .then(response => response.data)
150 | .then(games => response.json(games));
151 | });
152 |
153 | app.get("/api/mechanics", async (request, response) => {
154 | const targetUrl = `https://www.boardgameatlas.com/api/game/mechanics?client_id=5cIY9zBPpt`;
155 |
156 | return axios({
157 | url: targetUrl,
158 | method: "GET",
159 | headers: {
160 | Accept: "application/json",
161 | "client-id": "5cIY9zBPpt"
162 | }
163 | })
164 | .then(response => response.data)
165 | .then(mechanics => response.json(mechanics));
166 | });
167 |
168 | app.post("/api/wishlistremove", async (request, response) => {
169 | try {
170 | const user = getUserBySession(request.cookies.session);
171 | if (!user) return response.status(403).end("unauthorized request");
172 | removeWishlistEntry(request.body.name);
173 | response.send("Wishlist entry deleted");
174 | } catch (error) {
175 | console.error;
176 | }
177 | });
178 |
179 | app.post("/api/gamesremove", async (request, response) => {
180 | try {
181 | const user = getUserBySession(request.cookies.session);
182 | if (!user) return response.status(403).end("unauthorized request");
183 | removeGame(request.body.name);
184 | response.send("Game deleted");
185 | } catch (error) {
186 | console.error;
187 | }
188 | });
189 |
190 | if (process.env.NODE_ENV === "production") {
191 | app.use(express.static(path.join(__dirname, "client/build")));
192 |
193 | app.get("*", function(req, res) {
194 | res.sendFile(path.join(__dirname, "client/build", "index.html"));
195 | });
196 | }
197 | initDatabase(process.env.DB_URL, process.env.DB_NAME).then(() => {
198 | console.log(`Database ${(process.env.DB_URL, process.env.DB_NAME)} is ready`);
199 |
200 | app.listen(process.env.PORT, () => {
201 | console.log(`Server listens on http://localhost:${process.env.PORT}`);
202 | });
203 | });
204 |
--------------------------------------------------------------------------------
/client/src/icons/WoodSign.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default function Woodsign() {
4 | return (
5 |
177 | );
178 | }
179 |
--------------------------------------------------------------------------------
/client/src/icons/Hero.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default function Hero() {
4 | return (
5 |
520 | );
521 | }
522 |
--------------------------------------------------------------------------------