Merge pull request #5 from CrystallizeAPI/fix/import-grouping

fix: grouping items
CrystallizeAPI · May 29, 2024 · b4c7dd4 · b4c7dd4
2 parents f5bf955 + df86502
commit b4c7dd4
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 10 deletions.
diff --git a/components/crystallize-import/src/ui/import/App.tsx b/components/crystallize-import/src/ui/import/App.tsx
@@ -4,6 +4,7 @@ import { DataMatchingForm } from './components/DataForm';
 import { FileChooser } from './components/FileChooser';
 import { useImport } from './provider';
 import { useEffect, useState } from 'react';
+
 const messageFactory = (decoded: any) => {
     switch (decoded.event) {
         case 'started':
@@ -43,6 +44,7 @@ export const App = () => {
     const { shapes, folders } = state;
     const [streamLogs, setStreamLogs] = useState<any[]>([]);
     const data = useEventSource(`/api/import/stream/${state.importId}`, { event: 'log' });
+    const [grouping, setGrouping] = useState<string>(state.headers[0] ?? '');
 
     useEffect(() => {
         if (state.done) {
@@ -52,6 +54,11 @@ export const App = () => {
             setStreamLogs((prev) => [...prev, data]);
         }
     }, [data, state.done]);
+
+    useEffect(() => {
+        dispatch.updateGroupProductsBy(grouping);
+    }, [grouping]);
+
     return (
         <div style={{ fontFamily: 'system-ui, sans-serif', lineHeight: '1.4', padding: '0px 50px 200px' }}>
             <ActionBar shapes={shapes} folders={folders} />
@@ -98,14 +105,14 @@ export const App = () => {
                         <label></label>
                     </div>
                     <div className="max-w-sm">
-                        <label className="pb-4 block ">
-                            Group products by variants <br />
+                        <label className="pb-4 block">
+                            Group products by: <br />
                         </label>
-
                         <select
-                            className="grey"
-                            onChange={(e) => dispatch.updateGroupProductsBy(e.target.value)}
+                            className="grey w-[200px]"
+                            onChange={(e) => setGrouping(e.target.value)}
                             disabled={!state.rows?.length}
+                            value={grouping}
                         >
                             <option defaultChecked={true} disabled value="">
                                 Select a column

diff --git a/components/crystallize-import/src/ui/import/components/data-grid/ColumnHeader.tsx b/components/crystallize-import/src/ui/import/components/data-grid/ColumnHeader.tsx
@@ -1,12 +1,11 @@
+import { useState } from 'react';
 import { Popover } from 'react-tiny-popover';
 import cn from 'classnames';
-
 import { AiFillCaretDown } from 'react-icons/ai';
-import { BsTrash, BsTrashFill } from 'react-icons/bs';
+import { BsTrash } from 'react-icons/bs';
 import { useImport } from '../../provider';
-import { useState } from 'react';
 import { FieldMapping, FIELD_MAPPINGS } from '../../../../contracts/ui-types';
-import { ComponentChoiceComponentConfig, Shape } from '@crystallize/schema';
+import { Shape } from '@crystallize/schema';
 
 interface ColumnMapperProps {
     title: string;
@@ -144,7 +143,11 @@ export const ColumnHeader = ({ title }: ColumnHeaderProps) => {
                                     .filter((shape) => shape.type === 'folder')
                                     .map((shape) => (
                                         <li
-                                            className={`popover-item ${subFolderMapped?.shapeIdentifier === shape.identifier ? 'font-bold ' : ''}`}
+                                            className={`popover-item ${
+                                                subFolderMapped?.shapeIdentifier === shape.identifier
+                                                    ? 'font-bold '
+                                                    : ''
+                                            }`}
                                             key={shape.identifier}
                                             onClick={() => {
                                                 const newMapping = [