Skip to content

Commit 9093084

Browse files
formanforman
authored
Merge pull request #10 from bcdev/forman-refactorings
Multiple refactorings
2 parents 9f04507 + 36d84c3 commit 9093084

28 files changed

+339
-362
lines changed

dashi/src/actions/handleComponentPropertyChange.ts renamed to dashi/src/actions/applyPropertyChange.ts

Lines changed: 37 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
1-
import appStore, { ContribPoint, ContributionState } from "../store/appStore";
1+
import appStore from "../store/appStore";
22
import {
3-
ComponentModel,
4-
ContainerModel,
5-
isContainerModel,
6-
PropertyChangeEvent,
7-
} from "../model/component";
3+
ComponentState,
4+
ContainerState,
5+
isContainerState,
6+
} from "../state/component";
87
import { CallbackCallRequest, ChangeRequest, Change } from "../model/callback";
98
import fetchApiResult from "../utils/fetchApiResult";
109
import { fetchChangeRequests } from "../api";
1110
import { updateArray } from "../utils/updateArray";
11+
import { ContributionState } from "../state/contribution";
12+
import { PropertyChangeEvent } from "../model/event";
1213

13-
export default function handleComponentPropertyChange(
14+
import { ContribPoint } from "../model/extension";
15+
16+
export default function applyPropertyChange(
1417
contribPoint: ContribPoint,
1518
contribIndex: number,
1619
contribEvent: PropertyChangeEvent,
1720
) {
18-
const appState = appStore.getState();
19-
const contributionModels =
20-
appState.contributionsRecordResult.data![contribPoint];
21+
const { contributionModelsRecord } = appStore.getState();
22+
const contributionModels = contributionModelsRecord[contribPoint];
2123
const componentId = contribEvent.componentId;
2224
const componentPropertyName = contribEvent.propertyName;
2325
const componentPropertyValue = contribEvent.propertyValue;
@@ -105,15 +107,14 @@ function applyChangeRequests(changeRequests: ChangeRequest[]) {
105107
contribIndex,
106108
changes,
107109
);
108-
const contributionStatesRecord =
109-
appStore.getState().contributionStatesRecord;
110+
const { contributionStatesRecord } = appStore.getState();
110111
const contributionStates = contributionStatesRecord[contribPoint];
111112
const contributionState = contributionStates[contribIndex];
112-
const componentModelOld = contributionState.componentState;
113-
let componentModel = componentModelOld;
113+
const componentStateOld = contributionState.componentState;
114+
let componentState = componentStateOld;
114115
changes.forEach((change) => {
115-
if (componentModel && (!change.kind || change.kind === "Component")) {
116-
componentModel = updateComponentState(componentModel, change);
116+
if (componentState && (!change.kind || change.kind === "Component")) {
117+
componentState = applyComponentStateChange(componentState, change);
117118
} else {
118119
// TODO: process other output kinds which may not require componentModel.
119120
console.warn(
@@ -122,47 +123,44 @@ function applyChangeRequests(changeRequests: ChangeRequest[]) {
122123
);
123124
}
124125
});
125-
if (componentModel && componentModel !== componentModelOld) {
126+
if (componentState && componentState !== componentStateOld) {
126127
appStore.setState({
127128
contributionStatesRecord: {
128129
...contributionStatesRecord,
129130
[contribPoint]: updateArray<ContributionState>(
130131
contributionStates,
131132
contribIndex,
132-
{
133-
...contributionState,
134-
componentState: componentModel,
135-
},
133+
{ ...contributionState, componentState },
136134
),
137135
},
138136
});
139137
}
140138
});
141139
}
142140

143-
function updateComponentState(
144-
componentModel: ComponentModel,
141+
function applyComponentStateChange(
142+
componentState: ComponentState,
145143
change: Change,
146-
): ComponentModel {
147-
if (componentModel.id === change.id) {
148-
return { ...componentModel, [change.property]: change.value };
149-
} else if (isContainerModel(componentModel)) {
150-
const containerModelOld: ContainerModel = componentModel;
151-
let containerModelNew: ContainerModel = containerModelOld;
152-
for (let i = 0; i < containerModelOld.components.length; i++) {
153-
const itemOld = containerModelOld.components[i];
154-
const itemNew = updateComponentState(itemOld, change);
144+
): ComponentState {
145+
if (componentState.id === change.id) {
146+
return { ...componentState, [change.property]: change.value };
147+
} else if (isContainerState(componentState)) {
148+
const containerStateOld: ContainerState = componentState;
149+
let containerStateNew: ContainerState = containerStateOld;
150+
for (let i = 0; i < containerStateOld.components.length; i++) {
151+
const itemOld = containerStateOld.components[i];
152+
const itemNew = applyComponentStateChange(itemOld, change);
155153
if (itemNew !== itemOld) {
156-
if (containerModelNew === containerModelOld) {
157-
containerModelNew = {
158-
...containerModelOld,
159-
components: [...containerModelOld.components],
154+
if (containerStateNew === containerStateOld) {
155+
containerStateNew = {
156+
...containerStateOld,
157+
components: [...containerStateOld.components],
160158
};
161159
}
162-
containerModelNew.components[i] = itemNew;
160+
containerStateNew.components[i] = itemNew;
163161
}
164162
}
165-
return containerModelNew;
163+
return containerStateNew;
166164
}
167-
return componentModel;
165+
return componentState;
168166
}

‎dashi/src/actions/initAppStore.ts‎

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,38 @@
1-
import appStore, { ContributionState } from "../store/appStore";
1+
import appStore from "../store/appStore";
22
import fetchApiResult from "../utils/fetchApiResult";
3-
import { fetchContributionsRecord, fetchExtensions } from "../api";
3+
import { fetchContributions } from "../api";
44
import { Contribution } from "../model/contribution";
5+
import { ContributionState } from "../state/contribution";
6+
import { ContribPoint } from "../model/extension";
57

68
export function initAppStore() {
79
const set = appStore.setState;
810

9-
set({ extensionsResult: { status: "pending" } });
10-
fetchApiResult(fetchExtensions).then((extensionsResult) => {
11-
set({ extensionsResult });
12-
});
13-
14-
set({ contributionsRecordResult: { status: "pending" } });
15-
fetchApiResult(fetchContributionsRecord).then((contributionsRecordResult) => {
16-
if (contributionsRecordResult.data) {
17-
const contributionStatesRecord: Record<string, ContributionState[]> = {};
18-
Object.getOwnPropertyNames(contributionsRecordResult.data).forEach(
19-
(contribPoint) => {
20-
const contributions: Contribution[] =
21-
contributionsRecordResult.data![contribPoint];
22-
contributionStatesRecord[contribPoint] = contributions.map(() => ({
23-
componentModelResult: {},
24-
}));
25-
},
26-
);
27-
set({ contributionsRecordResult, contributionStatesRecord });
28-
} else {
29-
set({ contributionsRecordResult });
30-
}
11+
set({ contributionsResult: { status: "pending" } });
12+
fetchApiResult(fetchContributions).then((contributionsResult) => {
13+
// TODO: assert Boolean(contributionsResult.data)
14+
const { extensions, contributions: contributionModelsRecord } =
15+
contributionsResult.data!;
16+
const contributionStatesRecord: Record<ContribPoint, ContributionState[]> =
17+
{};
18+
Object.getOwnPropertyNames(contributionModelsRecord).forEach(
19+
(contribPoint: ContribPoint) => {
20+
const contributionModels: Contribution[] =
21+
contributionModelsRecord[contribPoint];
22+
contributionStatesRecord[contribPoint] = contributionModels.map(
23+
(contribution) => ({
24+
title: contribution.title,
25+
visible: contribution.visible,
26+
componentStateResult: {},
27+
}),
28+
);
29+
},
30+
);
31+
set({
32+
contributionsResult,
33+
extensions,
34+
contributionModelsRecord,
35+
contributionStatesRecord,
36+
});
3137
});
3238
}

‎dashi/src/actions/setComponentVisibility.ts‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1-
import appStore, { ContribPoint } from "../store/appStore";
1+
import appStore from "../store/appStore";
22
import fetchApiResult from "../utils/fetchApiResult";
3-
import { fetchComponentModel } from "../api";
3+
import { fetchInitialComponentState } from "../api";
44
import { updateContributionState } from "./updateContributionState";
55

6+
import { ContribPoint } from "../model/extension";
7+
68
export function setComponentVisibility(
79
contribPoint: ContribPoint,
810
panelIndex: number,
@@ -14,24 +16,24 @@ export function setComponentVisibility(
1416
if (contributionState.visible === visible) {
1517
return; // nothing to do
1618
}
17-
if (contributionState.componentModelResult.status) {
19+
if (contributionState.componentStateResult.status) {
1820
updateContributionState(contribPoint, panelIndex, { visible });
1921
} else {
2022
// No status yet, so we must load the component
2123
updateContributionState(contribPoint, panelIndex, {
2224
visible,
23-
componentModelResult: { status: "pending" },
25+
componentStateResult: { status: "pending" },
2426
});
2527
const inputValues = getLayoutInputValues(contribPoint, panelIndex);
2628
fetchApiResult(
27-
fetchComponentModel,
29+
fetchInitialComponentState,
2830
contribPoint,
2931
panelIndex,
3032
inputValues,
3133
).then((componentModelResult) => {
3234
const componentState = componentModelResult?.data;
3335
updateContributionState(contribPoint, panelIndex, {
34-
componentModelResult,
36+
componentStateResult: componentModelResult,
3537
componentState,
3638
});
3739
});
@@ -42,8 +44,8 @@ function getLayoutInputValues(
4244
contribPoint: ContribPoint,
4345
contribIndex: number,
4446
): unknown[] {
45-
const contributionModels =
46-
appStore.getState().contributionsRecordResult.data![contribPoint];
47+
const { contributionModelsRecord } = appStore.getState();
48+
const contributionModels = contributionModelsRecord[contribPoint];
4749
const contributionModel = contributionModels[contribIndex];
4850
const inputs = contributionModel.layout!.inputs;
4951
if (inputs && inputs.length > 0) {

‎dashi/src/actions/updateContributionState.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1-
import appStore, { ContribPoint, ContributionState } from "../store/appStore";
1+
import appStore from "../store/appStore";
22
import { updateArray } from "../utils/updateArray";
3+
import { ContributionState } from "../state/contribution";
4+
5+
import { ContribPoint } from "../model/extension";
36

47
export function updateContributionState(
58
contribPoint: ContribPoint,

‎dashi/src/api.ts‎

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,19 @@
1-
import { ComponentModel } from "./model/component";
2-
import { Extension } from "./model/extension";
3-
import { Contribution } from "./model/contribution";
1+
import { ComponentState } from "./state/component";
2+
import { ContribPoint, Contributions } from "./model/extension";
43
import { CallbackCallRequest, ChangeRequest } from "./model/callback";
54
import { callApi } from "./utils/fetchApiResult";
6-
import { ContribPoint } from "./store/appStore";
75

86
const serverUrl = "http://localhost:8888";
97

10-
export async function fetchExtensions(): Promise<Extension[]> {
11-
return callApi(`${serverUrl}/dashi/extensions`);
12-
}
13-
14-
export async function fetchContributionsRecord(): Promise<
15-
Record<ContribPoint, Contribution[]>
16-
> {
8+
export async function fetchContributions(): Promise<Contributions> {
179
return callApi(`${serverUrl}/dashi/contributions`);
1810
}
1911

20-
export async function fetchComponentModel(
12+
export async function fetchInitialComponentState(
2113
contribPoint: ContribPoint,
2214
contribIndex: number,
2315
inputValues: unknown[],
24-
): Promise<ComponentModel> {
16+
): Promise<ComponentState> {
2517
return callApi(`${serverUrl}/dashi/layout/${contribPoint}/${contribIndex}`, {
2618
body: JSON.stringify({ inputValues }),
2719
method: "post",

‎dashi/src/app/ExtensionInfo.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@ import useAppStore from "../store/appStore";
22
import { Typography } from "@mui/material";
33

44
function ExtensionsInfo() {
5-
const appState = useAppStore();
6-
const extensionsResult = appState.extensionsResult;
7-
if (extensionsResult.data) {
5+
const contributionsResult = useAppStore((state) => state.contributionsResult);
6+
const extensions = useAppStore((state) => state.extensions);
7+
if (contributionsResult.status === "ok") {
88
return (
99
<div style={{ display: "flex", gap: 5 }}>
10-
{extensionsResult.data.map((extension, extIndex) => {
10+
{extensions.map((extension, extIndex) => {
1111
const id = `extensions.${extIndex}`;
1212
return (
1313
<Typography
@@ -19,9 +19,9 @@ function ExtensionsInfo() {
1919
})}
2020
</div>
2121
);
22-
} else if (extensionsResult.error) {
23-
return <div>Error: {extensionsResult.error.message}</div>;
24-
} else if (extensionsResult.status === "pending") {
22+
} else if (contributionsResult.error) {
23+
return <div>Error: {contributionsResult.error.message}</div>;
24+
} else if (contributionsResult.status === "pending") {
2525
return <div>{`Loading extensions...`}</div>;
2626
}
2727
return null;

‎dashi/src/app/Panel.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { CSSProperties, ReactElement } from "react";
2+
import { CircularProgress } from "@mui/material";
23

3-
import { PropertyChangeHandler } from "../model/component";
4+
import { PropertyChangeHandler } from "../model/event";
5+
import { Contribution } from "../model/contribution";
6+
import { ContributionState } from "../state/contribution";
47
import DashiComponent from "../components/DashiComponent";
5-
import { ContributionState } from "../store/appStore";
6-
import { CircularProgress } from "@mui/material";
7-
import { PanelModel } from "../model/panel";
88

99
const panelContainerStyle: CSSProperties = {
1010
display: "flex",
@@ -31,7 +31,7 @@ const panelContentStyle: CSSProperties = {
3131
};
3232

3333
interface PanelProps {
34-
panelModel: PanelModel;
34+
panelModel: Contribution;
3535
panelState: ContributionState;
3636
onPropertyChange: PropertyChangeHandler;
3737
}
@@ -42,7 +42,7 @@ function Panel({ panelModel, panelState, onPropertyChange }: PanelProps) {
4242
}
4343
const componentState = panelState.componentState;
4444
let panelElement: ReactElement | null = null;
45-
const componentModelResult = panelState.componentModelResult;
45+
const componentModelResult = panelState.componentStateResult;
4646
if (componentModelResult.data && componentState) {
4747
panelElement = (
4848
<DashiComponent {...componentState} onPropertyChange={onPropertyChange} />
@@ -63,7 +63,7 @@ function Panel({ panelModel, panelState, onPropertyChange }: PanelProps) {
6363
}
6464
return (
6565
<div style={panelContainerStyle}>
66-
<div style={panelHeaderStyle}>{panelModel.title}</div>
66+
<div style={panelHeaderStyle}>{panelState.title}</div>
6767
<div style={panelContentStyle}>{panelElement}</div>
6868
</div>
6969
);

0 commit comments

Comments
 (0)