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-color: $app-background;
background-image: url('./imgs/background.svg'); background-image: url('./imgs/background.svg');
background-repeat: none; background-repeat: none;
background-position: 50% top; background-position: 50% 10%;
} }
@mixin spacer { @mixin spacer {

View File

@ -27,11 +27,12 @@ import './ClientList.scss';
interface IProps { interface IProps {
link: SafeLink; link: SafeLink;
rememberSelection: boolean;
} }
const ClientList: React.FC<IProps> = ({ link }: IProps) => { const ClientList: React.FC<IProps> = ({ link, rememberSelection }: IProps) => {
const [ const [
{ rememberSelection, showOnlyDeviceClients, showExperimentalClients }, { showOnlyDeviceClients, showExperimentalClients },
clientDispatcher, clientDispatcher,
] = useContext(ClientContext); ] = useContext(ClientContext);
const { uaResults } = useContext(UAContext); const { uaResults } = useContext(UAContext);

View File

@ -17,14 +17,13 @@ limitations under the License.
.advanced { .advanced {
margin: 0 5%; margin: 0 5%;
display: grid;
row-gap: 20px;
.advancedOptions { .advancedOptions {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; 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. limitations under the License.
*/ */
import React, { useContext } from 'react'; import React, { useContext, useState } from 'react';
import './ClientSelection.scss'; import './ClientSelection.scss';
import { ActionType, ClientContext } from '../contexts/ClientContext'; import { ActionType, ClientContext } from '../contexts/ClientContext';
import ClientList from './ClientList'; import ClientList from './ClientList';
import { SafeLink } from '../parser/types'; import { SafeLink } from '../parser/types';
import Button from './Button';
interface IProps { interface IProps {
link: SafeLink; link: SafeLink;
@ -27,17 +28,16 @@ interface IProps {
const ClientSelection: React.FC<IProps> = ({ link }: IProps) => { const ClientSelection: React.FC<IProps> = ({ link }: IProps) => {
const [clientState, clientStateDispatch] = useContext(ClientContext); const [clientState, clientStateDispatch] = useContext(ClientContext);
const [rememberSelection, setRememberSelection] = useState(false);
const options = ( const options = (
<div className="advancedOptions"> <div className="advancedOptions">
<label> <label>
<input <input
type="checkbox" type="checkbox"
onChange={(): void => { onChange={(): void => {
clientStateDispatch({ setRememberSelection(!rememberSelection);
action: ActionType.ToggleRememberSelection,
});
}} }}
checked={clientState.rememberSelection} checked={rememberSelection}
/> />
Remember my selection for future invites in this browser Remember my selection for future invites in this browser
</label> </label>
@ -68,10 +68,24 @@ const ClientSelection: React.FC<IProps> = ({ link }: IProps) => {
</div> </div>
); );
const clearSelection =
clientState.clientId !== null ? (
<Button
onClick={(): void =>
clientStateDispatch({
action: ActionType.ClearClient,
})
}
>
Clear my default client
</Button>
) : null;
return ( return (
<div className="advanced"> <div className="advanced">
{options} {options}
<ClientList link={link} /> <ClientList link={link} rememberSelection={rememberSelection} />
{clearSelection}
</div> </div>
); );
}; };

View File

@ -92,15 +92,14 @@ const LinkPreview: React.FC<IProps> = ({ link }: IProps) => {
(async (): Promise<void> => setContent(await invite({ link })))(); (async (): Promise<void> => setContent(await invite({ link })))();
}, [link]); }, [link]);
const [{ rememberSelection, clientId }] = useContext(ClientContext); const [{ clientId }] = useContext(ClientContext);
// Select which client to link to // Select which client to link to
const displayClientId = const displayClientId = clientId
rememberSelection && clientId ? clientId
? clientId : link.arguments.client
: link.arguments.client ? link.arguments.client
? link.arguments.client : null;
: null;
const client = displayClientId ? clientMap[displayClientId] : null; const client = displayClientId ? clientMap[displayClientId] : null;

View File

@ -23,7 +23,6 @@ import { persistReducer } from '../utils/localStorage';
const STATE_SCHEMA = object({ const STATE_SCHEMA = object({
clientId: string().nullable(), clientId: string().nullable(),
showOnlyDeviceClients: boolean(), showOnlyDeviceClients: boolean(),
rememberSelection: boolean(),
showExperimentalClients: boolean(), showExperimentalClients: boolean(),
}); });
@ -32,7 +31,7 @@ type State = TypeOf<typeof STATE_SCHEMA>;
// Actions are a discriminated union. // Actions are a discriminated union.
export enum ActionType { export enum ActionType {
SetClient = 'SET_CLIENT', SetClient = 'SET_CLIENT',
ToggleRememberSelection = 'TOGGLE_REMEMBER_SELECTION', ClearClient = 'CLEAR_CLIENT',
ToggleShowOnlyDeviceClients = 'TOGGLE_SHOW_ONLY_DEVICE_CLIENTS', ToggleShowOnlyDeviceClients = 'TOGGLE_SHOW_ONLY_DEVICE_CLIENTS',
ToggleShowExperimentalClients = 'TOGGLE_SHOW_EXPERIMENTAL_CLIENTS', ToggleShowExperimentalClients = 'TOGGLE_SHOW_EXPERIMENTAL_CLIENTS',
} }
@ -42,8 +41,8 @@ interface SetClient {
clientId: ClientId; clientId: ClientId;
} }
interface ToggleRememberSelection { interface ClearClient {
action: ActionType.ToggleRememberSelection; action: ActionType.ClearClient;
} }
interface ToggleShowOnlyDeviceClients { interface ToggleShowOnlyDeviceClients {
@ -56,13 +55,12 @@ interface ToggleShowExperimentalClients {
export type Action = export type Action =
| SetClient | SetClient
| ToggleRememberSelection | ClearClient
| ToggleShowOnlyDeviceClients | ToggleShowOnlyDeviceClients
| ToggleShowExperimentalClients; | ToggleShowExperimentalClients;
const INITIAL_STATE: State = { const INITIAL_STATE: State = {
clientId: null, clientId: null,
rememberSelection: false,
showOnlyDeviceClients: true, showOnlyDeviceClients: true,
showExperimentalClients: false, showExperimentalClients: false,
}; };
@ -78,11 +76,6 @@ export const [initialState, reducer] = persistReducer(
...state, ...state,
clientId: action.clientId, clientId: action.clientId,
}; };
case ActionType.ToggleRememberSelection:
return {
...state,
rememberSelection: !state.rememberSelection,
};
case ActionType.ToggleShowOnlyDeviceClients: case ActionType.ToggleShowOnlyDeviceClients:
return { return {
...state, ...state,
@ -93,8 +86,11 @@ export const [initialState, reducer] = persistReducer(
...state, ...state,
showExperimentalClients: !state.showExperimentalClients, showExperimentalClients: !state.showExperimentalClients,
}; };
default: case ActionType.ClearClient:
return state; return {
...state,
clientId: null,
};
} }
} }
); );