Expand ts

electron.vite.config.ts

@@ -1,6 +1,5 @@
 import { resolve } from 'path'
 import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
-import react from '@vitejs/plugin-react'
 
 export default defineConfig({
   main: {
@@ -31,7 +30,7 @@ export default defineConfig({
         '@renderer': resolve('src/renderer/src')
       }
     },
-    plugins: [react()],
+    plugins: [],
     build: {
       rollupOptions: {
         output: {

src/main/controllers/componentController.js

@@ -286,7 +286,7 @@ export const parseAllComponents = (event, args, res) => {
     component.children = arrayOfChildFilePaths;
   })
 
-  console.log('components', components)
+  // console.log('components', components)
   res.locals.components = components
 
 
@@ -299,6 +299,7 @@ export const getCode = async (event, args, res) => {
     const decodedId = decodeURIComponent(id);
 
     const fileCode = fs.readFileSync(decodedId, 'utf-8');
+
     res.locals.componentCode = fileCode;
   } catch(err) {
     console.error(err);

src/main/index.ts

@@ -84,6 +84,7 @@ ipcMain.handle('code', async (e, args) => {
     let res = { locals: {componentCode: ''} };
 
     await getCode(e, args, res)
+
     return { status: 200, data: res.locals.componentCode }
   } catch (err) {
     console.error(err)

src/preload/index.d.ts

@@ -1,8 +1,29 @@
 import { ElectronAPI } from '@electron-toolkit/preload'
+import { SendReturnObject, SendData } from '../renderer/src/interfaces/stateInterfaces';
 
 declare global {
   interface Window {
     electron: ElectronAPI
-    api: unknown
+    api: {
+      openDialog: (action: string, config: DialogConfig) => Promise<OpenDialogResult>;
+      send: (route: string, data: SendData) => Promise<SendReturnObject>;
+    };
+    openExplorerModal: ExplorerModal;
   }
+
+}
+
+interface OpenDialogResult {
+  filePaths: string[];
 }
+
+interface DialogConfig {
+  title: string;
+  buttonLabel: string;
+  properties: string[];
+}
+
+interface ExplorerModal {
+  close: () => void;
+  showModal: () => void;
+}

src/preload/index.ts

@@ -1,10 +1,13 @@
 import { contextBridge, ipcRenderer } from 'electron'
 import { electronAPI } from '@electron-toolkit/preload'
+import { SendReturnObject, SendData } from '../renderer/src/interfaces/stateInterfaces';
+
+// type SendData = { id: string; filePath?: never } | { id: never; filePath: string; }
 
 // Custom APIs for renderer
 const api = {
   openDialog: (method, config) => ipcRenderer.invoke("dialog", method, config),
-  send: (route, data) => {
+  send: (route: string, data: SendData): void | Promise<string | SendReturnObject> => {
     let validRoutes = ['components', 'server', 'code'];
     if (validRoutes.includes(route)) return ipcRenderer.invoke(route, data);
   },

src/renderer/src/App.tsx

@@ -4,10 +4,10 @@ import Header from './components/Header';
 import Tree from './components/Tree';
 import ProjectPathModal from './components/ProjectPathModal';
 import Details from './components/Details';
-
+import { RootState } from './interfaces/stateInterfaces'
 
 function App(): JSX.Element {
-  const componentName = useSelector((state: any) => state.project.componentName)
+  const componentName = useSelector((state: RootState) => state.project.componentName)
 
   return (
     <div className="flex flex-col h-screen w-full">

src/renderer/src/components/ComponentCode.tsx

@@ -1,17 +1,16 @@
 import {useEffect} from 'react';
 import Prism from 'prismjs';
 import '../assets/prism.css';
-import { useSelector } from 'react-redux'
-
+import { useSelector } from 'react-redux';
+import { RootState } from '../interfaces/stateInterfaces';
 
 const ComponentCode = () => {
-  const activeComponentCode = useSelector((state: any) => state.detail.activeComponentCode)
+  const activeComponentCode = useSelector((state: RootState) => state.detail.activeComponentCode)
   useEffect(() => {
     Prism.highlightAll();
   }, [activeComponentCode])
 
 
-
   return (
     <div className='col-span-12 h-min bg-neutral p-4 rounded-xl'>
       <h3 className="font-bold">Component Code</h3>

src/renderer/src/components/Details.tsx

@@ -1,17 +1,18 @@
 import { useState, useEffect } from 'react';
-import { BrowserRouter as Router, Routes, Route, useLocation, useNavigate } from 'react-router-dom';
+import { Routes, Route, useLocation, useNavigate } from 'react-router-dom';
 import ModelPreview from './ModelPreview';
 import MethodButtonContainer from '@renderer/containers/MethodButtonContainer';
-import ComponentCode from './ComponentCode'
-import { useSelector } from 'react-redux'
+import ComponentCode from './ComponentCode';
+import { useSelector } from 'react-redux';
+import { RootState } from '../interfaces/stateInterfaces';
 
 function Details(): JSX.Element {
   const [height, setHeight] = useState<string | number>(0);
   const navigate = useNavigate();
   const location = useLocation();
-  const nodeInfo = useSelector((state: any) => state.project.nodeInfo);
-  const componentName = useSelector((state: any) => state.project.componentName)
-  const treeContainerClick = useSelector((state: any) => state.detail.treeContainerClick)
+  const nodeInfo = useSelector((state: RootState) => state.project.nodeInfo);
+  const componentName = useSelector((state: RootState) => state.project.componentName)
+  const treeContainerClick = useSelector((state: RootState) => state.detail.treeContainerClick)
 
   useEffect(() => {
       window.innerHeight > 800 ? setHeight('40vh') : setHeight('30vh');
@@ -23,7 +24,7 @@ function Details(): JSX.Element {
   }, [treeContainerClick])
 
 
-  const handler = (mouseDownEvent) => {
+  const handler = () => {
     // const startHeight = height;
     // const startPosition = mouseDownEvent.pageY;
     function onMouseMove(mouseMoveEvent) {

src/renderer/src/components/Header.tsx

@@ -4,12 +4,13 @@ import dirUpload from '../assets/images/directory-black.svg';
 import appLogo from '../assets/images/ReactRelay-logos/ReactRelay-logos_white.png';
 import { useDispatch, useSelector } from 'react-redux';
 import { setSearchValue, setShowSearch } from '../features/searchSlice';
+import { RootState } from '../interfaces/stateInterfaces';
 
 
 function Header({}): JSX.Element {
   const dispatch = useDispatch();
-  const searchBar = useSelector((state: any) => state.search.searchValue);
-  const showSearch = useSelector((state: any) => state.search.showSearch);
+  const searchBar = useSelector((state: RootState) => state.search.searchValue);
+  const showSearch = useSelector((state: RootState) => state.search.showSearch);
 
   const searchInputRef = useRef<HTMLInputElement | null>(null);
 
@@ -32,7 +33,6 @@ function Header({}): JSX.Element {
         {showSearch && (
           <input
             ref={searchInputRef}
-            id="search-input"
             className="input border p-3 input-sm"
             type="text"
             id='componentSearch'

src/renderer/src/components/ModelPreview.tsx

@@ -2,10 +2,11 @@ import Prism from 'prismjs';
 import '../assets/prism.css';
 import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
+import { RootState } from '../interfaces/stateInterfaces';
 
 function ModelPreview() {
-  const serverSchemas = useSelector((state: any) => state.project.server);
-  const activeRoute = useSelector((state: any) => state.detail.activeRoute);
+  const serverSchemas = useSelector((state: RootState) => state.project.server);
+  const activeRoute = useSelector((state: RootState) => state.detail.activeRoute);
 
   //use Prism API to highlight the displayed schemas
   useEffect(() => {

src/renderer/src/components/ProjectPathModal.tsx

@@ -1,11 +1,11 @@
 import { useSelector, useDispatch } from 'react-redux';
 import { addPath, setComponents, setServer } from '../features/projectSlice'
-
+import { RootState } from '../interfaces/stateInterfaces';
 function ProjectPathModal() {
 
   const dispatch = useDispatch();
-  const componentPath = useSelector((state: any) => state.project.componentPath)
-  const serverPath = useSelector((state: any) => state.project.serverPath)
+  const componentPath = useSelector((state: RootState) => state.project.componentPath)
+  const serverPath = useSelector((state: RootState) => state.project.serverPath)
 
   const dialogConfig = {
       title: 'Select a project',
@@ -14,21 +14,21 @@ function ProjectPathModal() {
     }
     // window.api.openDialog returns the filepath when the filepath is chosen from the dialog
     // should i add a case where user doesn't actually select a filepath
-    const openFileExplorer = async (pathType): Promise<any> => { //FIXME: add to type
-      const {filePaths} = await (window as any).api.openDialog('showOpenDialog', dialogConfig) //TODO: add to type
+    const openFileExplorer = async (pathType): Promise<void | null> => { //FIXME: add to type
+      const {filePaths} = await window.api.openDialog('showOpenDialog', dialogConfig) //TODO: add to type
       // if user chooses cancel then don't do anything
       if (filePaths[0] === '' || !filePaths[0]) return null;
       dispatch(addPath([pathType, filePaths[0]]));
   }
 
-  const postPath = async (pathType, path): Promise<any> => {
+  const postPath = async (pathType, path): Promise<void | null> => {
     if (path === '' || !path) return null;
     console.log('componentPath', pathType, path)
     const endpoint = {
       component: `components`,
       server: `server`
     }
-    const response = await (window as any).api.send(endpoint[pathType], { filePath: path })  // sends to the componentController or serverASTController the filepath
+    const response = await window.api.send(endpoint[pathType], { filePath: path })  // sends to the componentController or serverASTController the filepath
     console.log('response', response)
     if (response.status >=200 && response.status < 300) {
       console.log('pathtype:', pathType, 'path:', path, 'res:', response.data)
@@ -41,7 +41,7 @@ function ProjectPathModal() {
     console.log('component', componentPath)
     postPath('component', componentPath);
     postPath('server', serverPath);
-    (window as any).openExplorerModal.close();
+    window.openExplorerModal.close();
   }
 
   return (
@@ -79,7 +79,7 @@ function ProjectPathModal() {
       <div className='flex justify-between items-end'>
         <div className="modal-action">
           {/* if there is a button in form, it will close the modal */}
-          <button className="btn bg-error" onClick={()=>(window as any).openExplorerModal.close()}>Cancel</button>
+          <button className="btn bg-error" onClick={()=> window.openExplorerModal.close()}>Cancel</button>
         </div>
         <div>
           <button onClick={()=>onContinue()} className='btn bg-primary'>Continue</button>

src/renderer/src/components/Tree.tsx

@@ -23,7 +23,9 @@ import {
 } from '../features/projectSlice';
 import { setTreeContainerClick,
   setActive,
-  setActiveComponentCode } from '../features/detailSlice'
+  setActiveComponentCode } from '../features/detailSlice';
+import { RootState, Component } from '../interfaces/stateInterfaces';
+
 const nodeTypes = {
   CustomNode,
   CustomNode2,
@@ -83,16 +85,10 @@ const getLayoutedElements = (nodes, edges, direction = 'LR') => {
 
 // setting the types for different components
 
-type Component = {
-  id: string;
-  data: any;
-  children: string[];
-  ajaxRequests: string[];
-};
 
 type Node = {
   id: string;
-  data: any;
+  data: { label: string, active: boolean };
   position: { x: number; y: number };
   type: string;
 };
@@ -110,8 +106,8 @@ type Edge = {
 function Tree({}): JSX.Element {
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
-  const reactFlowComponents = useSelector((state: any) => state.project.components);
-  const active = useSelector((state: any) => state.detail.active);
+  const reactFlowComponents = useSelector((state: RootState) => state.project.components);
+  const active = useSelector((state: RootState) => state.detail.active);
   const dispatch = useDispatch();
   //components that are re-used are given unique id's by adding a number to the end of the AFP. this function converts that id back to the AFP (i.e. as it appears in reactFlowComponents), then return the object associated with this AFP key in reactFlowComponents.
   const getComponentFromNodeId = (id: string): Component => {
@@ -164,7 +160,7 @@ function Tree({}): JSX.Element {
     //filter for components that have no parent, then invoke 'gatherChildren' on each of them
     // console.log('list of children and their id ---> ', listOfChildIds);
     const roots = Object.values(reactFlowComponents).filter(
-      (obj: any): obj is Component => !listOfChildIds.has(obj.id)
+      (obj: Component) => !listOfChildIds.has(obj.id)
     );
     // console.log('ROOTS ----> ', roots);
     if (roots.length) roots.forEach((root) => gatherChildren(root)); //iterate thru each root and gather it's children
@@ -259,7 +255,7 @@ function Tree({}): JSX.Element {
     });
     dispatch(setActive(element.id));
     const encodedId = encodeURIComponent(component.id);
-    const componentCode = await (window as any).api.send('code', { id: encodedId });
+    const componentCode = await window.api.send('code', { id: encodedId });
     // console.log(componentCode, 'componentCode');
     // console.log('data', data)
     dispatch(setActiveComponentCode(componentCode.data));

src/renderer/src/components/custom-nodes/custom-node.tsx

@@ -1,29 +1,13 @@
 // Path: src/renderer/src/components/CustomNodes.jsx
-import React, { useMemo, useEffect, useState } from 'react';
-import { Handle, Position } from 'reactflow';
+import React from 'react';
+import { Handle } from 'reactflow';
 import 'tailwindcss/tailwind.css';
 import { useSelector } from 'react-redux';
-
-interface NodeProps {
-  data: {
-    label: string,
-    active: boolean,
-  };
-  sourcePosition: {
-    x: number,
-    y: number,
-  };
-  targetPosition: number,
-}
-
-const handleStyle = {
-  //why is this decalred but never read
-  left: 10,
-  style: 'bg-primary',
-};
+import { RootState } from '@renderer/interfaces/stateInterfaces';
+import { NodeProps, Position } from 'reactflow';
 
 const checkForSearchMatch = (label: string) => {
-  return useSelector((state: any) => {
+  return useSelector((state: RootState) => {
     const searchValue = state.search.searchValue.toLowerCase();
     return label.toLowerCase().includes(searchValue) ? searchValue : null;
   }, (a,b) => a === b)
@@ -32,7 +16,7 @@ const checkForSearchMatch = (label: string) => {
 const CustomNode = React.memo<NodeProps>(({ data, sourcePosition, targetPosition }) => {
   const { label } = data;
   const searchValue = checkForSearchMatch(label.toLowerCase());
-
+  console.log('sourcePosition', typeof sourcePosition, 'targetPos', targetPosition)
 
   return (
     <div
@@ -41,7 +25,7 @@ const CustomNode = React.memo<NodeProps>(({ data, sourcePosition, targetPosition
       } cursor-pointer min-h-4 max-h-16 p-1 w-fit shadow-md bg-blend-normal rounded-lg border-2 border-slate-500`}
     >
       {/* Handle are the dotes on the edge of the node where the lines connect */}
-      <Handle type='target' position={targetPosition} />
+      <Handle type='target' position={targetPosition || Position.Left} />
       <p
         className={`custom-node flex flex-column items-center ${
           data.active
@@ -53,7 +37,7 @@ const CustomNode = React.memo<NodeProps>(({ data, sourcePosition, targetPosition
       </p>
       <Handle
         type='source'
-        position={sourcePosition}
+        position={sourcePosition || Position.Right}
         id='a'
         className='source-handle'
       />