mirror of
https://github.com/openmhz/trunk-server.git
synced 2026-11-12 08:47:40 -05:00
Gettign going
This commit is contained in:
Luke Berndt
73
admin/src/features/api/apiSlice.js
Normal file
73
admin/src/features/api/apiSlice.js
Normal file
@@ -0,0 +1,73 @@
|
||||
// Import the RTK Query methods from the React-specific entry point
|
||||
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
|
||||
import { createSelector} from '@reduxjs/toolkit'
|
||||
|
||||
|
||||
// Define our single API slice object
|
||||
export const apiSlice = createApi({
|
||||
// The cache reducer expects to be added at `state.api` (already default - this is optional)
|
||||
reducerPath: 'api',
|
||||
// All of our requests will have URLs starting with '/fakeApi'
|
||||
baseQuery: fetchBaseQuery({ baseUrl: process.env.REACT_APP_ADMIN_SERVER}),
|
||||
// The "endpoints" represent operations and requests for this server
|
||||
endpoints: builder => ({
|
||||
// The `getPosts` endpoint is a "query" operation that returns data
|
||||
getTalkgroups: builder.query({
|
||||
// The URL for the request is '/fakeApi/posts'
|
||||
query: (shortName) => ({ url: `/talkgroups/${shortName}`, credentials: "include" })
|
||||
}),
|
||||
getGroups: builder.query({
|
||||
// The URL for the request is '/fakeApi/posts'
|
||||
query: (shortName) => ({ url: `/groups/${shortName}`, credentials: "include" })
|
||||
}),
|
||||
getErrors: builder.query({
|
||||
// The URL for the request is '/fakeApi/posts'
|
||||
query: (shortName) => ({ url: `${process.env.REACT_APP_BACKEND_SERVER}/${shortName}/errors`})
|
||||
}),
|
||||
updateGroup: builder.mutation({
|
||||
query: (group) => ({
|
||||
url: `/groups/${group.shortName}/${group._id}`,
|
||||
method: 'POST',
|
||||
credentials: "include",
|
||||
body: group,
|
||||
}),
|
||||
async onQueryStarted(group, { dispatch, queryFulfilled }) {
|
||||
try {
|
||||
const { data: updatedGroup } = await queryFulfilled
|
||||
const patchResult = dispatch(
|
||||
apiSlice.util.updateQueryData('getGroups', updatedGroup.shortName, (groups) => {
|
||||
const groupIndex = groups.findIndex((obj => obj.groupId == updatedGroup.groupId));
|
||||
groups[groupIndex] = updatedGroup;
|
||||
})
|
||||
)
|
||||
} catch {}
|
||||
},
|
||||
}),
|
||||
createGroup: builder.mutation({
|
||||
query: (group) => ({
|
||||
url: `/groups/${group.shortName}`,
|
||||
method: 'POST',
|
||||
credentials: "include",
|
||||
body: group,
|
||||
}),
|
||||
async onQueryStarted(group, { dispatch, queryFulfilled }) {
|
||||
try {
|
||||
const { data: newGroup } = await queryFulfilled;
|
||||
const patchResult = dispatch(
|
||||
apiSlice.util.updateQueryData('getGroups', newGroup.shortName, (groups) => {
|
||||
groups.push(newGroup);
|
||||
})
|
||||
)
|
||||
} catch {}
|
||||
},
|
||||
}),
|
||||
getSystems: builder.query({
|
||||
// The URL for the request is '/fakeApi/posts'
|
||||
query: () => ({ url: `/systems`, credentials: "include" })
|
||||
})
|
||||
|
||||
})
|
||||
})
|
||||
|
||||
// Export the auto-generated hook for the `getPosts` query endpoint
|
||||
export const { useGetGroupsQuery, useGetSystemsQuery, useGetTalkgroupsQuery, useGetErrorsQuery} = apiSlice
|
||||
@@ -1,60 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import {
|
||||
decrement,
|
||||
increment,
|
||||
incrementByAmount,
|
||||
incrementAsync,
|
||||
selectCount,
|
||||
} from './counterSlice';
|
||||
import styles from './Counter.module.css';
|
||||
|
||||
export function Counter() {
|
||||
const count = useSelector(selectCount);
|
||||
const dispatch = useDispatch();
|
||||
const [incrementAmount, setIncrementAmount] = useState('2');
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.row}>
|
||||
<button
|
||||
className={styles.button}
|
||||
aria-label="Increment value"
|
||||
onClick={() => dispatch(increment())}
|
||||
>
|
||||
+
|
||||
</button>
|
||||
<span className={styles.value}>{count}</span>
|
||||
<button
|
||||
className={styles.button}
|
||||
aria-label="Decrement value"
|
||||
onClick={() => dispatch(decrement())}
|
||||
>
|
||||
-
|
||||
</button>
|
||||
</div>
|
||||
<div className={styles.row}>
|
||||
<input
|
||||
className={styles.textbox}
|
||||
aria-label="Set increment amount"
|
||||
value={incrementAmount}
|
||||
onChange={e => setIncrementAmount(e.target.value)}
|
||||
/>
|
||||
<button
|
||||
className={styles.button}
|
||||
onClick={() =>
|
||||
dispatch(incrementByAmount(Number(incrementAmount) || 0))
|
||||
}
|
||||
>
|
||||
Add Amount
|
||||
</button>
|
||||
<button
|
||||
className={styles.asyncButton}
|
||||
onClick={() => dispatch(incrementAsync(Number(incrementAmount) || 0))}
|
||||
>
|
||||
Add Async
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.row:not(:last-child) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 78px;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
margin-top: 2px;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
}
|
||||
|
||||
.button {
|
||||
appearance: none;
|
||||
background: none;
|
||||
font-size: 32px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
outline: none;
|
||||
border: 2px solid transparent;
|
||||
color: rgb(112, 76, 182);
|
||||
padding-bottom: 4px;
|
||||
cursor: pointer;
|
||||
background-color: rgba(112, 76, 182, 0.1);
|
||||
border-radius: 2px;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.textbox {
|
||||
font-size: 32px;
|
||||
padding: 2px;
|
||||
width: 64px;
|
||||
text-align: center;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.button:hover, .button:focus {
|
||||
border: 2px solid rgba(112, 76, 182, 0.4);
|
||||
}
|
||||
|
||||
.button:active {
|
||||
background-color: rgba(112, 76, 182, 0.2);
|
||||
}
|
||||
|
||||
.asyncButton {
|
||||
composes: button;
|
||||
position: relative;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.asyncButton:after {
|
||||
content: "";
|
||||
background-color: rgba(112, 76, 182, 0.15);
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
transition: width 1s linear, opacity 0.5s ease 1s;
|
||||
}
|
||||
|
||||
.asyncButton:active:after {
|
||||
width: 0%;
|
||||
opacity: 1;
|
||||
transition: 0s
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
import { createSlice } from '@reduxjs/toolkit';
|
||||
|
||||
export const counterSlice = createSlice({
|
||||
name: 'counter',
|
||||
initialState: {
|
||||
value: 0,
|
||||
},
|
||||
reducers: {
|
||||
increment: state => {
|
||||
// Redux Toolkit allows us to write "mutating" logic in reducers. It
|
||||
// doesn't actually mutate the state because it uses the Immer library,
|
||||
// which detects changes to a "draft state" and produces a brand new
|
||||
// immutable state based off those changes
|
||||
state.value += 1;
|
||||
},
|
||||
decrement: state => {
|
||||
state.value -= 1;
|
||||
},
|
||||
incrementByAmount: (state, action) => {
|
||||
state.value += action.payload;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
|
||||
|
||||
// The function below is called a thunk and allows us to perform async logic. It
|
||||
// can be dispatched like a regular action: `dispatch(incrementAsync(10))`. This
|
||||
// will call the thunk with the `dispatch` function as the first argument. Async
|
||||
// code can then be executed and other actions can be dispatched
|
||||
export const incrementAsync = amount => dispatch => {
|
||||
setTimeout(() => {
|
||||
dispatch(incrementByAmount(amount));
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
// The function below is called a selector and allows us to select a value from
|
||||
// the state. Selectors can also be defined inline where they're used instead of
|
||||
// in the slice file. For example: `useSelector((state) => state.counter.value)`
|
||||
export const selectCount = state => state.counter.value;
|
||||
|
||||
export default counterSlice.reducer;
|
||||
15
admin/src/features/group/groupSlice.js
Normal file
15
admin/src/features/group/groupSlice.js
Normal file
@@ -0,0 +1,15 @@
|
||||
const groupSlice = createSlice({
|
||||
name: 'group',
|
||||
initialState: {
|
||||
orderChange: false,
|
||||
isWaiting: false,
|
||||
items: {}
|
||||
},
|
||||
reducers: {
|
||||
},
|
||||
})
|
||||
|
||||
// Extract the action creators object and the reducer
|
||||
const { actions, reducer } = groupSlice
|
||||
// Export the reducer, either as a default or named export
|
||||
export default reducer
|
||||
81
admin/src/features/user/userSlice.js
Normal file
81
admin/src/features/user/userSlice.js
Normal file
@@ -0,0 +1,81 @@
|
||||
import {
|
||||
createSlice,
|
||||
createEntityAdapter,
|
||||
createSelector,
|
||||
createAsyncThunk
|
||||
} from '@reduxjs/toolkit'
|
||||
|
||||
|
||||
export const authenticateUser = createAsyncThunk(
|
||||
'user/authenticate',
|
||||
async ({ getState }) => {
|
||||
const url = process.env.REACT_APP_ACCOUNT_SERVER + "/authenticated"
|
||||
const res = await fetch(url, {
|
||||
method: 'GET',
|
||||
credentials: "include"
|
||||
}).then(
|
||||
(data) => data.json()
|
||||
)
|
||||
return res;
|
||||
}
|
||||
)
|
||||
|
||||
export const logoutUser = createAsyncThunk(
|
||||
'user/logout',
|
||||
async ({ getState }) => {
|
||||
const url = process.env.REACT_APP_ACCOUNT_SERVER + "/logout"
|
||||
const res = await fetch(url, {
|
||||
method: 'GET',
|
||||
credentials: "include"
|
||||
}).then(
|
||||
(data) => data.json()
|
||||
)
|
||||
return res;
|
||||
}
|
||||
)
|
||||
|
||||
export const userSlice = createSlice({
|
||||
name: 'user',
|
||||
initialState: {
|
||||
isWaiting: false,
|
||||
authenticated: false,
|
||||
hasAuthenticated: false,
|
||||
userId: ""
|
||||
},
|
||||
reducers: {
|
||||
increment: (state) => {
|
||||
// Redux Toolkit allows us to write "mutating" logic in reducers. It
|
||||
// doesn't actually mutate the state because it uses the Immer library,
|
||||
// which detects changes to a "draft state" and produces a brand new
|
||||
// immutable state based off those changes
|
||||
state.value += 1
|
||||
},
|
||||
},
|
||||
extraReducers: {
|
||||
[authenticateUser.fulfilled]: (state, data) => {
|
||||
const {payload} = data;
|
||||
if (payload.success) {
|
||||
state.authenticated = true;
|
||||
state.hasAuthenticated = true;
|
||||
state.userId = payload.user.userId;
|
||||
} else {
|
||||
state.authenticated = false;
|
||||
state.hasAuthenticated = true;
|
||||
}
|
||||
},
|
||||
[authenticateUser.rejected]: (state, { payload }) => {
|
||||
state.authenticated = false;
|
||||
state.hasAuthenticated = true;
|
||||
|
||||
},
|
||||
[logoutUser.fulfilled]: (state, { payload }) => {
|
||||
if (payload.success) {
|
||||
state.authenticated = false;
|
||||
state.userId = null;
|
||||
}
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
// Extract the action creators object and the reducer
|
||||
export const userReducer = userSlice.reducer;
|
||||
Reference in New Issue
Block a user