+
-
+
+
- {getMainPage()}
+ {getHomePage()}
);
diff --git a/redaktions-app/src/components/MainMenu.tsx b/redaktions-app/src/components/MainMenu.tsx
new file mode 100644
index 0000000..4554947
--- /dev/null
+++ b/redaktions-app/src/components/MainMenu.tsx
@@ -0,0 +1,89 @@
+import React, { ReactElement } from "react";
+import { createStyles, IconButton } from "@material-ui/core";
+import { makeStyles, Theme } from "@material-ui/core/styles";
+import Drawer from "@material-ui/core/Drawer";
+import List from "@material-ui/core/List";
+import Divider from "@material-ui/core/Divider";
+import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import ListItemText from "@material-ui/core/ListItemText";
+import { makeVar, useReactiveVar } from "@apollo/client";
+import { useHistory } from "react-router-dom";
+
+export const mainMenuWidth = 240;
+
+const useStyles = makeStyles((theme: Theme) =>
+ createStyles({
+ drawer: {
+ width: mainMenuWidth,
+ flexShrink: 0,
+ },
+ drawerPaper: {
+ width: mainMenuWidth,
+ },
+ drawerHeader: {
+ display: "flex",
+ alignItems: "center",
+ padding: theme.spacing(0, 1),
+ // necessary for content to be below app bar
+ ...theme.mixins.toolbar,
+ justifyContent: "flex-end",
+ },
+ })
+);
+
+export const mainMenuOpen = makeVar
(false);
+
+export interface MenuOption {
+ title: string;
+ path: string;
+ icon: JSX.Element;
+}
+
+interface MainMenuProps {
+ options: Array;
+}
+
+export function MainMenu(props: MainMenuProps): ReactElement {
+ const classes = useStyles();
+ const history = useHistory();
+ const open = useReactiveVar(mainMenuOpen);
+
+ const handleClose = () => {
+ mainMenuOpen(false);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+ {props.options.map((option) => (
+ history.push(option.path)}
+ >
+ {option.icon}
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/redaktions-app/src/components/MainPageCandidate.tsx b/redaktions-app/src/components/MainPageCandidate.tsx
deleted file mode 100644
index 32917a7..0000000
--- a/redaktions-app/src/components/MainPageCandidate.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Container } from "@material-ui/core";
-import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-import QuestionAnswersList from "./QuestionAnswerList";
-
-const useStyles = makeStyles((theme) => ({
- container: {
- paddingTop: theme.spacing(4),
- paddingBottom: theme.spacing(4),
- flexDirection: "column",
- },
-}));
-
-interface MainPageCandidateProps {
- personRowId: number;
-}
-
-export function MainPageCandidate(
- props: MainPageCandidateProps
-): React.ReactElement {
- const classes = useStyles();
- return (
-
-
-
- );
-}
diff --git a/redaktions-app/src/components/MainPageEditor.tsx b/redaktions-app/src/components/MainPageEditor.tsx
deleted file mode 100644
index 6417d1b..0000000
--- a/redaktions-app/src/components/MainPageEditor.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Container } from "@material-ui/core";
-import QuestionList from "./QuestionList";
-import CategoryList from "./CategoryList";
-import { Copyright } from "./Copyright";
-import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-
-const useStyles = makeStyles((theme) => ({
- container: {
- paddingTop: theme.spacing(4),
- paddingBottom: theme.spacing(4),
- flexDirection: "column",
- },
-}));
-
-export function MainPageEditor(): React.ReactElement {
- const classes = useStyles();
-
- return (
-
-
-
-
-
- );
-}
diff --git a/redaktions-app/src/components/MainPageUser.tsx b/redaktions-app/src/components/MainPageUser.tsx
deleted file mode 100644
index acf1665..0000000
--- a/redaktions-app/src/components/MainPageUser.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Container } from "@material-ui/core";
-import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
-
-const useStyles = makeStyles((theme) => ({
- container: {
- paddingTop: theme.spacing(4),
- paddingBottom: theme.spacing(4),
- flexDirection: "column",
- },
-}));
-
-export function MainPageUser(): React.ReactElement {
- const classes = useStyles();
-
- return (
-
- Sorry, für dich gibt es hier leider nichts zu sehen...
-
- );
-}
diff --git a/redaktions-app/src/components/PersonCard.tsx b/redaktions-app/src/components/PersonCard.tsx
new file mode 100644
index 0000000..89509d0
--- /dev/null
+++ b/redaktions-app/src/components/PersonCard.tsx
@@ -0,0 +1,59 @@
+import { Avatar, Paper, Typography } from "@material-ui/core";
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import ChangeRoleMenu from "./ChangeRoleMenu";
+import { UppercaseUserRole } from "../jwt/jwt";
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ width: "100%",
+ marginBottom: theme.spacing(1),
+ display: "flex",
+ flexDirection: "row",
+ alignItems: "center",
+ },
+ avatar: {
+ margin: theme.spacing(1),
+ },
+ title: {
+ marginLeft: theme.spacing(1),
+ width: "100%",
+ },
+ editButton: {
+ margin: theme.spacing(1),
+ },
+}));
+
+interface PersonCardProps {
+ firstName: string;
+ lastName: string;
+ userRole: UppercaseUserRole;
+ userRowId: number;
+ loggedInUserRowId: number;
+}
+
+export default function PersonCard(props: PersonCardProps): React.ReactElement {
+ const classes = useStyles();
+ const userRole = props.userRole;
+ const currentUserRowId = props.userRowId;
+ const getInitials = (): string => {
+ const initials =
+ (props.firstName.charAt(0) || "") + (props.lastName.charAt(0) || "");
+ return initials ? initials.toUpperCase() : "?";
+ };
+
+ const fullName = `${props.firstName} ${props.lastName}`.trim();
+ return (
+
+
+ {getInitials()}
+
+ {fullName}
+
+
+ );
+}
diff --git a/redaktions-app/src/components/ProfileMenu.tsx b/redaktions-app/src/components/ProfileMenu.tsx
new file mode 100644
index 0000000..4d01afa
--- /dev/null
+++ b/redaktions-app/src/components/ProfileMenu.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { IconButton, MenuItem } from "@material-ui/core";
+import AccountCircle from "@material-ui/icons/AccountCircle";
+import Menu from "@material-ui/core/Menu";
+import { logoutUser } from "../jwt/jwt";
+
+export function ProfileMenu(): React.ReactElement {
+ const [anchorEl, setAnchorEl] = React.useState(null);
+ const open = Boolean(anchorEl);
+
+ const handleMenu = (event: React.MouseEvent) => {
+ setAnchorEl(event.currentTarget);
+ };
+
+ const handleClose = () => {
+ setAnchorEl(null);
+ };
+
+ return (
+
+
+
+
+
+
+ );
+}
diff --git a/redaktions-app/src/components/QuestionAnswerList.tsx b/redaktions-app/src/components/QuestionAnswerList.tsx
index f20e737..79030c4 100644
--- a/redaktions-app/src/components/QuestionAnswerList.tsx
+++ b/redaktions-app/src/components/QuestionAnswerList.tsx
@@ -20,7 +20,7 @@ const useStyles = makeStyles((theme) => ({
}));
interface QuestionAnswerListProps {
- personRowId: number;
+ loggedInPersonRowId: number;
}
export default function QuestionAnswersList(
@@ -32,7 +32,7 @@ export default function QuestionAnswersList(
GetAllQuestionAnswersVariables
>(GET_ALL_QUESTION_ANSWERS, {
variables: {
- personRowId: props.personRowId,
+ personRowId: props.loggedInPersonRowId,
},
}).data?.allQuestions.nodes;
@@ -45,7 +45,7 @@ export default function QuestionAnswersList(
{questionAnswers?.map((question) => (
))}
diff --git a/redaktions-app/src/components/QuestionList.tsx b/redaktions-app/src/components/QuestionList.tsx
index 148cca9..9e3b596 100644
--- a/redaktions-app/src/components/QuestionList.tsx
+++ b/redaktions-app/src/components/QuestionList.tsx
@@ -28,8 +28,9 @@ const useStyles = makeStyles((theme) => ({
}));
export default function QuestionList(): React.ReactElement {
- const questions = useQuery(GET_ALL_QUESTIONS)
- .data?.allQuestions.nodes;
+ const questions =
+ useQuery(GET_ALL_QUESTIONS).data
+ ?.allQuestions.nodes;
const classes = useStyles();
const handleAddButtonClick = () => {
diff --git a/redaktions-app/src/components/SignIn.tsx b/redaktions-app/src/components/SignIn.tsx
index 1061464..ddb1d00 100644
--- a/redaktions-app/src/components/SignIn.tsx
+++ b/redaktions-app/src/components/SignIn.tsx
@@ -57,7 +57,7 @@ export default function SignIn(): React.ReactElement {
onCompleted(data) {
if (data.authenticate.jwtToken) {
localStorage.setItem("token", data.authenticate.jwtToken);
- history.replace("/");
+ window.location.reload();
} else {
setError("Wrong username or password.");
}
@@ -83,10 +83,9 @@ export default function SignIn(): React.ReactElement {
noValidate
onSubmit={(event) => {
event.preventDefault();
- // fixme: logging?????
login({
variables: { email: email, password: password },
- }).catch((error) => console.log(error));
+ }).catch((error) => setError(error));
}}
>
{
- let result = "Sign-up failed because of the following reason(s): ";
- if (isEmailAlreadyUsed(error)) {
- result += "The E-Mail is already in use. ";
- }
- if (isFirstNameInvalid(error)) {
- result += "The provided 'First Name' is invalid. ";
- }
- if (isLastNameInvalid(error)) {
- result += "The provided 'Last Name' is invalid. ";
- }
- if (isPasswordInvalid(error)) {
- result += "The provided password is invalid. ";
- }
- return result;
-};
-
const isEmailAlreadyUsed = (error: ApolloError): boolean => {
const errorMessage = error.message.toLowerCase();
@@ -53,6 +36,23 @@ const isPasswordInvalid = (error: ApolloError): boolean => {
return errorMessage.includes("invalid") && errorMessage.includes("password");
};
+const parseErrorMessage = (error: ApolloError): string => {
+ let result = "Sign-up failed because of the following reason(s): ";
+ if (isEmailAlreadyUsed(error)) {
+ result += "The E-Mail is already in use. ";
+ }
+ if (isFirstNameInvalid(error)) {
+ result += "The provided 'First Name' is invalid. ";
+ }
+ if (isLastNameInvalid(error)) {
+ result += "The provided 'Last Name' is invalid. ";
+ }
+ if (isPasswordInvalid(error)) {
+ result += "The provided password is invalid. ";
+ }
+ return result;
+};
+
export const errorHandler = (
error: undefined | ApolloError
): undefined | SignUpError => {
diff --git a/redaktions-app/src/components/UserManagement.tsx b/redaktions-app/src/components/UserManagement.tsx
new file mode 100644
index 0000000..af0270c
--- /dev/null
+++ b/redaktions-app/src/components/UserManagement.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import { Paper, Typography } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import PersonCard from "./PersonCard";
+import { useQuery } from "@apollo/client";
+import {
+ BasicPersonResponse,
+ GET_PERSONS_SORTED_BY_ROLE,
+ GetPersonsSortedByRoleResponse,
+} from "../backend/queries/person";
+
+const useStyles = makeStyles((theme) => ({
+ root: {
+ width: "100%",
+ padding: theme.spacing(1),
+ marginBottom: theme.spacing(3),
+ },
+}));
+
+interface UserManagementProps {
+ loggedInPersonRowId: number;
+}
+
+export function UserManagement(props: UserManagementProps): React.ReactElement {
+ const classes = useStyles();
+ const persons = useQuery(
+ GET_PERSONS_SORTED_BY_ROLE
+ ).data;
+
+ const convertPersonNodeToPersonCard = (
+ person: BasicPersonResponse
+ ): JSX.Element => {
+ return (
+
+ );
+ };
+
+ return (
+
+
+
+ Redaktion
+
+ {persons?.editors.nodes.map(convertPersonNodeToPersonCard)}
+
+
+
+ KandidatInnen
+
+ {persons?.candidates.nodes.map(convertPersonNodeToPersonCard)}
+
+
+
+ Andere registrierte Personen
+
+ {persons?.users.nodes.map(convertPersonNodeToPersonCard)}
+
+