Merge pull request #148 from open-source-labs/compositionApi

Composition API

Author: Kerolos-Nesem

package-lock.json

@@ -111,18 +111,14 @@ function sendTokenRequest() {
 
   // Listens for response from token request
   request.on("response", (response) => {
-    // logEverywhere("request.on response received");
     response.on("end", () => {
-      // logEverywhere("Response ended ");
     });
     response.on("data", (data) => {
       const decoded = JSON.parse(data.toString());
       if (decoded.error) {
         return slackErrorHandler(decoded.error);
       }
-      // console.log('Is there an error? ', !!decoded.error, 'if true, this shouldnt be logging')
       mainWindow.webContents.send("tokenReceived", decoded);
-      // getSlackUser(decoded.access_token, decoded.authed_user.id)
     });
   });
   request.end();
@@ -143,27 +139,22 @@ function getSlackUser(token, userId) {
   });
   request.on("response", (response) => {
     response.on("end", () => {
-      // logEverywhere('User data recieved')
     });
     response.on("data", (data) => {
       const decoded = JSON.parse(data.toString());
       if (decoded.error) {
         return slackErrorHandler(decoded.error);
       }
-      // logEverywhere('slackUser decoded data in getSlackUser' + decoded)
       mainWindow.webContents.send("slackUser", decoded);
     });
   });
   request.end();
 }
 
 function setOauthListener() {
-  // logEverywhere(`process.env.SLACK_CLIENT_ID in electron-main:  ${process.env.SLACK_CLIENT_ID}`);
-  // logEverywhere(`process.env.SLACK_CLIENT_SECRET in electron-main:  ${process.env.SLACK_CLIENT_SECRET}`);
 
   if (process.env.PROD) {
     return deeplink.on("received", (link) => {
-      // logEverywhere(`auth worked here link: ${link}`);
       // Extracts Slack authorization code from deep link
       authCode = link.split("=")[1];
       sendTokenRequest();

src-electron/electron-main.js

@@ -80,7 +80,7 @@
               <q-icon color="primary" name="edit_note" />
             </q-item-section>
           </q-item>
-          <q-item clickable v-ripple v-close-popup @click="handleExportComponent">
+          <q-item clickable v-ripple v-close-popup @click="useExportComponentBound">
             <q-item-section>Export Component</q-item-section>
             <q-item-section avatar>
               <q-icon color="primary" name="upload" />
@@ -156,12 +156,16 @@
   </div>
 </template>
 
+<script setup>
+  import { useExportComponent } from "./composables/useExportComponent.js";
+</script>
+
 <script>
 import { mapState, mapActions } from "vuex";
 import VueDraggableResizable from "vue-draggable-resizable/src/components/vue-draggable-resizable.vue";
 import VueMultiselect from "vue-multiselect";
 import "vue-draggable-resizable/src/components/vue-draggable-resizable.css";
-import handleExportComponentMixin from "./ExportComponentMixin.vue";
+
 const { fs, ipcRenderer } = window;
 
 const cloneDeep = require("lodash.clonedeep");
@@ -172,7 +176,6 @@ export default {
     VueDraggableResizable,
     VueMultiselect,
   },
-  mixins: [handleExportComponentMixin],
   data() {
     return {
       modalOpen: false,
@@ -324,6 +327,9 @@ export default {
       "deleteActiveComponentNote",
       "openNoteModal",
     ]),
+    useExportComponentBound(){
+      useExportComponent.bind(this)();
+    },
     // records component's initial position in case of drag
     recordInitialPosition: function (e) {
       if (this.activeComponent !== e.target.id) {

src/components/ComponentDisplay.vue

@@ -0,0 +1,62 @@
+export function useCreateComponent(importObj) {
+  const createComponent = (importObj) => {
+    let imported = false;
+    if (importObj.hasOwnProperty('componentName')){
+      imported = true;
+      //Check if state and actions on import exist in the store. If not, add them.
+      for (let i = 0; i < importObj.actions.length; i++){
+        if (!this.userActions.includes(importObj.actions[i])){
+          this.createAction(importObj.actions[i])
+        }
+      }
+      for (let i = 0; i < importObj.state.length; i++){
+        if (!this.userState.includes(importObj.state[i])){
+          this.createState(importObj.state[i])
+        }
+      }
+      for (let i = 0; i < importObj.props.length; i++){
+        if (!this.userProps.includes(importObj.props[i])){
+          this.createProp(importObj.props[i])
+        }
+      }
+    }
+
+    if (imported === false && !this.componentNameInputValue.replace(/[^a-z0-9-_.]/gi, "")) {
+      event.preventDefault();
+      return false;
+    }
+
+    // boilerplate properties for each component upon creation
+    const component = {
+      x: 0,
+      y: 20,
+      z: 0,
+      w: 200,
+      h: 200,
+      htmlList: this.selectedElementList,
+      noteList: [],
+      children: [],
+      actions: [],
+      props: [],
+      state: [],
+      parent: {},
+      isActive: false,
+    };
+
+    if (imported === true){
+      component.componentName = importObj.componentName;
+      component.htmlList = importObj.htmlList;
+      component.actions = importObj.actions;
+      component.state = importObj.state;
+      component.props = importObj.props;
+    } else {
+      component.componentName = this.componentNameInputValue.replace(/[^a-z0-9-_.]/gi,"");
+    }
+    
+    if (!this.componentMap[component.componentName]) {
+      this.registerComponent(component);
+      this.setActiveComponent(component.componentName);
+    }
+  }
+  createComponent(importObj)
+}