Redux toolkit store

chat-store-redux-toolkit.ts

import { createSlice, createAsyncThunk, configureStore, PayloadAction } from '@reduxjs/toolkit';
import * as Sentry from '@sentry/electron/renderer';
import { DEFAULT_PHP_VERSION } from '../../vendor/wp-now/src/constants';
import { getIpcApi } from '../lib/get-ipc-api';

interface ChatState {
	currentURL: string;
	pluginList: string[];
	themeList: string[];
	numberOfSites: number;
	phpVersion: string;
	siteName: string;
	isSiteLoadedDict: Record< string, boolean >;
	themeName: string;
	isBlockTheme: boolean;
	os: string;
	availableEditors: string[];
	wpVersion: string;
}

const parseWpCliOutput = ( stdout: string ): string[] => {
	try {
		const data = JSON.parse( stdout );
		return data?.map( ( item: { name: string } ) => item.name ) || [];
	} catch ( error ) {
		Sentry.captureException( error, { extra: { stdout } } );
		return [];
	}
};

async function fetchPluginList( siteId: string ): Promise< string[] > {
	const { stdout, stderr } = await getIpcApi().executeWPCLiInline( {
		siteId,
		args: 'plugin list --format=json --status=active',
		skipPluginsAndThemes: true,
	} );

	return stderr ? [] : parseWpCliOutput( stdout );
}

async function fetchThemeList( siteId: string ): Promise< string[] > {
	const { stdout, stderr } = await getIpcApi().executeWPCLiInline( {
		siteId,
		args: 'theme list --format=json',
		skipPluginsAndThemes: true,
	} );

	return stderr ? [] : parseWpCliOutput( stdout );
}

export const updateFromSite = createAsyncThunk(
	'chat/updateFromSite',
	async ( site: SiteDetails ) => {
		const [ plugins, themes ] = await Promise.all( [
			fetchPluginList( site.id ),
			fetchThemeList( site.id ),
		] );

		return {
			plugins,
			themes,
		};
	}
);

const initialState: ChatState = {
	currentURL: '',
	pluginList: [],
	themeList: [],
	numberOfSites: 0,
	themeName: '',
	wpVersion: '',
	phpVersion: DEFAULT_PHP_VERSION,
	isBlockTheme: false,
	os: window.appGlobals?.platform || '',
	availableEditors: [],
	siteName: '',
	isSiteLoadedDict: {},
};

const chatSlice = createSlice( {
	name: 'chat',
	initialState,
	reducers: {
		updateFromTheme: (
			state,
			action: PayloadAction< { name: string; isBlockTheme: boolean } >
		) => {
			const { name, isBlockTheme } = action.payload;
			state.themeName = name;
			state.isBlockTheme = isBlockTheme;
		},
	},
	extraReducers: ( builder ) => {
		builder
			.addCase( updateFromSite.pending, ( state, action ) => {
				const site = action.meta.arg;

				state.currentURL = `http://localhost:${ site.port }`;
				state.phpVersion = site.phpVersion ?? DEFAULT_PHP_VERSION;
				state.siteName = site.name;
				state.isSiteLoadedDict[ site.id ] = true;
			} )
			.addCase( updateFromSite.fulfilled, ( state, action ) => {
				const { plugins, themes } = action.payload;

				state.pluginList = plugins;
				state.themeList = themes;
			} )
			.addCase( updateFromSite.rejected, ( state, action ) => {
				state.isSiteLoadedDict[ action.meta.arg.id ] = false;
			} );
	},
} );

export const store = configureStore( {
	reducer: chatSlice.reducer,
} );

export const getContextForApi = ( state: ChatState ) => ( {
	current_url: state.currentURL,
	number_of_sites: state.numberOfSites,
	wp_version: state.wpVersion,
	php_version: state.phpVersion,
	plugins: state.pluginList,
	themes: state.themeList,
	current_theme: state.themeName,
	is_block_theme: state.isBlockTheme,
	ide: state.availableEditors,
	site_name: state.siteName,
	os: state.os,
} );