feat: syncronize repo selector instances

Author: bendera

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to the "commit-message-editor" extension will be documented in this file.
 
+## [Unreleased]
+
+### Fixed
+
+- Snycronize repository selector instances.
+
 ## [0.24.2] - 2023-05-08
 
 ### Fixed

frontend/src/components/cme-repo-selector.ts

@@ -6,6 +6,7 @@ import '@bendera/vscode-webview-elements/dist/vscode-icon';
 import '@bendera/vscode-webview-elements/dist/vscode-single-select';
 import '@bendera/vscode-webview-elements/dist/vscode-option';
 import store, {RootState} from '../store/store';
+import {changeSelectedRepository} from '../store/actions';
 
 @customElement('cme-repo-selector')
 export class RepoSelector extends connect(store)(LitElement) {
@@ -43,13 +44,14 @@ export class RepoSelector extends connect(store)(LitElement) {
   private _handleChange(
     ev: CustomEvent<{selectedIndex: number; value: string}>
   ) {
-    this._selectedRepositoryPath = ev.detail.value;
-
+    const path = ev.detail.value;
     const changeEvent = new CustomEvent('cme-change', {
-      detail: ev.detail.value,
+      detail: path,
     });
 
+    this._selectedRepositoryPath = path;
     this.dispatchEvent(changeEvent);
+    store.dispatch(changeSelectedRepository(path));
   }
 
   static get styles(): CSSResult {
@@ -72,13 +74,13 @@ export class RepoSelector extends connect(store)(LitElement) {
     return html`<div class="repo-info">
       <vscode-icon name="repo"></vscode-icon>&nbsp;
       <b>Selected repository:</b>&nbsp;
-      <vscode-single-select @vsc-change=${this._handleChange}>
+      <vscode-single-select
+        @vsc-change=${this._handleChange}
+        .value=${this._selectedRepositoryPath}
+      >
         ${this._availableRepositories.map(
           (r) =>
-            html`<vscode-option
-              description=${r}
-              value=${r}
-              ?selected=${this._selectedRepositoryPath === r}
+            html`<vscode-option description=${r} value=${r}
               >${this._getNameFromPath(r)}</vscode-option
             >`
         )}

frontend/src/store/actions.ts

@@ -10,6 +10,7 @@ export const CONFIRM_AMEND = 'CONFIRM_AMEND';
 export const COPY_TO_SCM_INPUT_BOX = 'COPY_TO_SCM_INPUT_BOX';
 export const REPOSITORY_INFO_RECEIVED = 'REPOSITORY_INFO_RECEIVED';
 export const UPDATE_TOKEN_VALUES = 'UPDATE_TOKEN_VALUES';
+export const CHANGE_SELECTED_REPOSITORY = 'CHANGE_SELECTED_REPOSITORY';
 
 export const IMPORT_CONFIG = 'IMPORT_CONFIG';
 export const SHAREABLE_CONFIG_CHANGED = 'SHAREABLE_CONFIG_CHANGED';
@@ -46,6 +47,9 @@ export const receiveRepositoryInfo = createAction<RepositoryInfo>(
 export const updateTokenValues = createAction<{[key: string]: string}>(
   UPDATE_TOKEN_VALUES
 );
+export const changeSelectedRepository = createAction<string>(
+  CHANGE_SELECTED_REPOSITORY
+);
 
 export const importConfig = createAction(IMPORT_CONFIG);
 export const shareableConfigChange = createAction<ShareableConfig>(

frontend/src/store/reducers.ts

@@ -15,6 +15,7 @@ import {
   TEXTAREA_VALUE_CHANGED,
   UPDATE_TOKEN_VALUES,
   CHANGE_STATUS_MESSAGE,
+  CHANGE_SELECTED_REPOSITORY,
 } from './actions';
 
 export const createInitialState = (): RootState => ({
@@ -94,6 +95,9 @@ export const rootReducer = createReducer(initialState, {
     const {payload} = action;
     state.tokenValues = payload;
   },
+  [CHANGE_SELECTED_REPOSITORY]: (state: RootState, action) => {
+    state.selectedRepositoryPath = action.payload as string;
+  },
   [SHAREABLE_CONFIG_CHANGED]: (state: RootState, action) => {
     const {payload} = action;
     const {staticTemplate = '', dynamicTemplate = '', tokens = []} = payload;