fix some comments 2

Desbordante · Dec 11, 2023 · 5e06bbb · 5e06bbb
1 parent 67f2bdf
commit 5e06bbb
Show file tree

Hide file tree

Showing 14 changed files with 105 additions and 99 deletions.
diff --git a/web-app/client/.gitignore b/web-app/client/.gitignore
@@ -42,5 +42,3 @@ globalTypes.ts
 cmsTypes.ts
 .graphqlconfig
 schema.graphql
-
-proxy.config.js
diff --git a/web-app/client/proxy.config.js b/web-app/client/proxy.config.js
@@ -28,5 +28,5 @@ module.exports = async () => {
       source: `${cmsProxyURL}/:path*`,
       destination: `${cmsGraphQLEndpoint}/:path*`,
     },
-  ]
-};
+  ];
+};
diff --git a/web-app/client/src/components/ACInstance/ACInstance.module.scss b/web-app/client/src/components/ACInstance/ACInstance.module.scss
@@ -26,7 +26,7 @@
   flex-direction: column;
   gap: 8px;
   width: 100%;
-  min-width: 0;  
+  min-width: 0;
 }
 
 .selected {
@@ -40,10 +40,10 @@
   gap: 8px;
 }
 
-.attr {
+.attribute {
   @include paragraph-small;
   border: 2px solid transparent;
-  border-radius: 8px;  
+  border-radius: 8px;
   padding-left: 8px;
   padding-right: 8px;
   background: $black-10;

diff --git a/web-app/client/src/components/ACInstance/ACInstance.tsx b/web-app/client/src/components/ACInstance/ACInstance.tsx
@@ -43,9 +43,9 @@ const ACInstance: FC<Props> = ({
   const [atom, setAtom] = useAtom(ACAtom);
   const handleSelect = () => {
     const instance: ACInstance = {
-      id: id,
-      attribute1: attributes.attr1,
-      attribute2: attributes.attr2,
+      id,
+      attribute1: attributes.attribute1,
+      attribute2: attributes.attribute2,
       intervals: intervals.intervals,
       outliers: outliers.outliers,
     };
@@ -64,21 +64,31 @@ const ACInstance: FC<Props> = ({
       <div className={styles.containerInner}>
         Operation
         <div className={styles.attributes}>
-          <div className={styles.attr}>{attributes.attr1}</div>
-          <OperationIcon className={styles.icons}/>
-          
-          <div className={styles.attr}>{attributes.attr2}</div>
+          <div className={styles.attribute}>{attributes.attribute1}</div>
+          <OperationIcon className={styles.icons} />
+
+          <div className={styles.attribute}>{attributes.attribute2}</div>
         </div>
       </div>
-      <CollapsableView
-        title="Intervals"
-        output={intervals.intervals.map((elem) => `[${elem[0]}, ${elem[1]}]`)}
-        amount={intervals.amount}
-      />
-      <CollapsableView
-        title="Outliers"
-        output={outliers.outliers.map((elem) => elem.toString())}
-      />
+      <CollapsableView title={`Intervals ${intervals.amount}`}>
+        {intervals.intervals.map((elem) => (
+          <>
+            <span
+              className={styles.spanS}
+              key={`intervals ${elem[0]} ${elem[1]}`}
+            >{`[${elem[0]}, ${elem[1]}]`}</span>{' '}
+          </>
+        ))}
+      </CollapsableView>
+      <CollapsableView title={`Outliers ${outliers.amount}`}>
+        {outliers.outliers.map((elem) => (
+          <>
+            <span className={styles.spanS} key={`Outliers ${elem}`}>
+              {elem}
+            </span>{' '}
+          </>
+        ))}
+      </CollapsableView>
     </div>
   );
 };

diff --git a/...nfigurator/ConfigureAlgorithm.module.scss → ...tor/AlgorithmFormConfigurator.module.scss b/...nfigurator/ConfigureAlgorithm.module.scss → ...tor/AlgorithmFormConfigurator.module.scss
@@ -4,7 +4,7 @@
   margin-top: 16px;
 }
 
-.baseFormContainer, .containerLess4Inputs {
+.baseFormContainer {
   display: flex;
   flex-direction: column;
   gap: 24px;
@@ -13,11 +13,11 @@
   max-width: 466px;
 }
 
-.bigFormContainer {
+.expandedFormContainer {
   max-width: 1100px;
 }
 
-.containerOver4Inputs {
+.expandedInputsContainer {
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 32px;

diff --git a/web-app/client/src/components/AlgorithmFormConfigurator/AlgorithmFormConfigurator.tsx b/web-app/client/src/components/AlgorithmFormConfigurator/AlgorithmFormConfigurator.tsx
@@ -1,12 +1,12 @@
-import cn from 'classnames';
-import { useRouter } from 'next/router';
 import FormFooter from '@components/AlgorithmFormConfigurator/FormFooter';
 import FormHeader from '@components/AlgorithmFormConfigurator/FormHeader';
 import useFormFactory from '@components/AlgorithmFormConfigurator/useFormFactory';
 import PresetSelector from '@components/PresetSelector';
 import WizardLayout from '@components/WizardLayout';
 import { UsedPrimitivesType } from '@constants/formPrimitives';
-import styles from './ConfigureAlgorithm.module.scss';
+import cn from 'classnames';
+import { useRouter } from 'next/router';
+import styles from './AlgorithmFormConfigurator.module.scss';
 
 type QueryProps<T extends UsedPrimitivesType> = {
   primitive: T;
@@ -33,22 +33,20 @@ const AlgorithmFormConfigurator = <T extends UsedPrimitivesType>({
     primitive,
     formParams,
   });
-  
+
   return (
     <WizardLayout header={FormHeader} footer={FormFooter(router, onSubmit)}>
       <div
         className={cn(
           styles.baseFormContainer,
-          entries.length > 4 && styles.bigFormContainer,
+          entries.length > 4 && styles.expandedFormContainer,
         )}
       >
         <div
           className={
-            styles[
-              entries.length > 4
-                ? 'containerOver4Inputs'
-                : 'baseFormContainer'
-            ]
+            entries.length > 4
+              ? styles.expandedInputsContainer
+              : styles.baseFormContainer
           }
         >
           <PresetSelector
@@ -62,11 +60,9 @@ const AlgorithmFormConfigurator = <T extends UsedPrimitivesType>({
         <div className={styles.line} />
         <div
           className={
-            styles[
-              entries.length > 4
-                ? 'containerOver4Inputs'
-                : 'containerLess4Inputs'
-            ]
+            entries.length > 4
+              ? styles.expandedInputsContainer
+              : styles.baseFormContainer
           }
         >
           {entries}

diff --git a/web-app/client/src/components/AlgorithmFormConfigurator/FormHeader.tsx b/web-app/client/src/components/AlgorithmFormConfigurator/FormHeader.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './ConfigureAlgorithm.module.scss';
+import styles from './AlgorithmFormConfigurator.module.scss';
 
 const FormHeader = (
   <>

diff --git a/web-app/client/src/components/CollapsableView/CollapsableView.tsx b/web-app/client/src/components/CollapsableView/CollapsableView.tsx
@@ -1,17 +1,16 @@
 import cn from 'classnames';
-import { FC, useLayoutEffect, useRef, useState } from 'react';
+import { useLayoutEffect, useRef, useState } from 'react';
+import { FCWithChildren } from 'types/react';
 import styles from './CollapsableView.module.scss';
 
 type Props = {
-  output: string[];
   title: string;
-  amount?: number;
 };
 
 const states = ['not required', 'hidden', 'view'] as const;
 type CollapseState = (typeof states)[number];
 
-const CollapsableView: FC<Props> = ({ output, title, amount }) => {
+const CollapsableView: FCWithChildren<Props> = ({ children, title }) => {
   const parentRef = useRef<HTMLDivElement>(null);
   const childRef = useRef<HTMLDivElement>(null);
   const [collapseState, setCollapseState] =
@@ -32,7 +31,6 @@ const CollapsableView: FC<Props> = ({ output, title, amount }) => {
   return (
     <div className={styles.container} ref={parentRef}>
       {title}
-      {amount && ` (${amount})`}
       <div className={styles.withShowAll}>
         <div
           className={cn(
@@ -41,11 +39,7 @@ const CollapsableView: FC<Props> = ({ output, title, amount }) => {
           )}
           ref={childRef}
         >
-          {output.map((elem) => (
-            <>
-              <span key={elem.toString()}>{elem}</span>{' '}
-            </>
-          ))}
+          {children}
           {collapseState === 'view' && (
             <button
               className={cn(styles.buttonShow, styles.withoutMargin)}

diff --git a/web-app/client/src/graphql/client.ts b/web-app/client/src/graphql/client.ts
@@ -7,6 +7,7 @@ import { customFetch } from '@graphql/customFetch';
 import { pathnameToLocalURL } from '@utils/pathnameToValidURL';
 
 const isServer = typeof window === 'undefined';
+
 const client = new ApolloClient({
   ssrMode: isServer,
   uri: isServer ? pathnameToLocalURL(serverProxyURL) : serverProxyURL,

diff --git a/web-app/client/src/pages/create-task/configure-algorithm.tsx b/web-app/client/src/pages/create-task/configure-algorithm.tsx
@@ -7,7 +7,7 @@ import {
   UsedPrimitivesType,
 } from '@constants/formPrimitives';
 import { useTaskUrlParams } from '@hooks/useTaskUrlParams';
-import styles from '@styles/configure-algorithm.module.scss';
+import styles from '@styles/ConfigureAlgorithm.module.scss';
 
 const ConfigureAlgorithm: NextPage = () => {
   const router = useRouter();

diff --git a/web-app/client/src/pages/reports/ACFakeData/data4InstanceList.ts b/web-app/client/src/pages/reports/ACFakeData/data4InstanceList.ts
@@ -1,12 +1,15 @@
-import { GetMainTaskDeps } from "@graphql/operations/queries/__generated__/GetMainTaskDeps";
+import {
+  GetMainTaskDeps,
+  Operation,
+} from '@graphql/operations/queries/__generated__/GetMainTaskDeps';
 
 export const myData: GetMainTaskDeps = {
   taskInfo: {
     __typename: 'TaskInfo',
     taskID: '22fcfc02-de6e-4e4b-b75d-16e3881f68ad',
     data: {
       __typename: 'ACTaskData',
-      operation: 'ADDITION',
+      operation: Operation.ADDITION,
       result: {
         __typename: 'ACTaskResult',
         taskID: '22fcfc02-de6e-4e4b-b75d-16e3881f68ad',
@@ -16,8 +19,8 @@ export const myData: GetMainTaskDeps = {
             __typename: 'AC',
             attributes: {
               __typename: 'Attributes',
-              attr1: 'Coffee',
-              attr2: 'Milk',
+              attribute1: 'Coffee',
+              attribute2: 'Milk',
             },
             intervals: {
               __typename: 'Intervals',
@@ -42,8 +45,8 @@ export const myData: GetMainTaskDeps = {
             __typename: 'AC',
             attributes: {
               __typename: 'Attributes',
-              attr1: 'Milk',
-              attr2: 'Chocolate',
+              attribute1: 'Milk',
+              attribute2: 'Chocolate',
             },
             intervals: {
               __typename: 'Intervals',
@@ -63,8 +66,8 @@ export const myData: GetMainTaskDeps = {
             __typename: 'AC',
             attributes: {
               __typename: 'Attributes',
-              attr1: 'Coffee',
-              attr2: 'Chocolate',
+              attribute1: 'Coffee',
+              attribute2: 'Chocolate',
             },
             intervals: {
               __typename: 'Intervals',
@@ -90,8 +93,8 @@ export const myData: GetMainTaskDeps = {
             __typename: 'AC',
             attributes: {
               __typename: 'Attributes',
-              attr1: 'Tea',
-              attr2: 'Milk',
+              attribute1: 'Tea',
+              attribute2: 'Milk',
             },
             intervals: {
               __typename: 'Intervals',
@@ -116,8 +119,8 @@ export const myData: GetMainTaskDeps = {
             __typename: 'AC',
             attributes: {
               __typename: 'Attributes',
-              attr1: 'Tea',
-              attr2: 'Chocolate',
+              attribute1: 'Tea',
+              attribute2: 'Chocolate',
             },
             intervals: {
               __typename: 'Intervals',
@@ -143,8 +146,8 @@ export const myData: GetMainTaskDeps = {
             __typename: 'AC',
             attributes: {
               __typename: 'Attributes',
-              attr1: 'Tea',
-              attr2: 'Coffee',
+              attribute1: 'Tea',
+              attribute2: 'Coffee',
             },
             intervals: {
               __typename: 'Intervals',

diff --git a/web-app/client/src/pages/reports/ac-instance-list.tsx b/web-app/client/src/pages/reports/ac-instance-list.tsx
@@ -1,10 +1,5 @@
+import OrderingIcon from '@assets/icons/ordering.svg?component';
 import ACAtom, { ACAtomDefaultValuesWithParams } from '@atoms/ACTaskAtom';
-import { Operation } from '@graphql/operations/queries/__generated__/GetMainTaskDeps';
-import { useAtom } from 'jotai';
-import { ReactElement, useEffect, useState } from 'react';
-import { FormProvider } from 'react-hook-form';
-import { ACSortBy, OrderBy, PrimitiveType } from 'types/globalTypes';
-import { NextPageWithLayout } from 'types/pageWithLayout';
 
 import ACInstance from '@components/ACInstance';
 import Button from '@components/Button';
@@ -13,10 +8,14 @@ import { Text } from '@components/Inputs';
 import Pagination from '@components/Pagination/Pagination';
 import ReportsLayout from '@components/ReportsLayout';
 import { TaskContextProvider } from '@components/TaskContext';
+import { Operation } from '@graphql/operations/queries/__generated__/GetMainTaskDeps';
 
 import styles from '@styles/Dependencies.module.scss';
-
-import OrderingIcon from '@assets/icons/ordering.svg?component';
+import { useAtom } from 'jotai';
+import { ReactElement, useEffect, useState } from 'react';
+import { FormProvider } from 'react-hook-form';
+import { PrimitiveType } from 'types/globalTypes';
+import { NextPageWithLayout } from 'types/pageWithLayout';
 
 import { myData } from './ACFakeData/data4InstanceList';
 
@@ -48,7 +47,7 @@ const ReportsAlgebraicConstraints: NextPageWithLayout = () => {
         atom.instanceSelected,
       ),
     });
-  }, [shownData.taskInfo.taskID]);
+  }, [atom.instanceSelected, setAtom, shownData.taskInfo.taskID]);
 
   return (
     <>
@@ -85,16 +84,19 @@ const ReportsAlgebraicConstraints: NextPageWithLayout = () => {
       </div>
 
       <div className={styles.rows}>
-        {ACs.map((value) => (
-          <ACInstance
-            key={`${value.attributes.attr1} ${value.attributes.attr2}`}
-            id={`${value.attributes.attr1} ${value.attributes.attr2}`}
-            attributes={value.attributes}
-            operation={operation}
-            intervals={value.intervals}
-            outliers={value.outliers}
-          />
-        ))}
+        {ACs.map((value) => {
+          const unique = `${value.attributes.attribute1} ${value.attributes.attribute2}`;
+          return (
+            <ACInstance
+              key={unique}
+              id={unique}
+              attributes={value.attributes}
+              operation={operation}
+              intervals={value.intervals}
+              outliers={value.outliers}
+            />
+          );
+        })}
       </div>
 
       <div className={styles.pagination}>
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,5 +28,5 @@ module.exports = async () => { @@
           source: `${cmsProxyURL}/:path*`,
           destination: `${cmsGraphQLEndpoint}/:path*`,
         },
-      ]
-    };
+      ];
+    };