= (props) => {
+ const {loading, gamesList} = props;
+ const Uctx = React.useContext(UserContext);
+ const listItems = gamesList.map(listing =>
+
+ Game played on: {Uctx.dateTimeFormatter.format(new Date(listing.createdAt))}
+
+ );
+ return (
+ <>
+ {loading ? (
+ {Uctx.strings.historyPage.loading}
+ ) : (
+
+ {listItems}
+
+ )}
+
+ );
+};
+
+export default GamesList;
\ No newline at end of file
diff --git a/src/Components/GuestList.tsx b/src/Components/GuestList.tsx
new file mode 100644
index 0000000..ba33bec
--- /dev/null
+++ b/src/Components/GuestList.tsx
@@ -0,0 +1,39 @@
+import {Header, List, ListItem} from "semantic-ui-react";
+import React from "react";
+import UserContext from "../Contexts/UserContext";
+import {Guest} from "./ProfilePage";
+import HeaderSubHeader from "semantic-ui-react/dist/commonjs/elements/Header/HeaderSubheader";
+import {SERVER_BASE_NAME} from "../index";
+
+
+interface GuestListProps {
+ loading: boolean;
+ guestList: Guest[];
+ deleteGuest: (id: string) => any;
+}
+
+const GuestList: React.FunctionComponent = (props) => {
+ const {loading, guestList, deleteGuest} = props;
+ const Uctx = React.useContext(UserContext);
+ const listItems = guestList.map(guest =>
+
+ {guest.nick} - deleteGuest(guest.id)}>{Uctx.strings.general.deleteCommand}
+
+ );
+ return (
+ <>
+
+ {Uctx.strings.profilePage.guestsHeader}
+
+ {loading ? (
+ {Uctx.strings.profilePage.loadingGuests}
+ ) : (
+
+ {listItems}
+
+ )}
+
+ );
+};
+
+export default GuestList;
\ No newline at end of file
diff --git a/src/Components/HistoryPage.tsx b/src/Components/HistoryPage.tsx
index 2ddc4ea..2714141 100755
--- a/src/Components/HistoryPage.tsx
+++ b/src/Components/HistoryPage.tsx
@@ -3,6 +3,7 @@ import {Header, List, ListItem} from "semantic-ui-react";
import axios from "axios";
import {SERVER_BASE_NAME} from "../index";
import UserContext from "../Contexts/UserContext";
+import GamesList from "./GamesList";
interface HistoryPageProps {
}
@@ -27,11 +28,9 @@ class HistoryPage extends React.Component {
.then(response => this.setState({gameListings: response.data.games}))
.catch(error => this.handleError(error))
.finally(() => this.setState({ loadingGames: false }));
- console.log(this.state.gameListings);
}
handleError = (error: any) => void {
-
};
render(): ReactElement {
@@ -41,22 +40,10 @@ class HistoryPage extends React.Component {
{Locale.historyPage.title}
- {
- this.state.loadingGames ? (
-
- Loading games...
-
- ) :
- (
-
- {
- this.state.gameListings.map(listing => {
- return Game played on: {listing.createdAt};
- })
- }
-
- )
- }
+
);
}
diff --git a/src/Components/ProfilePage.tsx b/src/Components/ProfilePage.tsx
index 79379a0..5842d5a 100755
--- a/src/Components/ProfilePage.tsx
+++ b/src/Components/ProfilePage.tsx
@@ -1,10 +1,20 @@
import React, {ReactElement} from "react";
import {Header} from "semantic-ui-react";
import UserContext from "../Contexts/UserContext";
+import axios from "axios";
+import {SERVER_BASE_NAME} from "../index";
+import GuestList from "./GuestList";
interface ProfilePageProps {}
interface ProfilePageState {
+ loadingGuests: boolean;
+ guests: Guest[];
+}
+
+export interface Guest {
+ id: string;
+ nick: string;
}
class ProfilePage extends React.Component {
@@ -12,15 +22,48 @@ class ProfilePage extends React.Component {
super(props);
this.state = {
+ loadingGuests: false,
+ guests: [],
};
}
+ componentDidMount(): void {
+ this.loadGuests();
+ }
+
+ loadGuests(): void {
+ this.setState({loadingGuests: true}, () => {
+ axios.get(SERVER_BASE_NAME + "/api/guests")
+ .then(response => this.setState({guests: response.data.guests}))
+ .catch(error => this.handleError(error))
+ .finally(() => this.setState({ loadingGuests: false }));
+ });
+ }
+
+ deleteGuest(id: string): void {
+ console.log("delete with url", SERVER_BASE_NAME + "/api/guest/" + id);
+ axios.delete(SERVER_BASE_NAME + "/api/guest/" + id)
+ .then(response => this.loadGuests())
+ .catch(error => this.handleError(error))
+ }
+
+ handleError(error: any): void {
+ console.log(error);
+ }
+
render(): ReactElement {
const Locale = this.context.strings;
return (
-
- {Locale.profilePage.title}
-
+ <>
+
+ {Locale.profilePage.title}
+
+ this.deleteGuest(id)}
+ loading={this.state.loadingGuests}
+ guestList={this.state.guests}
+ />
+
);
}
}
diff --git a/src/Contexts/UserContext.ts b/src/Contexts/UserContext.ts
index 7ab3c06..007288f 100755
--- a/src/Contexts/UserContext.ts
+++ b/src/Contexts/UserContext.ts
@@ -1,11 +1,12 @@
import React from "react";
-import {SupportedLang} from "../enums";
+import {supportedLangToIntlDTF, SupportedLang} from "../enums";
import {IntlStrings} from "../static/strings";
export interface IUserContext {
username: string;
loggedIn: boolean;
updateUserContext: (username: string, loggedIn: boolean) => void;
+ dateTimeFormatter: Intl.DateTimeFormat;
currentLang: SupportedLang;
strings: any;
changeLang: (lang: SupportedLang, submit?: boolean) => void;
@@ -15,6 +16,7 @@ const userDefaultVal = {
loggedIn: false,
username: "",
updateUserContext: () => {},
+ dateTimeFormatter: supportedLangToIntlDTF[SupportedLang.gb],
currentLang: SupportedLang.gb,
strings: IntlStrings[SupportedLang.gb as SupportedLang],
changeLang: () => {},
diff --git a/src/enums.ts b/src/enums.ts
index 89939a5..da5b527 100755
--- a/src/enums.ts
+++ b/src/enums.ts
@@ -11,4 +11,10 @@ export enum PageId {
stats = "stats",
home = "home",
history = "history",
-}
\ No newline at end of file
+}
+
+export const supportedLangToIntlDTF: Record = {
+ gb: Intl.DateTimeFormat('en-AU'),
+ de: Intl.DateTimeFormat('de-DE'),
+ it: Intl.DateTimeFormat('it-IT'),
+};
\ No newline at end of file
diff --git a/src/filetypes.d.ts b/src/filetypes.d.ts
old mode 100755
new mode 100644
diff --git a/src/index.tsx b/src/index.tsx
index 91f3fee..f5f0feb 100755
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,8 +3,7 @@ import ReactDOM from "react-dom";
import "semantic-ui-css/semantic.min.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
-
-export const SERVER_BASE_NAME = "/kadi";
+export {homepage as SERVER_BASE_NAME} from "../package.json";
ReactDOM.render((
diff --git a/src/static/strings.ts b/src/static/strings.ts
index 43ff8bf..0ac0e75 100755
--- a/src/static/strings.ts
+++ b/src/static/strings.ts
@@ -28,6 +28,9 @@ export const LanguageNames: Record = {
export const IntlStrings = {
gb: {
+ general: {
+ deleteCommand: "Delete",
+ },
menu: {
profileTab: "Profile",
statsTab: "Stats",
@@ -44,6 +47,8 @@ export const IntlStrings = {
},
profilePage: {
title: "Profile",
+ guestsHeader: "Guests",
+ loadingGuests: "Loading guests..."
},
statsPage: {
title: "Stats",
@@ -56,9 +61,13 @@ export const IntlStrings = {
},
historyPage: {
title: "History",
+ loading: "Loading games...",
},
},
de: {
+ general: {
+ deleteCommand: "Löschen",
+ },
menu: {
profileTab: "Profil",
statsTab: "Statistiken",
@@ -75,6 +84,8 @@ export const IntlStrings = {
},
profilePage: {
title: "Profil",
+ guestsHeader: "Gäste",
+ loadingGuests: "Gäste werden geladen...",
},
statsPage: {
title: "Statistiken",
@@ -87,9 +98,13 @@ export const IntlStrings = {
},
historyPage: {
title: "Spielverlauf",
+ loading: "Spielverlauf wird geladen...",
},
},
it: {
+ general: {
+ deleteCommand: "Cancella",
+ },
menu: {
profileTab: "Profilo",
statsTab: "Statistiche",
@@ -106,6 +121,8 @@ export const IntlStrings = {
},
profilePage: {
title: "Profilo",
+ guestsHeader: "===TRANSLATE ME===",
+ loadingGuests: "===TRANSLATE ME===",
},
statsPage: {
title: "Statistiche",
@@ -118,6 +135,7 @@ export const IntlStrings = {
},
historyPage: {
title: "Storia",
+ loading: "Caricando storia giochi..."
},
},
} as const;
\ No newline at end of file
diff --git a/tslint.json b/tslint.json
index 32538c5..06739e6 100755
--- a/tslint.json
+++ b/tslint.json
@@ -25,7 +25,7 @@
],
"linterOptions": {
"exclude": [
- "build/**/*.js",
+ "dist/**/*.js",
"config/**/*.js",
"node_modules/**/*.ts"
]
diff --git a/webpack.config.js b/webpack.config.js
index 7dee35a..69dfa0c 100755
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,51 +1,51 @@
const path = require("path");
const webpack = require("webpack");
+const SERVER_ROOT = require("./package.json").homepage;
+
module.exports = {
- entry: "./src/index.tsx",
- mode: "development",
- module: {
- rules: [
- {
- test: /\.tsx?$/,
- exclude: /(node_modules|bower_components|\.d\.ts$)/,
- use: [
- {
- loader: "babel-loader",
- options: { presets: ["@babel/env"] },
- },
- { loader: "ts-loader" },
- ],
- },
- {
- test: /\.d\.ts$/,
- loader: 'ignore-loader'
- },
- {
- test: /\.css$/,
- use: ["style-loader", "css-loader"]
- },
- {
- test: /\.(png|jpe?g|gif|ttf|woff2?|eot|svg)$/i,
- use: [
- {
- loader: 'file-loader',
- },
- ],
- }
- ]
- },
- resolve: { extensions: [".tsx", ".ts", ".js", "*"] },
- output: {
- path: path.resolve(__dirname, "dist/"),
- publicPath: "/kadi/static/frontend/",
- filename: "bundle.js"
- },
- devServer: {
- contentBase: path.join(__dirname, "public/"),
- port: 3000,
- publicPath: "http://localhost:3000/dist/",
- hotOnly: true
- },
- plugins: [new webpack.HotModuleReplacementPlugin()]
+ entry: "./src/index.tsx",
+ mode: "production",
+ module: {
+ rules: [
+ {
+ test: /\.tsx?$/,
+ exclude: /(node_modules|bower_components|\.d\.ts$)/,
+ use: [
+ "react-hot-loader/webpack",
+ "babel-loader",
+ ],
+ },
+ {
+ test: /\.d\.ts$/,
+ loader: 'ignore-loader'
+ },
+ {
+ test: /\.css$/,
+ use: ["style-loader", "css-loader"]
+ },
+ {
+ test: /\.(png|jpe?g|gif|ttf|woff2?|eot|svg)$/i,
+ use: [
+ {
+ loader: 'file-loader',
+ },
+ ],
+ }
+ ]
+ },
+ resolve: { extensions: [".tsx", ".ts", ".js", "*"] },
+ output: {
+ path: path.resolve(__dirname, "dist/"),
+ publicPath: SERVER_ROOT + "/static/frontend/",
+ filename: "bundle.js"
+ },
+ devServer: {
+ contentBase: path.join(__dirname, "public/"),
+ contentBasePublicPath: SERVER_ROOT + "/",
+ port: 3000,
+ publicPath: "http://localhost:3000" + SERVER_ROOT + "/static/frontend/",
+ hotOnly: true
+ },
+ plugins: [new webpack.HotModuleReplacementPlugin()]
};