added suggestions from review

telicent-oss · May 10, 2024 · 88cbd28 · 88cbd28
1 parent b23835a
commit 88cbd28
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 28 deletions.
diff --git a/src/Components/Diagram/EdgeDialog.tsx b/src/Components/Diagram/EdgeDialog.tsx
@@ -11,15 +11,15 @@ interface EdgeDialogProps {
 export const EdgeDialog: FC<EdgeDialogProps> = ({ options, onClose, title, onSubmit }) => {
   const [selectedEdgeType, setSelectedEdgeType] = useState<string | null>(null)
 
-  const onChangePrefix = (event: React.SyntheticEvent<Element, Event>, value: string | null) => {
+  const handleChangePrefix = (event: React.SyntheticEvent<Element, Event>, value: string | null) => {
     event.preventDefault()
     if (!value) {
       console.warn("Invalid value", value)
     }
     setSelectedEdgeType(value)
   }
 
-  const onHandleSubmit = () => {
+  const handleSubmit = () => {
     if (!selectedEdgeType) {
       console.warn("Edge must have valid inputs")
       return
@@ -31,10 +31,10 @@ export const EdgeDialog: FC<EdgeDialogProps> = ({ options, onClose, title, onSub
     <DialogBox onClose={onClose} title={title}>
       <div className="dark:text-whiteSmoke flex flex-col gap-y-8 rounded">
         <div className='flex gap-x-2'>
-          <TeliAutocomplete options={options} width={150} label="Object Property:" onChange={onChangePrefix} />
+          <TeliAutocomplete options={options} width={150} label="Object Property:" onChange={handleChangePrefix} />
         </div>
         <div className='flex justify-end w-full'>
-          <TeliButton onClick={onHandleSubmit} variant="secondary" disabled={!selectedEdgeType}>Submit</TeliButton>
+          <TeliButton onClick={handleSubmit} variant="secondary" disabled={!selectedEdgeType}>Submit</TeliButton>
         </div>
       </div>
     </DialogBox>

diff --git a/src/Components/Diagram/LiteralDialog.tsx b/src/Components/Diagram/LiteralDialog.tsx
@@ -26,13 +26,13 @@ export const LiteralDialog: FC<LiteralDialogProps> = ({ options, onClose, title,
     }
   }, [])
 
-  const onChangeName: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+  const handleChangeAttribute: React.ChangeEventHandler<HTMLInputElement> = (event) => {
     event.preventDefault()
 
     setAttributeValue(event.target.value)
   }
 
-  const onChangeEdgeType = (event: React.SyntheticEvent<Element, Event>, value: string | null) => {
+  const handleChangeEdgeType = (event: React.SyntheticEvent<Element, Event>, value: string | null) => {
     event.preventDefault()
     if (!value) {
       console.warn("Invalid value", value)
@@ -53,8 +53,8 @@ export const LiteralDialog: FC<LiteralDialogProps> = ({ options, onClose, title,
     <DialogBox onClose={onClose} title={title}>
       <div className="dark:text-whiteSmoke flex flex-col gap-y-8 rounded">
         <div className='flex gap-x-2'>
-          <TeliAutocomplete options={options} width={150} label="DataTypeProperty" onChange={onChangeEdgeType} value={selectedEdgeType} />
-          <TeliTextField id="attribute-value" label="Value" onChange={onChangeName} value={attributeValue} required />
+          <TeliAutocomplete options={options} width={150} label="DataTypeProperty" onChange={handleChangeEdgeType} value={selectedEdgeType} />
+          <TeliTextField id="attribute-value" label="Value" onChange={handleChangeAttribute} value={attributeValue} required />
         </div>
         <div className='flex justify-end w-full'>
           <TeliButton onClick={onHandleSubmit} variant="secondary" disabled={!attributeValue || !selectedEdgeType}>Submit</TeliButton>

diff --git a/src/Components/Diagram/NodeDialog.tsx b/src/Components/Diagram/NodeDialog.tsx
@@ -17,7 +17,7 @@ export const NodeDialog: FC<NodeDialogProps> = ({ options, onClose, title, onSub
   useEffect(() => {
     const handleKeyPress = (event: KeyboardEvent) => {
       if (event.key === 'Enter') {
-        onHandleSubmit()
+        handleSubmit()
       }
     }
     document.addEventListener('keypress', handleKeyPress)
@@ -26,14 +26,14 @@ export const NodeDialog: FC<NodeDialogProps> = ({ options, onClose, title, onSub
     }
   }, [])
 
-  const onChangeName: React.ChangeEventHandler<HTMLInputElement> = (event) => {
+  const handleChangeName: React.ChangeEventHandler<HTMLInputElement> = (event) => {
     event.preventDefault()
     if (!event.target.value) return
 
     setName(event.target.value)
   }
 
-  const onChangePrefix = (event: React.SyntheticEvent<Element, Event>, value: string | null) => {
+  const handleChangePrefix = (event: React.SyntheticEvent<Element, Event>, value: string | null) => {
     event.preventDefault()
     if (!value) {
       console.warn("Invalid value", value)
@@ -42,7 +42,7 @@ export const NodeDialog: FC<NodeDialogProps> = ({ options, onClose, title, onSub
     setSelectedPrefix(value)
   }
 
-  const onHandleSubmit = () => {
+  const handleSubmit = () => {
     if (!selectedPrefix || !name) {
       console.warn("Node must have valid inputs")
       return
@@ -54,11 +54,11 @@ export const NodeDialog: FC<NodeDialogProps> = ({ options, onClose, title, onSub
     <DialogBox onClose={onClose} title={title}>
       <div className="dark:text-whiteSmoke flex flex-col gap-y-8 rounded">
         <div className='flex gap-x-2'>
-          <TeliAutocomplete options={options} width={150} label="Prefix" onChange={onChangePrefix} value={selectedPrefix} />
-          <TeliTextField id="node-name" label="URI" onChange={onChangeName} value={name} required />
+          <TeliAutocomplete options={options} width={150} label="Prefix" onChange={handleChangePrefix} value={selectedPrefix} />
+          <TeliTextField id="node-name" label="URI" onChange={handleChangeName} value={name} required />
         </div>
         <div className='flex justify-end w-full'>
-          <TeliButton onClick={onHandleSubmit} variant="secondary" disabled={!name || !selectedPrefix}>Submit</TeliButton>
+          <TeliButton onClick={handleSubmit} variant="secondary" disabled={!name || !selectedPrefix}>Submit</TeliButton>
         </div>
       </div>
     </DialogBox>

diff --git a/src/helpers/index.ts b/src/helpers/index.ts
@@ -112,13 +112,13 @@ export const isDataTypeProperty = (q: Quad) => !isUsingAllNamedNodes(q)
 export const isNode = (q: Quad) => isUsingAllNamedNodes(q) && isRdfType(q)
 
 export const connectNodesWithReactFlowId = (nodes: Array<Node>, objectProperties: Array<Edge>, dataTypeProperties: Array<Node>) => {
-  const { edges } = objectProperties.reduce((accumulator, objectProperty) => {
+  const edges = objectProperties.reduce((accumulator, objectProperty) => {
     // find normal nodes and get connection id's
     const sourceNode = nodes.find(n => n.data.id === objectProperty.source);
     const targetNode = nodes.find(n => n.data.id === objectProperty.target);
 
     if (!sourceNode || !targetNode) {
-      accumulator.edges.push(objectProperty);
+      accumulator.push(objectProperty);
       return accumulator;
     }
 
@@ -128,7 +128,7 @@ export const connectNodesWithReactFlowId = (nodes: Array<Node>, objectProperties
       target: targetNode.id
     };
 
-    accumulator.edges.push(updatedObjectProperty);
+    accumulator.push(updatedObjectProperty);
 
     // Additional logic here, for example, adding to dataTypePropertyNodes array
     // once node is created create edge between the two nodes
@@ -148,12 +148,12 @@ export const connectNodesWithReactFlowId = (nodes: Array<Node>, objectProperties
       type: "relationshipEdge"
     }
 
-    accumulator.edges.push(dtpEgde)
+    accumulator.push(dtpEgde)
 
     return accumulator;
-  }, {
-    edges: new Array<Edge>()
-  });
+  },
+    new Array<Edge>()
+  );
 
   return edges
 }

diff --git a/src/rdfInstanceViewer/RdfInstancePresenter.ts b/src/rdfInstanceViewer/RdfInstancePresenter.ts
@@ -1,4 +1,4 @@
-import { inject, injectable, targetName } from "inversify";
+import { inject, injectable } from "inversify";
 import { Quad } from '@rdfjs/types'
 import { Parser, Prefixes, Writer, DataFactory, Store } from "n3";
 import { action, computed, makeObservable, observable, runInAction } from "mobx";
@@ -263,10 +263,10 @@ export class RdfInstancePresenter {
   onError = (err: QuadError) => {
     runInAction(() => {
       this.rdfInstanceRepository.markers = [{
-        startColumn: err?.context.previousToken?.start ?? 0,
-        endColumn: err?.context.previousToken?.end ?? 0,
-        startLineNumber: err?.context.line,
-        endLineNumber: err?.context.line,
+        startColumn: err.context.previousToken?.start ?? 0,
+        endColumn: err.context.previousToken?.end ?? 0,
+        startLineNumber: err.context.line,
+        endLineNumber: err.context.line,
         message: err.message,
         severity: MarkerSeverity.Error
       }]
@@ -334,7 +334,6 @@ export class RdfInstancePresenter {
       }
     })
     writer.end((_, result) => {
-      console.log({ result })
       this.rdfInstanceRepository.rdf = result
     });
   }