From 18ad88f683e12b4b7d406c45e8cf8802d19938d6 Mon Sep 17 00:00:00 2001
From: Jorik Schellekens <joriksch@gmail.com>
Date: Thu, 3 Sep 2020 11:17:53 +0200
Subject: [PATCH] Make the remember client option work more intuitively.
---
src/App.scss | 2 +-
src/components/ClientList.tsx | 5 +++--
src/components/ClientSelection.scss | 7 +++----
src/components/ClientSelection.tsx | 26 ++++++++++++++++++++------
src/components/LinkPreview.tsx | 13 ++++++-------
src/contexts/ClientContext.ts | 22 +++++++++-------------
6 files changed, 42 insertions(+), 33 deletions(-)
diff --git a/src/App.scss b/src/App.scss
index 794cdfe..6b61de3 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -20,7 +20,7 @@ limitations under the License.
background-color: $app-background;
background-image: url('./imgs/background.svg');
background-repeat: none;
- background-position: 50% top;
+ background-position: 50% 10%;
}
@mixin spacer {
diff --git a/src/components/ClientList.tsx b/src/components/ClientList.tsx
index 3fdb745..fbef28f 100644
--- a/src/components/ClientList.tsx
+++ b/src/components/ClientList.tsx
@@ -27,11 +27,12 @@ import './ClientList.scss';
interface IProps {
link: SafeLink;
+ rememberSelection: boolean;
}
-const ClientList: React.FC<IProps> = ({ link }: IProps) => {
+const ClientList: React.FC<IProps> = ({ link, rememberSelection }: IProps) => {
const [
- { rememberSelection, showOnlyDeviceClients, showExperimentalClients },
+ { showOnlyDeviceClients, showExperimentalClients },
clientDispatcher,
] = useContext(ClientContext);
const { uaResults } = useContext(UAContext);
diff --git a/src/components/ClientSelection.scss b/src/components/ClientSelection.scss
index 3900f77..4754359 100644
--- a/src/components/ClientSelection.scss
+++ b/src/components/ClientSelection.scss
@@ -17,14 +17,13 @@ limitations under the License.
.advanced {
margin: 0 5%;
+ display: grid;
+ row-gap: 20px;
+
.advancedOptions {
display: flex;
flex-direction: column;
align-items: flex-start;
}
-
- .clientList {
- margin-top: 20px;
- }
}
diff --git a/src/components/ClientSelection.tsx b/src/components/ClientSelection.tsx
index 6a15ad4..794ba0a 100644
--- a/src/components/ClientSelection.tsx
+++ b/src/components/ClientSelection.tsx
@@ -14,12 +14,13 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
import './ClientSelection.scss';
import { ActionType, ClientContext } from '../contexts/ClientContext';
import ClientList from './ClientList';
import { SafeLink } from '../parser/types';
+import Button from './Button';
interface IProps {
link: SafeLink;
@@ -27,17 +28,16 @@ interface IProps {
const ClientSelection: React.FC<IProps> = ({ link }: IProps) => {
const [clientState, clientStateDispatch] = useContext(ClientContext);
+ const [rememberSelection, setRememberSelection] = useState(false);
const options = (
<div className="advancedOptions">
<label>
<input
type="checkbox"
onChange={(): void => {
- clientStateDispatch({
- action: ActionType.ToggleRememberSelection,
- });
+ setRememberSelection(!rememberSelection);
}}
- checked={clientState.rememberSelection}
+ checked={rememberSelection}
/>
Remember my selection for future invites in this browser
</label>
@@ -68,10 +68,24 @@ const ClientSelection: React.FC<IProps> = ({ link }: IProps) => {
</div>
);
+ const clearSelection =
+ clientState.clientId !== null ? (
+ <Button
+ onClick={(): void =>
+ clientStateDispatch({
+ action: ActionType.ClearClient,
+ })
+ }
+ >
+ Clear my default client
+ </Button>
+ ) : null;
+
return (
<div className="advanced">
{options}
- <ClientList link={link} />
+ <ClientList link={link} rememberSelection={rememberSelection} />
+ {clearSelection}
</div>
);
};
diff --git a/src/components/LinkPreview.tsx b/src/components/LinkPreview.tsx
index 43abb10..8796751 100644
--- a/src/components/LinkPreview.tsx
+++ b/src/components/LinkPreview.tsx
@@ -92,15 +92,14 @@ const LinkPreview: React.FC<IProps> = ({ link }: IProps) => {
(async (): Promise<void> => setContent(await invite({ link })))();
}, [link]);
- const [{ rememberSelection, clientId }] = useContext(ClientContext);
+ const [{ clientId }] = useContext(ClientContext);
// Select which client to link to
- const displayClientId =
- rememberSelection && clientId
- ? clientId
- : link.arguments.client
- ? link.arguments.client
- : null;
+ const displayClientId = clientId
+ ? clientId
+ : link.arguments.client
+ ? link.arguments.client
+ : null;
const client = displayClientId ? clientMap[displayClientId] : null;
diff --git a/src/contexts/ClientContext.ts b/src/contexts/ClientContext.ts
index 52da9f2..0c78807 100644
--- a/src/contexts/ClientContext.ts
+++ b/src/contexts/ClientContext.ts
@@ -23,7 +23,6 @@ import { persistReducer } from '../utils/localStorage';
const STATE_SCHEMA = object({
clientId: string().nullable(),
showOnlyDeviceClients: boolean(),
- rememberSelection: boolean(),
showExperimentalClients: boolean(),
});
@@ -32,7 +31,7 @@ type State = TypeOf<typeof STATE_SCHEMA>;
// Actions are a discriminated union.
export enum ActionType {
SetClient = 'SET_CLIENT',
- ToggleRememberSelection = 'TOGGLE_REMEMBER_SELECTION',
+ ClearClient = 'CLEAR_CLIENT',
ToggleShowOnlyDeviceClients = 'TOGGLE_SHOW_ONLY_DEVICE_CLIENTS',
ToggleShowExperimentalClients = 'TOGGLE_SHOW_EXPERIMENTAL_CLIENTS',
}
@@ -42,8 +41,8 @@ interface SetClient {
clientId: ClientId;
}
-interface ToggleRememberSelection {
- action: ActionType.ToggleRememberSelection;
+interface ClearClient {
+ action: ActionType.ClearClient;
}
interface ToggleShowOnlyDeviceClients {
@@ -56,13 +55,12 @@ interface ToggleShowExperimentalClients {
export type Action =
| SetClient
- | ToggleRememberSelection
+ | ClearClient
| ToggleShowOnlyDeviceClients
| ToggleShowExperimentalClients;
const INITIAL_STATE: State = {
clientId: null,
- rememberSelection: false,
showOnlyDeviceClients: true,
showExperimentalClients: false,
};
@@ -78,11 +76,6 @@ export const [initialState, reducer] = persistReducer(
...state,
clientId: action.clientId,
};
- case ActionType.ToggleRememberSelection:
- return {
- ...state,
- rememberSelection: !state.rememberSelection,
- };
case ActionType.ToggleShowOnlyDeviceClients:
return {
...state,
@@ -93,8 +86,11 @@ export const [initialState, reducer] = persistReducer(
...state,
showExperimentalClients: !state.showExperimentalClients,
};
- default:
- return state;
+ case ActionType.ClearClient:
+ return {
+ ...state,
+ clientId: null,
+ };
}
}
);
--
GitLab