Make the remember client option work more intuitively.

This commit is contained in:
Jorik Schellekens 2020-09-03 11:17:53 +02:00
parent 3a7c778498
commit 18ad88f683
6 changed files with 42 additions and 33 deletions

View File

@ -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 {

View File

@ -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);

View File

@ -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;
}
}

View File

@ -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>
);
};

View File

@ -92,11 +92,10 @@ 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
const displayClientId = clientId
? clientId
: link.arguments.client
? link.arguments.client

View File

@ -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,
};
}
}
);