fix pr

Desbordante · Jun 5, 2024 · f93f71f · f93f71f
1 parent 4c20287
commit f93f71f
Show file tree

Hide file tree

Showing 63 changed files with 240 additions and 330 deletions.
diff --git a/web-app/client/src/components/AlgorithmFormConfigurator/FormFooter.tsx b/web-app/client/src/components/AlgorithmFormConfigurator/FormFooter.tsx
@@ -1,5 +1,5 @@
 import Button from '@components/Button';
-import { Icon } from '@components/IconComponent';
+import Icon from '@components/Icon';
 import { NextRouter } from 'next/router';
 import React from 'react';
 

diff --git a/web-app/client/src/components/AuthSuccessModal/AuthSuccessModal.tsx b/web-app/client/src/components/AuthSuccessModal/AuthSuccessModal.tsx
@@ -4,14 +4,12 @@ import ModalContainer, { ModalProps } from '@components/ModalContainer';
 import { useAuthContext } from '@hooks/useAuthContext';
 import styles from './AuthSuccessModal.module.scss';
 
-const AuthSuccessModal: FC<ModalProps> = ({ onClose, isOpen, setIsOpen }) => {
+const AuthSuccessModal: FC<ModalProps> = ({ onClose, isOpen }) => {
   const { user } = useAuthContext();
-  onClose = () => setIsOpen(false);
 
   return (
     <ModalContainer
       isOpen={isOpen}
-      setIsOpen={setIsOpen}
       onClose={onClose}
       className={styles.authSuccessModal}
     >

diff --git a/web-app/client/src/components/Button/Button.tsx b/web-app/client/src/components/Button/Button.tsx
@@ -14,8 +14,6 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: ButtonVariant;
   size?: ButtonSize;
   icon?: ReactNode;
-  ref?: ((node: ReferenceType | null) => void) &
-    ((node: ReferenceType | null) => void);
 }
 
 const Button: FC<Props> = ({

diff --git a/web-app/client/src/components/Chart/ChartControls.tsx b/web-app/client/src/components/Chart/ChartControls.tsx
@@ -1,5 +1,5 @@
 import Button from '@components/Button';
-import { Icon } from '@components/IconComponent';
+import Icon from '@components/Icon';
 import { Text } from '@components/Inputs';
 import { FC } from 'react';
 import styles from './ChartControls.module.scss';

diff --git a/web-app/client/src/components/ClusterOptions/ClusterOptions.tsx b/web-app/client/src/components/ClusterOptions/ClusterOptions.tsx
@@ -1,5 +1,5 @@
 import Button from '@components/Button';
-import { Icon } from '@components/IconComponent';
+import Icon from '@components/Icon';
 import { Checkbox } from '@components/Inputs';
 import cn from 'classnames';
 import { Dispatch, FC, SetStateAction, useState } from 'react';

diff --git a/web-app/client/src/components/Collapse/Collapse.tsx b/web-app/client/src/components/Collapse/Collapse.tsx
@@ -1,4 +1,4 @@
-import { Icon } from '@components/IconComponent';
+import Icon from '@components/Icon';
 import cn from 'classnames';
 import { useState } from 'react';
 import { FCWithChildren } from 'types/react';

diff --git a/web-app/client/src/components/DatasetCard/DatasetCard.tsx b/web-app/client/src/components/DatasetCard/DatasetCard.tsx
@@ -1,13 +1,13 @@
-import { Icon } from '@components/IconComponent';
-import useModal from '@hooks/useModal';
+import Icon from '@components/Icon';
 import { useTaskUrlParams } from '@hooks/useTaskUrlParams';
 import classNames from 'classnames';
 import { formatDistance } from 'date-fns';
-import { FC, PropsWithChildren } from 'react';
+import { FC, PropsWithChildren, useState } from 'react';
 import '@formatjs/intl-numberformat/polyfill';
 import '@formatjs/intl-numberformat/locale-data/en';
 import { AllowedDataset } from 'types/algorithms';
 import styles from './DatasetCard.module.scss';
+import FilePropertiesModal from '@components/FilePropertiesModal';
 interface BaseCardProps extends PropsWithChildren {
   isSelected?: boolean;
   isDisabled?: boolean;
@@ -59,10 +59,11 @@ interface DatasetCardProps {
 }
 
 export const DatasetCard: FC<DatasetCardProps> = ({ file }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
   const { primitive, fileID } = useTaskUrlParams();
   const descriptionList = getFileDescription(file);
   const fileName = file.originalFileName;
-  const { open: openFilePropertiesModal } = useModal('FILE_PROPERTIES');
   const isDisabled =
     !primitive.value || !file.supportedPrimitives.includes(primitive.value);
 
@@ -77,10 +78,9 @@ export const DatasetCard: FC<DatasetCardProps> = ({ file }) => {
         <Icon
           name="threeDots"
           size={20}
-          onClick={() =>
-            openFilePropertiesModal({ fileID: file.fileID, data: file })
-          }
+          onClick={() => setIsOpen(true)}
         />
+        <FilePropertiesModal isOpen={isOpen} onClose={() => setIsOpen(false)} fileID={file.fileID} data={file} />
       </div>
       <div className={styles.cardDescription}>
         <span>{descriptionList.join('\n')}</span>

diff --git a/web-app/client/src/components/DatasetUploader/DatasetUploader.tsx b/web-app/client/src/components/DatasetUploader/DatasetUploader.tsx
@@ -1,6 +1,6 @@
 import { DefaultContext, useMutation, useQuery } from '@apollo/client';
 import cardStyles from '@components/DatasetCard/DatasetCard.module.scss';
-import { Icon } from '@components/IconComponent';
+import Icon from '@components/Icon';
 import ProgressBar, { Progress } from '@components/ProgressBar/ProgressBar';
 import {
   uploadDataset,
@@ -9,18 +9,22 @@ import {
 import { UPLOAD_DATASET } from '@graphql/operations/mutations/uploadDataset';
 import { getAlgorithmsConfig } from '@graphql/operations/queries/__generated__/getAlgorithmsConfig';
 import { GET_ALGORITHMS_CONFIG } from '@graphql/operations/queries/getAlgorithmsConfig';
-import useModal from '@hooks/useModal';
 import classNames from 'classnames';
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { AllowedDataset } from 'types/algorithms';
 import styles from './DatasetUploader.module.scss';
+import FilePropertiesModal from '@components/FilePropertiesModal';
 
 type Props = {
   onUpload: (file: AllowedDataset) => void;
+  isOpen: boolean;
+  setIsOpen: (prop: boolean) => void;
 };
 
-const DatasetUploader: FC<Props> = ({ onUpload }) => {
+const DatasetUploader: FC<Props> = ({ onUpload, isOpen, setIsOpen }) => {
   const inputFile = useRef<HTMLInputElement>(null);
+  //const [isOpen, setIsOpen] = useState(false);
+  const [filesState, setFiles] = useState<FileList | null>(null);
   const [isFileDragged, setIsFileDragged] = useState(false);
   const [isDraggedInside, setIsDraggedInside] = useState(false);
   const [fileUploadProgress, setFileUploadProgress] = useState<Progress>({
@@ -32,8 +36,6 @@ const DatasetUploader: FC<Props> = ({ onUpload }) => {
   const [uploadDataset] = useMutation<uploadDataset, uploadDatasetVariables>(
     UPLOAD_DATASET,
   );
-  const { open: openFilePropertiesModal, close: closeFilePropertiesModal } =
-    useModal('FILE_PROPERTIES');
 
   const onDrop = useCallback((e: DragEvent) => {
     e.preventDefault();
@@ -85,6 +87,9 @@ const DatasetUploader: FC<Props> = ({ onUpload }) => {
 
   const onChange = async (files: FileList | null) => {
     setIsDraggedInside(false);
+    setFiles(files);
+    setIsOpen(true);
+
     if (!algorithmsConfig) {
       setFileUploadProgress({ state: 'fail' });
       return;
@@ -102,97 +107,105 @@ const DatasetUploader: FC<Props> = ({ onUpload }) => {
       setFileUploadProgress({ state: 'fail' });
       return;
     }
+  };
 
-    openFilePropertiesModal({
-      onClose: () => {
-        setFileUploadProgress({ state: 'idle' });
-        closeFilePropertiesModal();
-      },
-      onSubmit: async (datasetProps) => {
-        try {
-          const { data } = await uploadDataset({
-            variables: {
-              datasetProps,
-              table: files[0],
-            },
-            context,
-          });
-          onUpload(data?.uploadDataset as AllowedDataset);
-          setFileUploadProgress({ state: 'complete' });
-        } catch (error) {
-          setFileUploadProgress({ state: 'fail' });
-        }
-      },
-    });
+  const onClose = () => {
+    setFileUploadProgress({ state: 'idle' });
+    setIsOpen(false);
+  };
+
+  const onSubmit = async (datasetProps) => {
+    if (!filesState) return;
+
+    try {
+      const { data } = await uploadDataset({
+        variables: {
+          datasetProps,
+          table: filesState[0],
+        },
+        context,
+      });
+      onUpload(data?.uploadDataset as AllowedDataset);
+      setFileUploadProgress({ state: 'complete' });
+    } catch (error) {
+      setFileUploadProgress({ state: 'fail' });
+    }
   };
 
   return (
-    <div
-      className={classNames(
-        cardStyles.card,
-        styles.uploader,
-        isFileDragged && styles.dragged_outside,
-        isDraggedInside && styles.dragged_inside,
-        styles[fileUploadProgress.state],
-      )}
-      tabIndex={0}
-      onClick={() => inputFile?.current?.click()}
-      onDragEnter={() => setIsDraggedInside(true)}
-      onDragOver={(e) => {
-        e.preventDefault();
-        setIsDraggedInside(true);
-      }}
-      onDragLeave={() => setIsDraggedInside(false)}
-      onDrop={(e) => onChange(e.dataTransfer.files)}
-    >
-      <div className={styles.uploader_title}>
-        {fileUploadProgress.state === 'idle' &&
-          !isFileDragged &&
-          !isDraggedInside && (
+    <>
+      <div
+        className={classNames(
+          cardStyles.card,
+          styles.uploader,
+          isFileDragged && styles.dragged_outside,
+          isDraggedInside && styles.dragged_inside,
+          styles[fileUploadProgress.state],
+        )}
+        tabIndex={0}
+        onClick={() => inputFile?.current?.click()}
+        onDragEnter={() => setIsDraggedInside(true)}
+        onDragOver={(e) => {
+          e.preventDefault();
+          setIsDraggedInside(true);
+        }}
+        onDragLeave={() => setIsDraggedInside(false)}
+        onDrop={(e) => onChange(e.dataTransfer.files)}
+      >
+        <div className={styles.uploader_title}>
+          {fileUploadProgress.state === 'idle' &&
+            !isFileDragged &&
+            !isDraggedInside && (
+              <>
+                <Icon name="upload" size={20} />
+                <p>Upload a File</p>
+              </>
+            )}
+          {(isFileDragged || isDraggedInside) && (
+            <>
+              <Icon name="drag" size={20} />
+              <p>Drop here</p>
+            </>
+          )}
+          {fileUploadProgress.state === 'process' && (
             <>
               <Icon name="upload" size={20} />
-              <p>Upload a File</p>
+              <p>Uploading...</p>
             </>
           )}
-        {(isFileDragged || isDraggedInside) && (
-          <>
-            <Icon name="drag" size={20} />
-            <p>Drop here</p>
-          </>
-        )}
-        {fileUploadProgress.state === 'process' && (
-          <>
-            <Icon name="upload" size={20} />
-            <p>Uploading...</p>
-          </>
-        )}
-        {fileUploadProgress.state === 'complete' && (
-          <>
-            <Icon name="check" size={20} />
-            <p>Complete</p>
-          </>
-        )}
-        {fileUploadProgress.state === 'fail' && (
-          <>
-            <Icon name="cross" size={20} />
-            <p>Error</p>
-          </>
+          {fileUploadProgress.state === 'complete' && (
+            <>
+              <Icon name="check" size={20} />
+              <p>Complete</p>
+            </>
+          )}
+          {fileUploadProgress.state === 'fail' && (
+            <>
+              <Icon name="cross" size={20} />
+              <p>Error</p>
+            </>
+          )}
+        </div>
+        {fileUploadProgress.state !== 'idle' && (
+          <ProgressBar progress={fileUploadProgress} />
         )}
+
+        <input
+          type="file"
+          id="file"
+          ref={inputFile}
+          style={{ display: 'none' }}
+          onChange={(e) => onChange(e.target.files)}
+          multiple={false}
+          accept=".csv, .CSV"
+        />
       </div>
-      {fileUploadProgress.state !== 'idle' && (
-        <ProgressBar progress={fileUploadProgress} />
-      )}
-
-      <input
-        type="file"
-        id="file"
-        ref={inputFile}
-        style={{ display: 'none' }}
-        onChange={(e) => onChange(e.target.files)}
-        multiple={false}
-        accept=".csv, .CSV"
+      <FilePropertiesModal
+        isOpen={isOpen}
+        onClose={onClose}
+        onSubmit={onSubmit}
       />
-    </div>
+    </>
   );
 };
 

diff --git a/web-app/client/src/components/DependencyList/DependencyList.tsx b/web-app/client/src/components/DependencyList/DependencyList.tsx
@@ -1,4 +1,4 @@
-import { Icon } from '@components/IconComponent';
+import Icon from '@components/Icon';
 import { useTaskContext } from '@components/TaskContext';
 import { GeneralColumn } from '@utils/convertDependencies';
 import classNames from 'classnames';

diff --git a/web-app/client/src/components/DownloadResult/DownloadResult.tsx b/web-app/client/src/components/DownloadResult/DownloadResult.tsx
@@ -1,6 +1,6 @@
 import { useMutation } from '@apollo/client';
 import Button from '@components/Button';
-import { Icon } from '@components/IconComponent';
+import Icon from '@components/Icon';
 import { useTaskContext } from '@components/TaskContext';
 import {
   downloadResults,

diff --git a/web-app/client/src/components/ExternalLink/ExternalLink.tsx b/web-app/client/src/components/ExternalLink/ExternalLink.tsx
@@ -1,4 +1,4 @@
-import { Icon } from '@components/IconComponent';
+import Icon from '@components/Icon';
 import cn from 'classnames';
 import { FC, HTMLProps } from 'react';
 import styles from './ExternalLink.module.scss';

diff --git a/web-app/client/src/components/FilePropertiesModal/FilePropertiesModal.tsx b/web-app/client/src/components/FilePropertiesModal/FilePropertiesModal.tsx
@@ -21,9 +21,10 @@ type Props = ModalProps &
       }
   );
 
-const FilePropertiesModal: FC<Props> = ({ onClose, ...props }) => {
+const FilePropertiesModal: FC<Props> = ({ isOpen, onClose, ...props }) => {
+
   return (
-    <ModalContainer onClose={onClose}>
+    <ModalContainer isOpen={isOpen} onClose={onClose}>
       <h4 className={styles.header}>File Properties</h4>
       {'data' in props ? (
         <TabView>

diff --git a/web-app/client/src/components/FileStats/Alert/Alert.tsx b/web-app/client/src/components/FileStats/Alert/Alert.tsx
@@ -1,4 +1,4 @@
-import { Icon } from '@components/IconComponent';
+import Icon from '@components/Icon';
 import colors from '@constants/colors';
 import classNames from 'classnames';
 import { FC, HTMLProps, ReactNode } from 'react';

diff --git a/web-app/client/src/components/FileStats/ColumnCard/ColumnCard.tsx b/web-app/client/src/components/FileStats/ColumnCard/ColumnCard.tsx
@@ -4,7 +4,7 @@ import { useToggle } from '@components/FileStats/hooks';
 import { ModeButton } from '@components/FileStats/ModeButton';
 import { Paper } from '@components/FileStats/Paper';
 import { StatsBlock } from '@components/FileStats/StatsBlock';
-import { Icon } from '@components/IconComponent';
+import Icon from '@components/Icon';
 import { getFileStats_datasetInfo_statsInfo_stats as ColumnStats } from '@graphql/operations/queries/__generated__/getFileStats';
 import classNames from 'classnames';
 import { FC, HTMLProps } from 'react';

diff --git a/web-app/client/src/components/FileStats/ModeButton/ModeButton.tsx b/web-app/client/src/components/FileStats/ModeButton/ModeButton.tsx
@@ -1,5 +1,5 @@
 import Button from '@components/Button';
-import { Icon } from '@components/IconComponent';
+import Icon from '@components/Icon';
 import classNames from 'classnames';
 import { ButtonHTMLAttributes, FC } from 'react';
 import styles from './ModeButton.module.scss';