Skip to content

Commit 4918691

Browse files
Ji KimJi Kim
Ji Kim
authored and
Ji Kim
committed
Merge branch 'typescript' of https://github.com/oslabs-beta/OverVue into typescript
2 parents a8ffd28 + fafa3c8 commit 4918691

File tree

7 files changed

+118
-84
lines changed

7 files changed

+118
-84
lines changed

‎src/App.vue

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -35,19 +35,19 @@ const isTimetraveling = ref(false);
3535
3636
const store = useStore();
3737
38-
const subscribeAction = store.$subscribe((action, state) => {
39-
if (typeof action.payload === "object") {
40-
action.payload = cloneDeep(action.payload);
38+
store.$onAction((action) => {
39+
if (typeof action.args[0] === "object") {
40+
action.args = cloneDeep(action.args[0]);
4141
}
4242
doneAction.value.push(action);
4343
if (!isTimetraveling.value) {
4444
if (undoneAction.value[undoneAction.value.length - 1]) {
4545
if (
46-
action.type ===
47-
undoneAction.value[undoneAction.value.length - 1].type &&
46+
action.name ===
47+
undoneAction.value[undoneAction.value.length - 1].name &&
4848
deepEqual(
49-
action.payload,
50-
undoneAction.value[undoneAction.value.length - 1].payload
49+
action.args,
50+
undoneAction.value[undoneAction.value.length - 1].args[0]
5151
)
5252
) {
5353
undoneAction.value.pop();
@@ -92,10 +92,10 @@ const undo = () => {
9292
if this happens we keep popping the doneAction.value queue and building up the redo queue. */
9393
if (undone !== undefined) {
9494
undoneAction.value.push(undone);
95-
if (ignoredActions.has(undone.type)) {
95+
if (ignoredActions.has(undone.name)) {
9696
while (
9797
doneAction.value[doneAction.value.length - 1] &&
98-
ignoredActions.has(doneAction.value[doneAction.value.length - 1].type)
98+
ignoredActions.has(doneAction.value[doneAction.value.length - 1].name)
9999
) {
100100
undoneAction.value.push(doneAction.value.pop());
101101
}
@@ -111,9 +111,8 @@ const undo = () => {
111111
store.emptyState();
112112
113113
doneAction.value.forEach((action) => {
114-
const actionType = action.type;
115-
store.action.type(cloneDeep(action.payload));
116-
doneAction.pop();
114+
store[action.name](cloneDeep(action.args[0]));
115+
doneAction.value.pop();
117116
});
118117
isTimetraveling.value = false;
119118
};
@@ -124,11 +123,11 @@ const redo = () => {
124123
// we have to set timeTraveling to true to preserve the undoneAction array while we make changes
125124
isTimetraveling.value = true;
126125
if (action) {
127-
const actionType = action.type;
128-
store[actionType](cloneDeep(action.payload));
126+
const actionName = action.name;
127+
store[actionName](cloneDeep(action.args[0]));
129128
}
130129
isTimetraveling.value = false;
131-
if (action && ignoredActions.has(action.type)) {
130+
if (action && ignoredActions.has(action.name)) {
132131
redo();
133132
}
134133
};

‎src/components/composables/useExportComponent.js

Lines changed: 31 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { openHtmlElementMap } from "src/store/state/htmlElementMap";
2-
import path from "path";
2+
import { useStore } from "src/store/main";
33
export function useExportComponent() {
44
// OVERVUE 8.0: export active component
55
/**
@@ -9,6 +9,8 @@ export function useExportComponent() {
99
* @return: none -- outputs file to fs
1010
*
1111
*/
12+
const { ipcRenderer, fs, path } = window;
13+
const store = useStore();
1214

1315
const exportComponent = () => {
1416
ipcRenderer
@@ -17,7 +19,10 @@ export function useExportComponent() {
1719
message: "Choose location to save folder in",
1820
nameFieldLabel: "Component Name",
1921
})
20-
.then((result) => exportComponentFile(result.filePath))
22+
.then((result) => {
23+
exportComponentFile(result.filePath);
24+
alert("Successfully Exported");
25+
})
2126
.catch((err) => console.log(err));
2227
};
2328

@@ -167,7 +172,7 @@ export function useExportComponent() {
167172
return nestedString;
168173
};
169174
// iterate through component's htmllist
170-
let htmlArr = this.componentMap[componentName].htmlList;
175+
let htmlArr = store.componentMap[componentName].htmlList;
171176
let outputStr = ``;
172177
// eslint-disable-next-line no-unused-vars
173178
for (let el of htmlArr) {
@@ -199,9 +204,9 @@ export function useExportComponent() {
199204
};
200205

201206
const writeComments = (componentName) => {
202-
if (this.componentMap[componentName]?.noteList?.length > 0) {
207+
if (store.componentMap[componentName]?.noteList?.length > 0) {
203208
let commentStr = "<!--";
204-
this.componentMap[componentName].noteList.forEach((el) => {
209+
store.componentMap[componentName].noteList.forEach((el) => {
205210
commentStr += "\n";
206211
commentStr += el;
207212
});
@@ -222,29 +227,29 @@ export function useExportComponent() {
222227

223228
//used to loop through - and apply class/id in code snippet
224229
if (
225-
this.componentMap[componentName].htmlAttributes.class !== "" &&
226-
this.componentMap[componentName].htmlAttributes.id !== ""
230+
store.componentMap[componentName].htmlAttributes.class !== "" &&
231+
store.componentMap[componentName].htmlAttributes.id !== ""
227232
) {
228-
return `<template>\n <div id = "${this.componentMap[componentName].htmlAttributes.id}" class = "${this.componentMap[componentName].htmlAttributes.class}">\n${templateTagStr} </div>\n</template>`;
233+
return `<template>\n <div id = "${store.componentMap[componentName].htmlAttributes.id}" class = "${store.componentMap[componentName].htmlAttributes.class}">\n${templateTagStr} </div>\n</template>`;
229234
} else if (
230-
this.componentMap[componentName].htmlAttributes.class !== "" &&
231-
this.componentMap[componentName].htmlAttributes.id === ""
235+
store.componentMap[componentName].htmlAttributes.class !== "" &&
236+
store.componentMap[componentName].htmlAttributes.id === ""
232237
) {
233-
return `<template>\n <div class = "${this.componentMap[componentName].htmlAttributes.class}">\n${templateTagStr} </div>\n</template>`;
238+
return `<template>\n <div class = "${store.componentMap[componentName].htmlAttributes.class}">\n${templateTagStr} </div>\n</template>`;
234239
} else if (
235-
this.componentMap[componentName].htmlAttributes.class === "" &&
236-
this.componentMap[componentName].htmlAttributes.id !== ""
240+
store.componentMap[componentName].htmlAttributes.class === "" &&
241+
store.componentMap[componentName].htmlAttributes.id !== ""
237242
)
238-
return `<template>\n <div id = "${this.componentMap[componentName].htmlAttributes.id}">\n${templateTagStr} </div>\n</template>`;
239-
else return `<template>\n <div>\n${templateTagStr} </div>\n</template>`;
243+
return `<template>\n <div id = "${store.componentMap[componentName].htmlAttributes.id}">\n${templateTagStr} </div>\n</template>`;
244+
else return `<template>\n <div>\n${templateTagStr} </div>\n</template>`;
240245
};
241246

242247
/**
243248
* @description imports child components into <script>
244249
*/
245250
const writeScript = (componentName, children) => {
246251
// add import mapstate and mapactions if they exist
247-
const currentComponent = this.componentMap[componentName];
252+
const currentComponent = store.componentMap[componentName];
248253
let imports = "";
249254
if (currentComponent.actions.length || currentComponent.state.length) {
250255
imports += "import { ";
@@ -255,7 +260,7 @@ export function useExportComponent() {
255260
imports += ' } from "vuex"\n';
256261
}
257262
// if Typescript toggle is on, import defineComponent
258-
if (this.exportAsTypescript === "on") {
263+
if (store.exportAsTypescript === "on") {
259264
imports += 'import { defineComponent } from "vue";\n';
260265
}
261266
// add imports for children
@@ -277,7 +282,7 @@ export function useExportComponent() {
277282
data += `\n ${prop}: "PLACEHOLDER FOR VALUE",`;
278283
});
279284
}
280-
this.routes.HomeView.forEach((element) => {
285+
store.routes.HomeView.forEach((element) => {
281286
element.htmlList.forEach((html) => {
282287
if (html.binding !== "") {
283288
data += `\n ${html.binding}: "PLACEHOLDER FOR VALUE",`;
@@ -313,7 +318,7 @@ export function useExportComponent() {
313318
// concat all code within script tags
314319
// if exportAsTypescript is on, out should be <script lang="ts">
315320
let output;
316-
if (this.exportAsTypescript === "on") {
321+
if (store.exportAsTypescript === "on") {
317322
output = "\n\n<script lang='ts'>\n";
318323
output +=
319324
imports +
@@ -330,7 +335,7 @@ export function useExportComponent() {
330335
output += computed;
331336
output += methods;
332337
// eslint-disable-next-line no-useless-escape
333-
if (this.exportAsTypescript === "on") {
338+
if (store.exportAsTypescript === "on") {
334339
output += "});\n</script>";
335340
} else {
336341
output += "};\n</script>";
@@ -343,10 +348,10 @@ export function useExportComponent() {
343348
* if component is 'App', writes css, else returns <style scoped>
344349
*/
345350
const writeStyle = (componentName) => {
346-
let htmlArray = this.componentMap[componentName].htmlList;
351+
let htmlArray = store.componentMap[componentName].htmlList;
347352
let styleString = "";
348353

349-
this.routes.HomeView.forEach((element) => {
354+
store.routes.HomeView.forEach((element) => {
350355
if (element.htmlAttributes.class !== "") {
351356
styleString += `.${element.htmlAttributes.class} {\nbackground-color: ${element.color};
352357
width: ${element.w}px;
@@ -378,10 +383,11 @@ z-index: ${html.z};
378383
// main logic below for creating single component
379384
// eslint-disable-next-line no-unused-vars
380385
createComponentCode(
381-
path.join(data, this.activeComponent),
382-
this.activeComponent,
383-
this.componentMap[this.activeComponent].children
386+
path.join(data, store.activeComponent),
387+
store.activeComponent,
388+
store.componentMap[store.activeComponent].children
384389
);
385390
};
391+
386392
exportComponent();
387393
}

‎src/components/left-sidebar/ComponentTab/ParentMultiselect.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ const activeComponent = computed(() => store.activeComponent);
3838
const routes = computed(() => store.routes);
3939
const activeRoute = computed(() => store.activeRoute);
4040
41-
const options = computed(() =>
42-
routes.value[activeRoute.value].map((component) => component.componentName)
41+
const options = routes.value[activeRoute.value].map(
42+
(component) => component.componentName
4343
);
4444
4545
const parentSelect: typeof store.parentSelect = (payload) =>

‎src/components/nav-buttons/ExportMenu.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -377,7 +377,7 @@ const writeTemplateTag = (componentName: string) => {
377377
};
378378
379379
const writeComments = (componentName: string) => {
380-
if ((componentMap.value[componentName] as Component).noteList.length > 0) {
380+
if ((componentMap.value[componentName] as Component).noteList) {
381381
let commentStr = "<!--";
382382
(componentMap.value[componentName] as Component).noteList.forEach((el) => {
383383
commentStr += "\n";

‎src/components/slack_login/SlackLoginWindow.vue

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -69,23 +69,27 @@
6969
</template>
7070

7171
<script setup lang="ts">
72+
// @ts-ignore
7273
import localforage from "localforage";
73-
import { useStore } from "vuex";
74+
import { useStore } from "../../store/main";
7475
import { ref } from "vue";
75-
const { ipcRenderer, shell } = window.require("electron");
76+
const { ipcRenderer, shell } = window;
7677
7778
const store = useStore();
7879
let isAuthenticating = ref(false);
7980
let showLogin = ref(false);
8081
const errorMessage = ref("");
8182
82-
ipcRenderer.on("tokenReceived", (event, data) => {
83-
return saveToLocalForage("slackWebhookURL", data.incoming_webhook.url);
84-
});
85-
ipcRenderer.on("slackUser", (event, user) => {
83+
ipcRenderer.on(
84+
"tokenReceived",
85+
(event: Event, data: { incoming_webhook: { url: string } }) => {
86+
return saveToLocalForage("slackWebhookURL", data.incoming_webhook.url);
87+
}
88+
);
89+
ipcRenderer.on("slackUser", (event: Event, user: string) => {
8690
return saveToLocalForage("slackUser", user);
8791
});
88-
ipcRenderer.on("slackError", (event, err) => {
92+
ipcRenderer.on("slackError", (event: Event, err: Error) => {
8993
printErrorMessage();
9094
});
9195

‎test/jest/__tests__/App.spec.js

Lines changed: 59 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@
22
/**
33
* @jest-environment jsdom
44
*/
5-
import mutations from "../../../src/store/options/mutations";
6-
import actions from "../../../src/store/options/actions";
7-
import { mount, createLocalVue, shallowMount } from "@vue/test-utils";
8-
import * as All from "quasar";
9-
const { Quasar, date } = All;
5+
// import mutations from "../../../src/store/options/mutations";
6+
import { setActivePinia, createPinia } from 'pinia'
7+
import { useStore } from "src/store/main.js";
8+
const store = useStore();
109

1110
/**
1211
* @description: Tests for deleting state
@@ -17,37 +16,64 @@ const { Quasar, date } = All;
1716
*/
1817

1918
describe("Delete state/actions in userStore/componentMap", () => {
20-
let state;
2119
beforeEach(() => {
22-
state = {
23-
componentMap: {
24-
testComp: {
25-
componentName: "test",
26-
children: [],
27-
htmlList: [],
28-
componentActions: [],
29-
state: ["state1", "state2"],
30-
actions: ["action1", "action2"],
31-
},
32-
},
33-
activeComponent: "test",
34-
userState: ["state1", "state2"],
35-
userActions: ["action1", "action2"],
36-
userProps: ["prop1", "prop2"],
37-
};
20+
store.componentMap = {
21+
testComp: {
22+
componentName: "test",
23+
children: [],
24+
htmlList: [],
25+
componentActions: [],
26+
state: ["state1", "state2"],
27+
actions: ["action1", "action2"],
28+
}
29+
}
30+
store.activeComponent = "test";
31+
store.userState = ["state1", "state2"];
32+
store.userActions = ["action1", "action2"];
33+
store.userProps = ["prop1", "prop2"];
34+
// state = {
35+
// componentMap: {
36+
// testComp: {
37+
// componentName: "test",
38+
// children: [],
39+
// htmlList: [],
40+
// componentActions: [],
41+
// state: ["state1", "state2"],
42+
// actions: ["action1", "action2"],
43+
// },
44+
// },
45+
// activeComponent: "test",
46+
// userState: ["state1", "state2"],
47+
// userActions: ["action1", "action2"],
48+
// userProps: ["prop1", "prop2"],
49+
// };
3850
});
39-
test("'[types.DELETE_USER_STATE]' should delete a single state property", () => {
40-
mutations.DELETE_USER_STATE(state, "state1");
41-
expect(state.userState).toEqual(["state2"]);
51+
// test("'[types.DELETE_USER_STATE]' should delete a single state property", () => {
52+
// mutations.DELETE_USER_STATE(state, "state1");
53+
// expect(state.userState).toEqual(["state2"]);
54+
// });
55+
test("function deleteUserState should delete a single state property", () => {
56+
store.deleteUserState("state1");
57+
expect(store.userState).toEqual(["state2"]);
4258
});
43-
test("'[types.DELETE_USER_ACTIONS]' should delete a single action property", () => {
44-
mutations.DELETE_USER_ACTIONS(state, "action1");
45-
expect(state.userActions).toEqual(["action2"]);
59+
// test("'[types.DELETE_USER_ACTIONS]' should delete a single action property", () => {
60+
// mutations.DELETE_USER_ACTIONS(state, "action1");
61+
// expect(state.userActions).toEqual(["action2"]);
62+
// });
63+
test("'function deleteUserActions should delete a single action property", () => {
64+
store.deleteUserActions("action1");
65+
expect(store.userActions).toEqual(["action2"]);
4666
});
47-
test("'[types.REMOVE_ALL_STATE_PROPS_ACTIONS]' should delete all props, state and action", () => {
48-
mutations.REMOVE_ALL_STATE_PROPS_ACTIONS(state);
49-
expect(state.userState.length).toEqual(0);
50-
expect(state.userActions.length).toEqual(0);
51-
expect(state.userProps.length).toEqual(0);
67+
// test("'[types.REMOVE_ALL_STATE_PROPS_ACTIONS]' should delete all props, state and action", () => {
68+
// mutations.REMOVE_ALL_STATE_PROPS_ACTIONS(state);
69+
// expect(state.userState.length).toEqual(0);
70+
// expect(state.userActions.length).toEqual(0);
71+
// expect(state.userProps.length).toEqual(0);
72+
// });
73+
test(" function removeAllStatePropsActions should delete all props, state and action", () => {
74+
store.removeAllStatePropsActions();
75+
expect(store.userState.length).toEqual(0);
76+
expect(store.userActions.length).toEqual(0);
77+
expect(store.userProps.length).toEqual(0);
5278
});
5379
});

‎tsconfig.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,5 @@
4040
"dist",
4141
".quasar",
4242
"node_modules",
43-
"src",
4443
]
4544
}

0 commit comments

Comments
 (0)