diff --git a/account/src/User/ConfirmEmail.js b/account/src/User/ConfirmEmail.js index 9e143f9..a6944fd 100644 --- a/account/src/User/ConfirmEmail.js +++ b/account/src/User/ConfirmEmail.js @@ -28,7 +28,7 @@ const ConfirmEmail = (props) => { useEffect(() => { checkConfirmation(userId, token); - }, []); + }, [userId, token]); const dimmerProps = { active: loading }; diff --git a/account/src/User/ConfirmEmailContainer.js b/account/src/User/ConfirmEmailContainer.js deleted file mode 100644 index 1391bcb..0000000 --- a/account/src/User/ConfirmEmailContainer.js +++ /dev/null @@ -1,14 +0,0 @@ -import { connect } from "react-redux" -import ConfirmEmail from "./ConfirmEmail" -import * as userActions from "./user-actions" - -const mapStateToProps = (state) => { - return { - user: state.user - } -} - -export default connect( - mapStateToProps, - userActions -)(ConfirmEmail) diff --git a/account/src/User/Login.js b/account/src/User/Login.js index 5b4ce20..97418d9 100644 --- a/account/src/User/Login.js +++ b/account/src/User/Login.js @@ -1,8 +1,8 @@ -import React, { useEffect, useState, } from "react"; +import { useState } from "react"; import { useNavigate, useSearchParams, Link } from 'react-router-dom'; import { loginUser } from "../features/user/userSlice"; -import { useSelector, useDispatch } from 'react-redux' +import { useDispatch } from 'react-redux' import { Container, Header, @@ -33,7 +33,7 @@ const Login = (props) => { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const navigate = useNavigate(); - let [searchParams, setSearchParams] = useSearchParams(); + let [searchParams] = useSearchParams(); const nextLocation = searchParams.get("nextLocation"); const dispatch = useDispatch(); diff --git a/account/src/User/LoginContainer.js b/account/src/User/LoginContainer.js deleted file mode 100644 index 7035815..0000000 --- a/account/src/User/LoginContainer.js +++ /dev/null @@ -1,35 +0,0 @@ -import { connect } from "react-redux" -import * as userActions from "./user-actions" -import Login from "./Login" -import queryString from '../query-string'; - - -// Function passed in to `connect` to subscribe to Redux store updates. -// Any time it updates, mapStateToProps is called. -// The second argument "ownProps" contains props passed to the component -const mapStateToProps = (state, props) => { - - let nextPathname = false; - - try {nextPathname = props.location.state.nextPathname} - catch(err) {} - const uri = queryString.parse(props.location.search); - let nextLocation = uri['nextLocation']; - - return { - - user: state.user, - nextPathname, // this prop passed in by React Router - nextLocation - } -} - - - -// Connects React component to the redux store -// It does not modify the component class passed to it -// Instead, it returns a new, connected component class, for you to use. -export default connect( - mapStateToProps, - userActions -)(Login) diff --git a/account/src/User/Profile.js b/account/src/User/Profile.js index 2017748..3fdca4d 100644 --- a/account/src/User/Profile.js +++ b/account/src/User/Profile.js @@ -1,6 +1,5 @@ -import React, { useEffect, useState, } from "react"; +import { useState, } from "react"; import { useSelector, useDispatch } from 'react-redux' -import { useNavigate, useSearchParams, Link } from 'react-router-dom'; import UserForm from "./UserForm"; import { Container, diff --git a/account/src/User/ProfileContainer.js b/account/src/User/ProfileContainer.js deleted file mode 100644 index 08bf0cd..0000000 --- a/account/src/User/ProfileContainer.js +++ /dev/null @@ -1,15 +0,0 @@ -import { connect } from "react-redux" -import Profile from "./Profile" -import * as userActions from "./user-actions" - -const mapStateToProps = (state) => { - return { - user: state.user, - isWaiting: state.user.isWaiting - } -} - -export default connect( - mapStateToProps, - userActions -)(Profile) diff --git a/account/src/User/Register.js b/account/src/User/Register.js index 49ef964..c6c408f 100644 --- a/account/src/User/Register.js +++ b/account/src/User/Register.js @@ -1,7 +1,7 @@ -import React, { useState } from "react"; +import { useState } from "react"; import { registerUser } from "../features/user/userSlice"; -import { useNavigate, useSearchParams, Link } from 'react-router-dom'; -import { useSelector, useDispatch } from 'react-redux' +import { useNavigate } from 'react-router-dom'; +import { useDispatch } from 'react-redux' import { Container, Header, diff --git a/account/src/User/RegisterContainer.js b/account/src/User/RegisterContainer.js deleted file mode 100644 index ffd97ef..0000000 --- a/account/src/User/RegisterContainer.js +++ /dev/null @@ -1,14 +0,0 @@ -import { connect } from "react-redux" -import * as userActions from "./user-actions" -import Register from "./Register" - -const mapStateToProps = (state) => { - return { - isWaiting: state.user.isWaiting - } -} - -export default connect( - mapStateToProps, - userActions -)(Register) diff --git a/account/src/User/ResetPasswordContainer.js b/account/src/User/ResetPasswordContainer.js deleted file mode 100644 index 1713e88..0000000 --- a/account/src/User/ResetPasswordContainer.js +++ /dev/null @@ -1,14 +0,0 @@ -import { connect } from "react-redux" -import ResetPassword from "./ResetPassword" -import * as userActions from "./user-actions" - -const mapStateToProps = (state) => { - return { - user: state.user - } -} - -export default connect( - mapStateToProps, - userActions -)(ResetPassword) diff --git a/account/src/User/SendResetPassword.js b/account/src/User/SendResetPassword.js index 41e17f8..53c9b1d 100644 --- a/account/src/User/SendResetPassword.js +++ b/account/src/User/SendResetPassword.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import { useState } from "react"; import { Form, Grid, @@ -9,14 +9,12 @@ import { } from "semantic-ui-react"; import { sendResetPassword } from "../features/user/userSlice"; import { Link } from "react-router-dom"; -import { useParams, useNavigate } from 'react-router-dom'; import { useDispatch } from 'react-redux' -const SendResetPassword = (props) => { +const SendResetPassword = () => { const dispatch = useDispatch(); - const navigate = useNavigate(); const [checkInputMessages, setCheckInputMessages] = useState(""); const [email, setEmail] = useState(""); const [emailError, setEmailError] = useState(false); diff --git a/account/src/User/SendResetPasswordContainer.js b/account/src/User/SendResetPasswordContainer.js deleted file mode 100644 index 93f0209..0000000 --- a/account/src/User/SendResetPasswordContainer.js +++ /dev/null @@ -1,14 +0,0 @@ -import { connect } from "react-redux" -import SendResetPassword from "./SendResetPassword" -import * as userActions from "./user-actions" - -const mapStateToProps = (state) => { - return { - user: state.user - } -} - -export default connect( - mapStateToProps, - userActions -)(SendResetPassword) diff --git a/account/src/User/SentConfirmEmailContainer.js b/account/src/User/SentConfirmEmailContainer.js deleted file mode 100644 index 5b424bb..0000000 --- a/account/src/User/SentConfirmEmailContainer.js +++ /dev/null @@ -1,14 +0,0 @@ -import { connect } from "react-redux" -import SentConfirmEmail from "./SentConfirmEmail" -import * as userActions from "./user-actions" - -const mapStateToProps = (state) => { - return { - user: state.user - } -} - -export default connect( - mapStateToProps, - userActions -)(SentConfirmEmail) diff --git a/account/src/User/Terms.js b/account/src/User/Terms.js index 484911c..8b82abc 100644 --- a/account/src/User/Terms.js +++ b/account/src/User/Terms.js @@ -1,84 +1,63 @@ -import React, { Component } from "react"; -import { - Segment, - Container, - Button -} from "semantic-ui-react"; +import React, { useState } from "react"; +import { Segment, Container, Button } from "semantic-ui-react"; -class Terms extends Component { - constructor(props) { - super(props); - this.handleAccept = this.handleAccept.bind(this); - this.handleDecline = this.handleDecline.bind(this); - } +const Terms = ({ user, acceptTerms }) => { + const [requestMessage, setRequestMessage] = useState(null); + const handleAccept = () => { + acceptTerms(user.userId).then((requestMessage) => { + if (requestMessage) { + setRequestMessage(requestMessage); + } + }); + }; + const handleDecline = () => {}; - handleAccept() { - this.props - .acceptTerms(this.props.user.userId) - .then(requestMessage => { - if (requestMessage) { - // report to the user is there was a problem during registration - this.setState({ - requestMessage - }); - } - }); - } + return ( +
+ + + The agreement is useful to The Guardian to set the rules and guidelines for visitors, users and customers: - handleDecline() { + Registration: inform users that they must agree to a set of rules when they register on your website or mobile app + Disable or terminate accounts: inform users that their accounts can be disabled or terminated if abuses happen on your website or mobile app, e.g. spamming, swearing etc. + Owner of content: notify users that you, the company, is the owner of the content appearing on your website or mobile app – except in cases where other users can post content (upload, share, create etc.) where the users are the owners of such content + Changes to the agreement: users should be informed about upcoming changes to the agreement before the changes are applied. + DMCA: The Guardian is also informing owners of copyright content that they can submit a DMCA notice to the website if they found infringing content in their DMCA clause. + And more + These are only a few examples of what kind of clauses and disclosures you can add in this kind of agreement. - } + What is a Terms of Use + While a Terms of Use is recommended to have, it’s not mandatory by law as the Privacy Policy agreement is required. - render() { - return ( -
+ This agreement serves a single purpose: to inform users of rules that they must agree to. A Privacy Policy must inform users about your privacy practices (what data you collect, why, how, etc.) - - - The agreement is useful to The Guardian to set the rules and guidelines for visitors, users and customers: + The definition of a Terms of Use agreement is simple: - Registration: inform users that they must agree to a set of rules when they register on your website or mobile app - Disable or terminate accounts: inform users that their accounts can be disabled or terminated if abuses happen on your website or mobile app, e.g. spamming, swearing etc. - Owner of content: notify users that you, the company, is the owner of the content appearing on your website or mobile app – except in cases where other users can post content (upload, share, create etc.) where the users are the owners of such content - Changes to the agreement: users should be informed about upcoming changes to the agreement before the changes are applied. - DMCA: The Guardian is also informing owners of copyright content that they can submit a DMCA notice to the website if they found infringing content in their DMCA clause. - And more - These are only a few examples of what kind of clauses and disclosures you can add in this kind of agreement. + Terms of service (also known as terms of use and terms and conditions, commonly abbreviated as ToS or TOS and TOU) are rules which one must agree to abide by in order to use a service. - What is a Terms of Use - While a Terms of Use is recommended to have, it’s not mandatory by law as the Privacy Policy agreement is required. + Wikipedia + Because this agreement simply acts as a contract between you, the company, and the users using or accessing your website or mobile app, the agreement can be named as you’d like: - This agreement serves a single purpose: to inform users of rules that they must agree to. A Privacy Policy must inform users about your privacy practices (what data you collect, why, how, etc.) - - The definition of a Terms of Use agreement is simple: - - Terms of service (also known as terms of use and terms and conditions, commonly abbreviated as ToS or TOS and TOU) are rules which one must agree to abide by in order to use a service. - - Wikipedia - Because this agreement simply acts as a contract between you, the company, and the users using or accessing your website or mobile app, the agreement can be named as you’d like: - - Terms of Use (ToU) - Terms of Service (ToS) - Terms and Conditions (T&C) - User Agreement - Conditions of Use - And so on - The “Conditions of Use” of Amazon could be named “Terms of Use”: + Terms of Use (ToU) + Terms of Service (ToS) + Terms and Conditions (T&C) + User Agreement + Conditions of Use + And so on + The “Conditions of Use” of Amazon could be named “Terms of Use”: - - - - - - -
- ); - } -} + + + + + + +
+ ); +}; + export default Terms; diff --git a/account/src/User/TermsContainer.js b/account/src/User/TermsContainer.js deleted file mode 100644 index b2e3f4a..0000000 --- a/account/src/User/TermsContainer.js +++ /dev/null @@ -1,14 +0,0 @@ -import { connect } from "react-redux" -import * as userActions from "./user-actions" -import Terms from "./Terms" - -function mapStateToProps(state) { - return { - user: state.user - } -} - -export default connect( - mapStateToProps, - userActions -)(Terms) diff --git a/account/src/User/UserForm.js b/account/src/User/UserForm.js index 5e635f2..c9618f9 100644 --- a/account/src/User/UserForm.js +++ b/account/src/User/UserForm.js @@ -27,7 +27,7 @@ const UserForm = (props) => { const [locationError, setLocationError] = useState(false); const [passwordError, setPasswordError] = useState(false); const [confirmPasswordError, setConfirmPasswordError] = useState(false); - const [isEditing, setIsEditing] = useState(props.isEditing); + const [isEditing] = useState(props.isEditing); const [changed, setChanged] = useState(false); const requestMessage = props.requestMessage; @@ -156,7 +156,7 @@ const UserForm = (props) => { ); } - const buttonDisabled = changed?{}:{disabled:true} + return (
{ const navigate = useNavigate(); const { email, userId } = useSelector((state) => state.user); - const handleSendConfirmEmail = async (event) => { - const message = await dispatch(sendConfirmEmail(userId)).unwrap(); + const handleSendConfirmEmail = async () => { + await dispatch(sendConfirmEmail(userId)).unwrap(); navigate("/sent-confirm-email") }; diff --git a/account/src/User/WaitConfirmEmailContainer.js b/account/src/User/WaitConfirmEmailContainer.js deleted file mode 100644 index 8ca3506..0000000 --- a/account/src/User/WaitConfirmEmailContainer.js +++ /dev/null @@ -1,14 +0,0 @@ -import { connect } from "react-redux" -import WaitConfirmEmail from "./WaitConfirmEmail" -import * as userActions from "./user-actions" - -const mapStateToProps = (state) => { - return { - user: state.user - } -} - -export default connect( - mapStateToProps, - userActions -)(WaitConfirmEmail) diff --git a/account/src/features/api/apiSlice.js b/account/src/features/api/apiSlice.js index 3c38fc4..9d6e184 100644 --- a/account/src/features/api/apiSlice.js +++ b/account/src/features/api/apiSlice.js @@ -1,24 +1,7 @@ // Import the RTK Query methods from the React-specific entry point import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react' -import { createSelector } from '@reduxjs/toolkit' -/* -const axiosBaseQuery = - ({ baseUrl } = { baseUrl: '' }) => - async ({ url, method, data, params }) => { - try { - const result = await axios({ url: baseUrl + url, method, data, params }) - return { data: result.data } - } catch (axiosError) { - let err = axiosError - return { - error: { - status: err.response?.status, - data: err.response?.data || err.message, - }, - } - } - }*/ + // Define our single API slice object export const apiSlice = createApi({ @@ -56,9 +39,9 @@ export const apiSlice = createApi({ async onQueryStarted(group, { dispatch, queryFulfilled }) { try { const { data: updatedGroup } = await queryFulfilled - const patchResult = dispatch( + dispatch( apiSlice.util.updateQueryData('getGroups', updatedGroup.shortName, (groups) => { - const groupIndex = groups.findIndex((obj => obj.groupId == updatedGroup.groupId)); + const groupIndex = groups.findIndex((obj => obj.groupId === updatedGroup.groupId)); groups[groupIndex] = updatedGroup; }) ) @@ -75,7 +58,7 @@ export const apiSlice = createApi({ async onQueryStarted(group, { dispatch, queryFulfilled }) { try { const { data: newGroup } = await queryFulfilled; - const patchResult = dispatch( + dispatch( apiSlice.util.updateQueryData('getGroups', newGroup.shortName, (groups) => { groups.push(newGroup); }) @@ -93,9 +76,9 @@ export const apiSlice = createApi({ async onQueryStarted(group, { dispatch, queryFulfilled }) { try { await queryFulfilled - const patchResult = dispatch( + dispatch( apiSlice.util.updateQueryData('getGroups', group.shortName, (groups) => { - const groupIndex = groups.findIndex((obj => obj.groupId == group.groupId)); + const groupIndex = groups.findIndex((obj => obj.groupId === group.groupId)); groups.splice(groupIndex,1); }) ) @@ -123,7 +106,7 @@ export const apiSlice = createApi({ async onQueryStarted({shortName,file}, { dispatch, queryFulfilled }) { try { const { data: newTalkgroups } = await queryFulfilled; - const patchResult = dispatch( + dispatch( apiSlice.util.updateQueryData('getTalkgroups', shortName, (talkgroups) => { talkgroups.length = 0; // Clear your array talkgroups.push(...newTalkgroups); @@ -147,7 +130,7 @@ export const apiSlice = createApi({ async onQueryStarted(system, { dispatch, queryFulfilled }) { try { const { data: newSystem } = await queryFulfilled - const patchResult = dispatch( + dispatch( apiSlice.util.updateQueryData('getSystems', undefined, (systemsData) => { const systems = systemsData.systems; systems.push(newSystem); @@ -166,10 +149,10 @@ export const apiSlice = createApi({ async onQueryStarted(system, { dispatch, queryFulfilled }) { try { const { data: updatedSystem } = await queryFulfilled - const patchResult = dispatch( + dispatch( apiSlice.util.updateQueryData('getSystems', undefined, (systemsData) => { const systems = systemsData.systems; - const systemIndex = systems.findIndex((obj => obj.shortName == updatedSystem.shortName)); + const systemIndex = systems.findIndex((obj => obj.shortName === updatedSystem.shortName)); systems[systemIndex] = updatedSystem; }) ) @@ -185,10 +168,10 @@ export const apiSlice = createApi({ async onQueryStarted(shortName, { dispatch, queryFulfilled }) { try { await queryFulfilled - const patchResult = dispatch( + dispatch( apiSlice.util.updateQueryData('getSystems', undefined, (systemsData) => { const systems = systemsData.systems; - const systemIndex = systems.findIndex((obj => obj.shortName == shortName)); + const systemIndex = systems.findIndex((obj => obj.shortName === shortName)); systems.splice(systemIndex, 1); }) ) diff --git a/account/src/features/user/userSlice.js b/account/src/features/user/userSlice.js index c585bf3..683163e 100644 --- a/account/src/features/user/userSlice.js +++ b/account/src/features/user/userSlice.js @@ -1,7 +1,5 @@ import { createSlice, - createEntityAdapter, - createSelector, createAsyncThunk } from '@reduxjs/toolkit' @@ -145,7 +143,6 @@ export const resetPassword = createAsyncThunk( export const sendResetPassword = createAsyncThunk( 'user/sendResetPassword', async (data) => { - const {userId, token, password} = data; const url = process.env.REACT_APP_ACCOUNT_SERVER + "/api/send-reset-password" const res = await fetch(url, { method: 'POST',