This commit is contained in:
Luke Berndt
2023-03-23 22:15:42 -04:00
parent 13c2112c73
commit ae6cabc7d1
6 changed files with 42 additions and 66 deletions

View File

@@ -1,5 +1,5 @@
import React, { Component } from "react"
import NavigationContainer from "./NavigationContainer"
import Navigation from "./Navigation"
import { Routes, Route } from 'react-router-dom';
import Restricted from "./Restricted"
@@ -15,7 +15,7 @@ const App = (params) => {
const {store} = params;
return (
<div>
<NavigationContainer />
<Navigation/>
<Routes>
<Route path="/about" element={ <Restricted><About/></Restricted>} />
<Route path="/system/:shortName" element={ <Restricted><System/></Restricted>} />

View File

@@ -1,6 +1,8 @@
import React, { Component } from "react";
import { Link } from "react-router-dom";
import { Menu, Dropdown } from "semantic-ui-react";
import React, { useEffect } from "react";
import { useSelector, useDispatch } from 'react-redux'
import { logoutUser } from "../features/user/userSlice";
const navStyle = {
marginBottom: "30px"
@@ -9,47 +11,40 @@ const blankStyle = {
marginBottom: "50px"
};
class Navigation extends Component {
constructor(props) {
super(props);
this._logout = this._logout.bind(this);
}
const Navigation = (props) => {
const dispatch = useDispatch();
const { email } = useSelector((state) => state.user);
_logout = event => {
const logout = event => {
event.preventDefault();
this.props.manualLogout();
dispatch(logoutUser({}));
};
render() {
var profileLink = process.env.REACT_APP_ACCOUNT_SERVER + "/profile";
return (
<div>
{this.props.user.authenticated ? (
<Menu style={navStyle}>
<Menu.Item name="systems" header>
{process.env.REACT_APP_SITE_NAME}
</Menu.Item>
<Menu.Menu position="right">
<Link to="/list-systems">
<Menu.Item name="systems"> Systems</Menu.Item>
</Link>
<Link to="/about">
<Menu.Item name="about">About</Menu.Item>
</Link>
<Dropdown item text={this.props.user.email}>
<Dropdown.Menu>
<Dropdown.Item href={profileLink}>Profile</Dropdown.Item>
<Dropdown.Item onClick={this._logout}>Logout</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Menu.Menu>
</Menu>
) : (
<div style={blankStyle} />
)}
</div>
);
}
var profileLink = process.env.REACT_APP_ACCOUNT_SERVER + "/profile";
return (
<div>
<Menu style={navStyle}>
<Menu.Item name="systems" header>
{process.env.REACT_APP_SITE_NAME}
</Menu.Item>
<Menu.Menu position="right">
<Link to="/list-systems">
<Menu.Item name="systems"> Systems</Menu.Item>
</Link>
<Link to="/about">
<Menu.Item name="about">About</Menu.Item>
</Link>
<Dropdown item text={ email }>
<Dropdown.Menu>
<Dropdown.Item href={profileLink}>Profile</Dropdown.Item>
<Dropdown.Item onClick={logout}>Logout</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</Menu.Menu>
</Menu>
</div>
);
}
export default Navigation;

View File

@@ -1,16 +1,7 @@
// in src/restricted.js
//import React, { Component } from 'react';
import React, { useEffect, useLayoutEffect, useState, useRef, useCallback, useMemo } from "react";
import React, { useEffect} from "react";
import { useSelector, useDispatch } from 'react-redux'
import * as types from "../User/user-constants";
import axios from "axios";
import {
Routes,
Route,
Link,
Navigate,
Outlet,
} from 'react-router-dom';
import { authenticateUser } from "../features/user/userSlice";
/**
* Higher-order component (HOC) to wrap restricted pages

View File

@@ -3,9 +3,7 @@ import { Link, useLocation, useParams, useNavigate } from 'react-router-dom';
import ListTalkgroups from "../Talkgroups/ListTalkgroups.js";
import MessageBox from "../Components/Message.js";
import ListGroups from "../Group/ListGroups.js";
import GroupModal from "../Group/GroupModalContainer.js";
import UpdatePermissionModal from "../Permission/UpdatePermissionModalContainer.js";
import AddPermissionModal from "../Permission/AddPermissionModalContainer.js";
import GroupModal from "../Group/GroupModal.js";
import ErrorChart from "./ResponsiveErrorChart"
import CallChart from "./ResponsiveCallChart"
import { useGetSystemsQuery, useGetTalkgroupsQuery, useGetGroupsQuery, useGetErrorsQuery, useDeleteGroupMutation, useDeleteSystemMutation, useImportTalkgroupsMutation, useSaveGroupOrderMutation } from '../features/api/apiSlice'

View File

@@ -40,7 +40,9 @@ export const userSlice = createSlice({
isWaiting: false,
authenticated: false,
hasAuthenticated: false,
userId: ""
userId: "",
admin: false,
email: "",
},
reducers: {
increment: (state) => {
@@ -58,6 +60,8 @@ export const userSlice = createSlice({
state.authenticated = true;
state.hasAuthenticated = true;
state.userId = payload.user.userId;
state.admin = payload.user.admin;
state.email = payload.user.email;
} else {
state.authenticated = false;
state.hasAuthenticated = true;

View File

@@ -2,24 +2,12 @@
// from https://github.com/supasate/connected-react-router
import { combineReducers } from 'redux'
import { createRouterReducer } from '@lagunovsky/redux-react-router'
import systemReducer from "../System/system-reducer"
import talkgroupReducer from "../Talkgroups/talkgroup-reducer"
import groupReducer from "../Group/group-reducer"
import errorReducer from "../System/error-reducer"
import statisticReducer from "../System/statistic-reducer"
import permissionReducer from "../Permission/permission-reducer"
import { userSlice, userReducer } from '../features/user/userSlice'
import {apiSlice} from "../features/api/apiSlice"
const createRootReducer = (history) => combineReducers({
router: createRouterReducer (history),
system: systemReducer,
statistic: statisticReducer,
talkgroup: talkgroupReducer,
group: groupReducer,
user: userReducer,
error: errorReducer,
permission: permissionReducer,
[apiSlice.reducerPath]: apiSlice.reducer,
})