Merge pull request #449 from Lemoncode/feature/#448-Refactor-relation…

…-buttons

[READY_TO_REVIEW]feature/#448 Refactor relation buttons

src/pods/canvas/canvas.pod.tsx

@@ -227,7 +227,13 @@ export const CanvasPod: React.FC = () => {
           onSelectElement={onSelectElement}
           isTabletOrMobileDevice={isTabletOrMobileDevice}
         />
-        {!loadSample && <CanvasAccessible canvasSchema={canvasSchema} />}
+        {!loadSample && (
+          <CanvasAccessible
+            canvasSchema={canvasSchema}
+            onEditRelation={handleEditRelation}
+            onDeleteSelectedItem={deleteSelectedItem}
+          />
+        )}
       </div>
     </div>
   );

src/pods/canvas/components/canvas-accessible/canvas-accessible.component.tsx

@@ -1,19 +1,26 @@
 import React from 'react';
 import { CollectionListAccessible, RelationListAccessible } from './components';
 import { DatabaseSchemaVm } from '@/core/providers';
+import { GUID } from '@/core/model';
 
 interface Props {
   canvasSchema: DatabaseSchemaVm;
+  onEditRelation: (relationId: GUID) => void;
+  onDeleteSelectedItem: (selectedItemId: string) => void;
 }
 
 export const CanvasAccessibleComponent: React.FC<Props> = props => {
-  const { canvasSchema } = props;
+  const { canvasSchema, onEditRelation, onDeleteSelectedItem } = props;
 
   return (
     <>
       <h1 id="canvas-title">Canvas</h1>
       <CollectionListAccessible canvasSchema={canvasSchema} />
-      <RelationListAccessible canvasSchema={canvasSchema} />
+      <RelationListAccessible
+        canvasSchema={canvasSchema}
+        onEditRelation={onEditRelation}
+        onDeleteSelectedItem={onDeleteSelectedItem}
+      />
     </>
   );
 };

src/pods/canvas/components/canvas-accessible/canvas-accessible.pod.tsx

@@ -2,12 +2,15 @@ import React from 'react';
 import classes from './canvas-accessible.pod.module.css';
 import { CanvasAccessibleComponent } from './canvas-accessible.component';
 import { DatabaseSchemaVm } from '@/core/providers';
+import { GUID } from '@/core/model';
 
 interface CanvasAccessibleProps {
   canvasSchema: DatabaseSchemaVm;
+  onEditRelation: (relationId: GUID) => void;
+  onDeleteSelectedItem: (selectedItemId: string) => void;
 }
 export const CanvasAccessible: React.FC<CanvasAccessibleProps> = props => {
-  const { canvasSchema } = props;
+  const { canvasSchema, onEditRelation, onDeleteSelectedItem } = props;
 
   const canvasAccessibleRef = React.useRef<HTMLDivElement>(null);
 
@@ -27,7 +30,11 @@ export const CanvasAccessible: React.FC<CanvasAccessibleProps> = props => {
       ref={canvasAccessibleRef}
       aria-live="polite"
     >
-      <CanvasAccessibleComponent canvasSchema={canvasSchema} />
+      <CanvasAccessibleComponent
+        canvasSchema={canvasSchema}
+        onEditRelation={onEditRelation}
+        onDeleteSelectedItem={onDeleteSelectedItem}
+      />
     </section>
   );
 };

src/pods/canvas/components/canvas-accessible/components/relation-accessible.component.tsx

@@ -1,29 +1,23 @@
 import React from 'react';
-import {
-  DatabaseSchemaVm,
-  RelationVm,
-  useCanvasSchemaContext,
-  useModalDialogContext,
-} from '@/core/providers';
+import { DatabaseSchemaVm, RelationVm } from '@/core/providers';
 import {
   findFields,
   getTableNameById,
   generateRouteField,
 } from './relation-accesible.bussines';
 import { GUID } from '@/core/model';
-import { EditRelationPod } from '@/pods/edit-relation';
-import { EDIT_RELATION_TITLE } from '@/common/components';
 
 interface Props {
   relation: RelationVm;
   index: number;
   canvas: DatabaseSchemaVm;
+  onEditRelation: (relationId: GUID) => void;
+  onDeleteSelectedItem: (selectedItemId: string) => void;
 }
 
 export const RelationAccessible: React.FC<Props> = props => {
-  const { relation, index, canvas } = props;
-  const { updateFullRelation, deleteSelectedItem } = useCanvasSchemaContext();
-  const { openModal, closeModal } = useModalDialogContext();
+  const { relation, index, canvas, onEditRelation, onDeleteSelectedItem } =
+    props;
 
   const originTableName = getTableNameById(canvas.tables, relation.fromTableId);
   const originFieldsFromTable = findFields(canvas.tables, relation.fromTableId);
@@ -50,36 +44,15 @@ export const RelationAccessible: React.FC<Props> = props => {
     []
   );
 
-  const handleChangeRelation = (relation: RelationVm) => {
-    updateFullRelation(relation);
-    closeModal();
-  };
-
-  const handleCloseEditRelation = () => {
-    closeModal();
-  };
-
-  const handleEditRelation = (relationId: GUID) => {
-    openModal(
-      <EditRelationPod
-        onChangeRelation={handleChangeRelation}
-        canvasSchema={canvas}
-        relationId={relationId}
-        onClose={handleCloseEditRelation}
-      />,
-      EDIT_RELATION_TITLE
-    );
-  };
-
   return (
     <>
       <h3>
         Relation {index}: {originTableName} - {originRouteOfFields} with{' '}
         {destinationTableName} - {destinationRouteOfFields}
-        <button onClick={() => handleEditRelation(relation.id)}>
+        <button onClick={() => onEditRelation(relation.id)}>
           Edit relation {index}
         </button>
-        <button onClick={() => deleteSelectedItem(relation.id)}>
+        <button onClick={() => onDeleteSelectedItem(relation.id)}>
           Delete relation {index}
         </button>
       </h3>

src/pods/canvas/components/canvas-accessible/components/relation-list-accessible.component.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
 import { RelationAccessible } from './relation-accessible.component';
 import { DatabaseSchemaVm } from '@/core/providers';
+import { GUID } from '@/core/model';
 
 interface Props {
   canvasSchema: DatabaseSchemaVm;
+  onEditRelation: (relationId: GUID) => void;
+  onDeleteSelectedItem: (selectedItemId: string) => void;
 }
 
 export const RelationListAccessible: React.FC<Props> = props => {
-  const { canvasSchema } = props;
+  const { canvasSchema, onEditRelation, onDeleteSelectedItem } = props;
   return (
     <>
       <h2>Relations</h2>
@@ -17,6 +20,8 @@ export const RelationListAccessible: React.FC<Props> = props => {
           key={relation.id}
           index={index + 1}
           canvas={canvasSchema}
+          onEditRelation={onEditRelation}
+          onDeleteSelectedItem={onDeleteSelectedItem}
         />
       ))}
     </>