[landing] show close icon when mobile nav is active
ClosedPublic
Actions

Authored by ginsu on May 19 2023, 4:47 AM.

Details

Reviewers

atul
kamil

Commits

rCOMMf4fd228b7c06: [landing] show close icon when mobile nav is active

Summary

This is the last diff that updates the header component. This diff changes the hamburger menu icon to a close icon depending if the mobile nav is active or not.

Depends on D7868

Test Plan

Please see the screenshots below:

When the mobile nav is not active:

Screenshot 2023-05-19 at 2.47.58 PM.png (2×1 px, 1 MB)

When the mobile nav is active:

Screenshot 2023-05-19 at 2.48.00 PM.png (2×1 px, 554 KB)

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

ginsu created this revision.May 19 2023, 4:47 AM

Herald added subscribers: atul, tomek, ashoat. · View Herald TranscriptMay 19 2023, 4:47 AM

ginsu edited the summary of this revision. (Show Details)May 19 2023, 4:50 AM

ginsu edited the test plan for this revision. (Show Details)

ginsu added reviewers: atul, kamil.

ginsu added a parent revision: D7868: [landing] implement on click functions in header.

ginsu attached a referenced file: F545333: Screenshot 2023-05-19 at 2.48.00 PM.png. (Show Details)

ginsu attached a referenced file: F545332: Screenshot 2023-05-19 at 2.47.58 PM.png. (Show Details)

Harbormaster completed remote builds in B19501: Diff 26666.May 19 2023, 5:05 AM

ginsu requested review of this revision.May 19 2023, 5:05 AM

ginsu added a child revision: D7870: [landing] fix mobile nav still being shown when window resizes.May 19 2023, 5:09 AM

atul accepted this revision.May 19 2023, 10:50 AM

This revision is now accepted and ready to land.May 19 2023, 10:50 AM

rebase before landing

Harbormaster completed remote builds in B21606: Diff 29646.Aug 8 2023, 12:30 PM

Closed by commit rCOMMf4fd228b7c06: [landing] show close icon when mobile nav is active (authored by ginsu). · Explain WhyAug 8 2023, 2:07 PM

This revision was automatically updated to reflect the committed changes.

ginsu added a commit: rCOMMf4fd228b7c06: [landing] show close icon when mobile nav is active.

Revision Contents
Changeset List

Path

Size

landing/

header.react.js

12 lines

Diff 29723

View Options

landing/header.react.js

// @flow		// @flow

import reduceConnectionInfo from './connection-reducer.js';
import { reduceDeviceToken } from './device-token-reducer.js';		import { reduceDeviceToken } from './device-token-reducer.js';
import { unsupervisedBackgroundActionType } from './lifecycle-state-reducer.js';		import { unsupervisedBackgroundActionType } from './lifecycle-state-reducer.js';
import { updateActivityActionTypes } from '../actions/activity-actions.js';		import { updateActivityActionTypes } from '../actions/activity-actions.js';
import { updateLastCommunicatedPlatformDetailsActionType } from '../actions/device-actions.js';		import { updateLastCommunicatedPlatformDetailsActionType } from '../actions/device-actions.js';
import {		import {
addKeyserverActionType,		addKeyserverActionType,
removeKeyserverActionType,		removeKeyserverActionType,
} from '../actions/keyserver-actions.js';		} from '../actions/keyserver-actions.js';
import { siweAuthActionTypes } from '../actions/siwe-actions.js';		import { siweAuthActionTypes } from '../actions/siwe-actions.js';
import {		import {
logInActionTypes,
resetUserStateActionType,
logOutActionTypes,		logOutActionTypes,
deleteAccountActionTypes,		deleteAccountActionTypes,
registerActionTypes,		registerActionTypes,
		logInActionTypes,
		resetUserStateActionType,
} from '../actions/user-actions.js';		} from '../actions/user-actions.js';
import { queueActivityUpdatesActionType } from '../types/activity-types.js';		import { queueActivityUpdatesActionType } from '../types/activity-types.js';
import type { KeyserverStore } from '../types/keyserver-types';		import type { KeyserverStore } from '../types/keyserver-types';
import type { BaseAction } from '../types/redux-types.js';		import type { BaseAction } from '../types/redux-types.js';
import {		import {
fullStateSyncActionType,		fullStateSyncActionType,
incrementalStateSyncActionType,		incrementalStateSyncActionType,
updateConnectionStatusActionType,		updateConnectionStatusActionType,
		setLateResponseActionType,
		updateDisconnectedBarActionType,
} from '../types/socket-types.js';		} from '../types/socket-types.js';
import { processUpdatesActionType } from '../types/update-types.js';		import { processUpdatesActionType } from '../types/update-types.js';
import { setNewSessionActionType } from '../utils/action-utils.js';		import { setNewSessionActionType } from '../utils/action-utils.js';
import { getConfig } from '../utils/config.js';		import { getConfig } from '../utils/config.js';
import { setURLPrefix } from '../utils/url-utils.js';		import { setURLPrefix } from '../utils/url-utils.js';
import { ashoatKeyserverID } from '../utils/validation-utils.js';		import { ashoatKeyserverID } from '../utils/validation-utils.js';

