Cup 824 clean console (#255)

* fix(package.json): fix missing .env file in generate api scripts

* fix(api): remove useless overwritten endpoint

* fix(components): add missing keys in iterators

* fix(search): put styled component outside the component

* chore(design-system): update version

Author: marcbon

package.json

@@ -3,7 +3,7 @@
   "version": "1.4.0",
   "private": true,
   "dependencies": {
-    "@appquality/unguess-design-system": "2.12.16",
+    "@appquality/unguess-design-system": "2.12.17",
     "@headwayapp/react-widget": "^0.0.4",
     "@reduxjs/toolkit": "^1.8.0",
     "@rtk-query/codegen-openapi": "^1.0.0-alpha.1",
@@ -42,8 +42,8 @@
     "recover": "yarn install --check-files",
     "eject": "react-scripts eject",
     "translate": "i18next-scanner",
-    "generate-schema": ". ./.env; npx openapi-typescript $REACT_APP_API_URL/reference/ --output src/common/schema.ts ",
-    "generate-api": ". ./.env; API_URL=$REACT_APP_API_URL/reference/ npx @rtk-query/codegen-openapi src/features/api/config.ts",
+    "generate-schema": ". ./.env.local; npx openapi-typescript $REACT_APP_API_URL/reference/ --output src/common/schema.ts ",
+    "generate-api": ". ./.env.local; API_URL=$REACT_APP_API_URL/reference/ npx @rtk-query/codegen-openapi src/features/api/config.ts",
     "generate-strapi": "npx @rtk-query/codegen-openapi src/features/backoffice/config.ts",
     "type:check": "tsc",
     "prettier": "prettier 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}'",

src/features/api/api.ts

@@ -1,10 +1,6 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 import { stringify } from 'qs';
-import {
-  GetWorkspacesByWidApiArg,
-  GetWorkspacesByWidApiResponse,
-  Template,
-} from '.';
+import { Template } from '.';
 
 export const apiSlice = createApi({
   reducerPath: 'api',
@@ -28,18 +24,9 @@ export const apiSlice = createApi({
     'Reports',
     'Templates',
   ],
-  endpoints: (build) => ({
-    getWorkspacesByWid: build.query<
-      GetWorkspacesByWidApiResponse,
-      GetWorkspacesByWidApiArg
-    >({
-      query: (queryArg) => ({ url: `/workspaces/${queryArg.wid}` }),
-    }),
-  }),
+  endpoints: () => ({}),
 });
 
-export const { useLazyGetWorkspacesByWidQuery } = apiSlice;
-
 export interface UseCaseTemplate extends Template {
   id?: number;
 }

src/pages/Dashboard/CampaignItem.tsx

@@ -23,7 +23,6 @@ export const CampaignItem = ({
   return (
     <CampaignCard
       className="suggested-campaign-card"
-      key={campaign.id}
       // isNew={campaign?.isNew} TODO: need an API update
       date={format(new Date(campaign.start_date), 'dd/MM/Y')}
       projectTitle={`${project.name}`}

src/pages/Dashboard/SuggestedCampaigns.tsx

@@ -50,7 +50,7 @@ export const SuggestedCampaigns = () => {
       <CardsContainer>
         <StyledRow>
           {campaigns.data.items.map((campaign) => (
-            <Col xs={10} md={6} lg={3}>
+            <Col xs={10} md={6} lg={3} key={`suggested_col_${campaign.id}`}>
               <CampaignItem
                 key={`suggested_${campaign.id}`}
                 campaign={campaign}

src/pages/Dashboard/campaigns-list/list.tsx

@@ -40,22 +40,23 @@ const CardGroup = ({ items }: { items: Array<Campaign> }) => {
   return (
     <>
       <Col
+        key={`campaign_project_col_${campaigns[0].project.id}`}
         size={12}
         style={{
           marginBottom: `${theme.space.base * 4}px`,
           marginTop: `${theme.space.base * 4}px`,
         }}
       >
-        <Span isBold key={campaigns[0].project.id}>
+        <Span isBold>
           {campaigns[0].project.name} ({items.length})
         </Span>
       </Col>
 
       {/* <CardsContainer> */}
       {campaigns.map((campaign) => (
-        <Col xs={12} md={6} lg={3}>
+        <Col xs={12} md={6} lg={3} key={`campaign_col_${campaign.id}`}>
           <CampaignItem
-            key={campaign.id}
+            key={`campaign_${campaign.id}`}
             campaign={campaign}
             onCampaignClicked={clickToggle}
             style={{ marginBottom: `${theme.space.base * 4}px` }}
@@ -65,7 +66,7 @@ const CardGroup = ({ items }: { items: Array<Campaign> }) => {
       {/* </CardsContainer> */}
 
       {items.length > 4 && (
-        <Col size={12}>
+        <Col size={12} key={`campaign_project_cta_${campaigns[0].project.id}`}>
           <FloatRight>
             <Button
               isBasic
@@ -90,8 +91,8 @@ export const CardList = ({
 }) => (
   <>
     {campaigns.map((group) => (
-      <Row>
-        <CardGroup items={group} />
+      <Row key={`cards_row_start_${group[0].id}`}>
+        <CardGroup key={`cards_group_start_${group[0].id}`} items={group} />
       </Row>
     ))}
   </>

src/pages/Dashboard/filters/search.tsx

@@ -7,6 +7,19 @@ import { useAppDispatch, useAppSelector } from 'src/app/hooks';
 import { searchFilterChanged } from 'src/features/campaignsFilter/campaignsFilterSlice';
 import styled from 'styled-components';
 
+const StyledField = styled(Field)`
+  width: 100%;
+  max-width: 100% !important;
+
+  > * {
+    width: 100%;
+  }
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.sm}) {
+    max-width: 260px;
+  }
+`;
+
 export const SearchInput = () => {
   const { t } = useTranslation();
   const dispatch = useAppDispatch();
@@ -15,19 +28,6 @@ export const SearchInput = () => {
 
   const [value, setValue] = useState(search || '');
 
-  const StyledField = styled(Field)`
-    width: 100%;
-    max-width: 100% !important;
-
-    > * {
-      width: 100%;
-    }
-
-    @media (min-width: ${({ theme }) => theme.breakpoints.sm}) {
-      max-width: 260px;
-    }
-  `;
-
   useEffect(() => {
     setValue(search || '');
   }, [search]);

src/pages/Dashboard/project-items/list.tsx

@@ -14,7 +14,7 @@ const CardGroup = ({ items }: { items: Array<Campaign> }) => {
       {items.map((campaign) => (
         <Col size={3} xs={12} md={6} lg={3}>
           <CampaignItem
-            key={campaign.id}
+            key={`campaign_${campaign.id}`}
             campaign={campaign}
             onCampaignClicked={clickToggle}
             style={{ marginBottom: `${theme.space.base * 4}px` }}

yarn.lock

@@ -42,10 +42,10 @@
     ajv-draft-04 "^1.0.0"
     call-me-maybe "^1.0.1"
 
-"@appquality/unguess-design-system@2.12.16":
-  version "2.12.16"
-  resolved "https://registry.yarnpkg.com/@appquality/unguess-design-system/-/unguess-design-system-2.12.16.tgz#50d9f724650ea5a6db293cd124edf7b6f4a16e3b"
-  integrity sha512-11OlAMEziwF5VNF5FjCuoJ1qVCyjQK9WT1NrghEBQ3Hzl+xpkYsiih65YzJ1e9RGtbJHiHPvb3OXQz/Ylke8FA==
+"@appquality/unguess-design-system@2.12.17":
+  version "2.12.17"
+  resolved "https://registry.yarnpkg.com/@appquality/unguess-design-system/-/unguess-design-system-2.12.17.tgz#d0edcd4772455df34cc716442056bd8dba3ab746"
+  integrity sha512-n3pOfWO8lbIXywjnrmq/txE+S2h2LXRyhYM6/P+/Oihz2uodcCoQbb8WN2q39Fuog8718MDQlD2r6ndkdjZMhg==
   dependencies:
     "@tiptap/extension-bubble-menu" "^2.0.0-beta.61"
     "@tiptap/extension-character-count" "^2.0.0-beta.31"