Differential D6812 Diff 23278 web/modals/apps/apps-directory-modal.react.js

Changeset View

Standalone View

web/modals/apps/apps-directory-modal.react.js

This file was moved from web/modals/apps/apps-directory.react.js.

	// @flow			// @flow

	import * as React from 'react';			import * as React from 'react';
	import { useSelector } from 'react-redux';			import { useSelector } from 'react-redux';

	import AppListing from './app-listing.react.js';			import { useModalContext } from 'lib/components/modal-provider.react.js';
	import css from './apps.css';
				import AppListing from '../apps/app-listing.react.js';
				import css from '../apps/apps.css';
				import Modal from '../modal.react.js';

	const APP_DIRECTORY_DATA = [			const APP_DIRECTORY_DATA = [
	{			{
	id: 'chat',			id: 'chat',
	defaultEnabled: true,			defaultEnabled: true,
	readOnly: true,			readOnly: true,
	name: 'Chat',			name: 'Chat',
	icon: 'message-square',			icon: 'message-square',
	copy: 'Keep in touch with your community',			copy: 'Keep in touch with your community',
	},			},
	{			{
	id: 'calendar',			id: 'calendar',
	defaultEnabled: true,			defaultEnabled: true,
	readOnly: false,			readOnly: false,
	name: 'Calendar',			name: 'Calendar',
	icon: 'calendar',			icon: 'calendar',
	copy: 'Shared calendar for your community',			copy: 'Shared calendar for your community',
	},			},
	];			];

	function AppsDirectory(): React.Node {			function AppsModal(): React.Node {
				const { popModal } = useModalContext();

	const enabledApps = useSelector(state => state.enabledApps);			const enabledApps = useSelector(state => state.enabledApps);

	const appData = React.useMemo(			const appData = React.useMemo(
	() =>			() =>
	APP_DIRECTORY_DATA.map(app => {			APP_DIRECTORY_DATA.map(app => {
	const { defaultEnabled, ...data } = app;			const { defaultEnabled, ...data } = app;
	return {			return {
	...data,			...data,
	enabled: enabledApps[app.id] ?? defaultEnabled,			enabled: enabledApps[app.id] ?? defaultEnabled,
	};			};
	}),			}),
	[enabledApps],			[enabledApps],
	);			);

	const appItems = React.useMemo(			const appItems = React.useMemo(
	() => appData.map(item => <AppListing key={item.id} {...item} />),			() => appData.map(item => <AppListing key={item.id} {...item} />),
	[appData],			[appData],
	);			);

	return (			return (
				<Modal name="Choose apps" onClose={popModal} size="large">
	<div className={css.appsDirectoryContainer}>			<div className={css.appsDirectoryContainer}>
	<h4 className={css.appsHeader}>Choose Apps</h4>
	<div className={css.appsDirectoryList}>{appItems}</div>			<div className={css.appsDirectoryList}>{appItems}</div>
	</div>			</div>
				</Modal>
	);			);
	}			}

	export default AppsDirectory;			export default AppsModal;