export default function reduceKeyserverStore(		export default function reduceKeyserverStore(
state: KeyserverStore,		state: KeyserverStore,
action: BaseAction,		action: BaseAction,
): KeyserverStore {		): KeyserverStore {
if (		if (action.type === addKeyserverActionType) {
action.type === logOutActionTypes.success \|\|
action.type === deleteAccountActionTypes.success
) {
state = {
keyserverInfos: {
[ashoatKeyserverID]: {
...state.keyserverInfos[ashoatKeyserverID],
},
},
};
} else if (action.type === addKeyserverActionType) {
return {		return {
...state,		...state,
keyserverInfos: {		keyserverInfos: {
...state.keyserverInfos,		...state.keyserverInfos,
[action.payload.keyserverAdminUserID]: {		[action.payload.keyserverAdminUserID]: {
...action.payload.newKeyserverInfo,		...action.payload.newKeyserverInfo,
},		},
},		},
Show All 31 Lines	if (action.payload.sessionChange.cookie !== undefined) {
...state.keyserverInfos,		...state.keyserverInfos,
[keyserverID]: {		[keyserverID]: {
...state.keyserverInfos[keyserverID],		...state.keyserverInfos[keyserverID],
cookie: action.payload.sessionChange.cookie,		cookie: action.payload.sessionChange.cookie,
},		},
},		},
};		};
}		}
		if (action.payload.sessionChange.cookieInvalidated) {
		state = {
		...state,
		keyserverInfos: {
		...state.keyserverInfos,
		[keyserverID]: {
		...state.keyserverInfos[keyserverID],
		connection: {
		...state.keyserverInfos[keyserverID].connection,
		queuedActivityUpdates: [],
		},
		},
		},
		};
		}
} else if (		} else if (
action.type === logInActionTypes.success \|\|		action.type === logInActionTypes.success \|\|
action.type === siweAuthActionTypes.success		action.type === siweAuthActionTypes.success
) {		) {
const { updatesCurrentAsOf } = action.payload;		const { updatesCurrentAsOf } = action.payload;
for (const keyserverID in updatesCurrentAsOf) {		for (const keyserverID in updatesCurrentAsOf) {
state = {		state = {
...state,		...state,
▲ Show 20 Lines • Show All 163 Lines • ▼ Show 20 Lines	for (const keyserverID in activityUpdates) {
connection: { ...oldConnection, queuedActivityUpdates },		connection: { ...oldConnection, queuedActivityUpdates },
},		},
};		};
}		}
state = {		state = {
...state,		...state,
keyserverInfos,		keyserverInfos,
};		};
}		} else if (
		action.type === logOutActionTypes.success \|\|
		action.type === deleteAccountActionTypes.success
		) {
		// We want to remove all keyservers but Ashoat's keyserver
		const oldConnection = state.keyserverInfos[ashoatKeyserverID].connection;

const connection = reduceConnectionInfo(		const keyserverInfos = {
state.keyserverInfos[ashoatKeyserverID].connection,		[ashoatKeyserverID]: {
action,		...state.keyserverInfos[ashoatKeyserverID],
		connection: { ...oldConnection, queuedActivityUpdates: [] },
		},
		};

		state = {
		...state,
		keyserverInfos,
		};
		} else if (action.type === setLateResponseActionType) {
		const { messageID, isLate, keyserverID } = action.payload;
		const lateResponsesSet = new Set<number>(
		state.keyserverInfos[keyserverID].connection.lateResponses,
);		);
		if (isLate) {
		lateResponsesSet.add(messageID);
		} else {
		lateResponsesSet.delete(messageID);
		}
		state = {
		...state,
		keyserverInfos: {
		...state.keyserverInfos,
		[keyserverID]: {
		...state.keyserverInfos[keyserverID],
		connection: {
		...state.keyserverInfos[keyserverID].connection,
		lateResponses: [...lateResponsesSet],
		},
		},
		},
		};
		} else if (action.type === updateDisconnectedBarActionType) {
		const { keyserverID } = action.payload;
		state = {
		...state,
		keyserverInfos: {
		...state.keyserverInfos,
		[keyserverID]: {
		...state.keyserverInfos[keyserverID],
		connection: {
		...state.keyserverInfos[keyserverID].connection,
		showDisconnectedBar: action.payload.visible,
		},
		},
		},
		};
		}

const deviceToken = reduceDeviceToken(		const deviceToken = reduceDeviceToken(
state.keyserverInfos[ashoatKeyserverID].deviceToken,		state.keyserverInfos[ashoatKeyserverID].deviceToken,
action,		action,
);		);
if (		if (deviceToken !== state.keyserverInfos[ashoatKeyserverID].deviceToken) {
connection !== state.keyserverInfos[ashoatKeyserverID].connection \|\|
deviceToken !== state.keyserverInfos[ashoatKeyserverID].deviceToken
) {
state = {		state = {
...state,		...state,
keyserverInfos: {		keyserverInfos: {
...state.keyserverInfos,		...state.keyserverInfos,
[ashoatKeyserverID]: {		[ashoatKeyserverID]: {
...state.keyserverInfos[ashoatKeyserverID],		...state.keyserverInfos[ashoatKeyserverID],
connection,
deviceToken,		deviceToken,
},		},
},		},
};		};
}		}

return state;		return state;
}		}

[landing] show close icon when mobile nav is activeClosedPublicActions