refactor(app): fix some of the errors and all deprecated errors

altence · Feb 13, 2023 · 44d7e6f · 44d7e6f
1 parent d9f6103
commit 44d7e6f
Show file tree

Hide file tree

Showing 65 changed files with 667 additions and 709 deletions.
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "@lit-labs/react": "^1.0.2",
     "@reduxjs/toolkit": "^1.7.1",
     "antd": "^4.22.4",
-    "antd-mask-input": "^0.1.15",
+    "antd-mask-input": "^2.0.7",
     "axios": "^0.24.0",
     "axios-mock-adapter": "^1.20.0",
     "country-list": "^2.2.0",
@@ -34,7 +34,7 @@
     "react": "^17.0.2",
     "react-country-flag": "^3.0.2",
     "react-dom": "^17.0.2",
-    "react-helmet": "^6.1.0",
+    "react-helmet-async": "^1.3.0",
     "react-i18next": "^11.11.4",
     "react-infinite-scroll-component": "^6.1.0",
     "react-insta-stories": "^2.3.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { ConfigProvider } from 'antd';
+import { HelmetProvider } from 'react-helmet-async';
 import deDe from 'antd/lib/locale/de_DE';
 import enUS from 'antd/lib/locale/en_US';
 import GlobalStyle from './styles/GlobalStyle';
@@ -27,9 +28,11 @@ const App: React.FC = () => {
     <>
       <meta name="theme-color" content={themeObject[theme].primary} />
       <GlobalStyle />
-      <ConfigProvider locale={language === 'en' ? enUS : deDe}>
-        <AppRouter />
-      </ConfigProvider>
+      <HelmetProvider>
+        <ConfigProvider locale={language === 'en' ? enUS : deDe}>
+          <AppRouter />
+        </ConfigProvider>
+      </HelmetProvider>
     </>
   );
 };

diff --git a/src/api/covid.api.ts b/src/api/covid.api.ts
@@ -1,20 +1,18 @@
 import axios from 'axios';
 
+interface Data {
+  [key: string]: number;
+}
+
 export interface CoronaData {
-  updated_at: string;
-  date: string;
-  deaths: number;
-  confirmed: number;
-  recovered: number;
-  new_confirmed: number;
-  new_recovered: number;
-  new_deaths: number;
-  active: number;
+  cases: Data;
+  deaths: Data;
+  recovered: Data;
 }
 
-export const getCovidData = async (): Promise<{ data: CoronaData[] } | undefined> => {
+export const getCovidData = async (): Promise<CoronaData | undefined> => {
   try {
-    const response = await axios.get<{ data: CoronaData[] }>('https://corona-api.com/timeline');
+    const response = await axios.get<CoronaData>('https://disease.sh/v3/covid-19/historical/all?lastdays=all');
 
     return response.data;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

diff --git a/src/components/apps/kanban/Card/Card.styles.ts b/src/components/apps/kanban/Card/Card.styles.ts
@@ -8,7 +8,7 @@ import {
   Footer,
 } from 'react-trello/dist/styles/Base';
 import { DownOutlined } from '@ant-design/icons';
-import { Collapse, Menu } from 'antd';
+import { Collapse } from 'antd';
 import InlineInput from 'react-trello/dist/widgets/InlineInput';
 import { FONT_SIZE, FONT_WEIGHT } from '@app/styles/themes/constants';
 
@@ -95,14 +95,6 @@ export const CardFooter = styled(Footer)`
   justify-content: flex-start;
 `;
 
-export const CardMenu = styled(Menu)`
-  box-shadow: var(--box-shadow-hover);
-`;
-
-export const MenuItem = styled(Menu.Item)`
-  font-size: ${FONT_SIZE.xs};
-`;
-
 export const Input = styled(InlineInput)`
   && {
     max-height: 28.125rem;

diff --git a/src/components/apps/kanban/Card/Card.tsx b/src/components/apps/kanban/Card/Card.tsx
@@ -23,27 +23,6 @@ interface CardProps {
   editable: boolean;
 }
 
-interface EditPopoverProps {
-  onDelete: () => void;
-  onArchive: () => void;
-}
-
-const EditPopover: React.FC<EditPopoverProps> = ({ onDelete, onArchive, ...props }) => {
-  const { t } = useTranslation();
-
-  return (
-    <S.CardMenu selectable={false} {...props}>
-      <S.MenuItem key="1" onClick={onDelete}>
-        {t('common.delete')}
-      </S.MenuItem>
-
-      <S.MenuItem key="2" onClick={onArchive}>
-        {t('kanban.archive')}
-      </S.MenuItem>
-    </S.CardMenu>
-  );
-};
-
 export const Card: React.FC<CardProps> = ({
   style,
   onClick,
@@ -81,6 +60,19 @@ export const Card: React.FC<CardProps> = ({
     updateCard({ participants });
   };
 
+  const editPopoverItems = [
+    {
+      key: '1',
+      label: t('common.delete'),
+      onClick: onDeleteCard,
+    },
+    {
+      key: '2',
+      label: t('kanban.archive'),
+      onClick: onDeleteCard,
+    },
+  ];
+
   return (
     <S.CardWrapper data-id={id} onClick={onClick} style={style} className={className}>
       <S.CollapseCard onChange={onArrowPress} bordered={false} defaultActiveKey={['1']}>
@@ -110,11 +102,7 @@ export const Card: React.FC<CardProps> = ({
               </S.CardTitle>
               <S.CardRightContent>
                 <Button noStyle type="text" icon={<S.ArrowDownIcon $expanded={isExpanded} />} />
-                <Dropdown
-                  overlay={<EditPopover onDelete={onDeleteCard} onArchive={onDeleteCard} />}
-                  placement="bottomRight"
-                  trigger={['click']}
-                >
+                <Dropdown menu={{ items: editPopoverItems }} placement="bottomRight" trigger={['click']}>
                   <Button
                     noStyle
                     type="text"

diff --git a/src/components/apps/kanban/newCardForm/ParticipantsDropdown/ParticipantsDropdown.styles.ts b/src/components/apps/kanban/newCardForm/ParticipantsDropdown/ParticipantsDropdown.styles.ts
@@ -3,18 +3,6 @@ import { CloseOutlined } from '@ant-design/icons';
 import { Checkbox } from 'antd';
 import { FONT_SIZE } from '@app/styles/themes/constants';
 
-export const EditParticipantPopover = styled.div`
-  padding: 1.25rem 1rem;
-  max-width: 14.375rem;
-  gap: 0.625rem;
-  display: flex;
-  background: var(--background-color);
-  flex-direction: column;
-  border-radius: 0.625rem;
-  z-index: 1;
-  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.2));
-`;
-
 export const PopoverCheckbox = styled(Checkbox)`
   & .ant-checkbox .ant-checkbox-inner {
     border-radius: 3px;
@@ -35,12 +23,6 @@ export const RemoveParticipantWrapper = styled.div`
   cursor: pointer;
 `;
 
-export const ClosePopover = styled(CloseOutlined)`
-  color: var(--primary-color);
-  width: 0.875rem;
-  height: 0.875rem;
-`;
-
 export const AddParticipant = styled.span`
   font-size: ${FONT_SIZE.xs};
   line-height: 1.25rem;

diff --git a/src/components/apps/kanban/newCardForm/ParticipantsDropdown/ParticipantsDropdown.tsx b/src/components/apps/kanban/newCardForm/ParticipantsDropdown/ParticipantsDropdown.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Dropdown } from '@app/components/common/Dropdown/Dropdown';
 import { Participant as IParticipant } from '../../interfaces';
@@ -16,44 +16,44 @@ export const ParticipantsDropdown: React.FC<ParticipantsDropdownProps> = ({
   setSelectedParticipants,
 }) => {
   const { t } = useTranslation();
-  const kanbanPeopleData = Object.values(kanbanPeople);
-  const selectedParticipantsIds = selectedParticipants.map((item) => item.id);
+  const kanbanPeopleData = useMemo(() => Object.values(kanbanPeople), []);
+  const selectedParticipantsIds = useMemo(() => selectedParticipants.map((item) => item.id), [selectedParticipants]);
 
-  const onPeopleClick = (tag: IParticipant) => {
-    const isExist = selectedParticipantsIds.includes(tag.id);
+  const onPeopleClick = useCallback(
+    (tag: IParticipant) => {
+      const isExist = selectedParticipantsIds.includes(tag.id);
 
-    if (isExist) {
-      setSelectedParticipants(selectedParticipants.filter((item) => item.id !== tag.id));
-    } else {
-      setSelectedParticipants([...selectedParticipants, tag]);
-    }
-  };
+      if (isExist) {
+        setSelectedParticipants(selectedParticipants.filter((item) => item.id !== tag.id));
+      } else {
+        setSelectedParticipants([...selectedParticipants, tag]);
+      }
+    },
+    [selectedParticipantsIds, selectedParticipants, setSelectedParticipants],
+  );
+
+  const items = useMemo(
+    () =>
+      kanbanPeopleData.map((participant: IParticipant, i) => ({
+        key: `${i + 1}`,
+        label: (
+          <S.ParticipantRow
+            onClick={(e) => {
+              onPeopleClick(participant);
+              e.stopPropagation();
+            }}
+          >
+            <S.PopoverCheckbox checked={selectedParticipantsIds.includes(participant.id)} />
+            <S.ParticipantAvatar src={participant.avatar ? participant.avatar : StubAvatar} />
+            <S.ParticipantName>{participant.name}</S.ParticipantName>
+          </S.ParticipantRow>
+        ),
+      })),
+    [kanbanPeopleData, onPeopleClick, selectedParticipantsIds],
+  );
 
   return (
-    <Dropdown
-      placement="bottomCenter"
-      trigger={['click']}
-      overlay={
-        <S.EditParticipantPopover>
-          {kanbanPeopleData.map((participant: IParticipant) => (
-            <S.ParticipantRow
-              key={participant.id}
-              onClick={(e) => {
-                onPeopleClick(participant);
-                e.stopPropagation();
-              }}
-            >
-              <S.PopoverCheckbox checked={selectedParticipantsIds.includes(participant.id)} />
-              <S.ParticipantAvatar src={participant.avatar ? participant.avatar : StubAvatar} />
-              <S.ParticipantName>{participant.name}</S.ParticipantName>
-            </S.ParticipantRow>
-          ))}
-          <S.RemoveParticipantWrapper>
-            <S.ClosePopover />
-          </S.RemoveParticipantWrapper>
-        </S.EditParticipantPopover>
-      }
-    >
+    <Dropdown placement="bottom" trigger={['click']} menu={{ items }}>
       {selectedParticipants && selectedParticipants.length > 0 ? (
         <S.ParticipantsWrapper>
           {selectedParticipants.map((participant) => (

diff --git a/src/components/apps/kanban/newCardForm/TagDropdown/TagDropdown.styles.ts b/src/components/apps/kanban/newCardForm/TagDropdown/TagDropdown.styles.ts
@@ -1,25 +1,11 @@
 import styled from 'styled-components';
-import { CloseOutlined } from '@ant-design/icons';
 import { Checkbox } from 'antd';
 import { FONT_SIZE } from '@app/styles/themes/constants';
 
 interface TagProps {
   backgroundColor: 'error' | 'warning' | 'success' | 'primary';
 }
 
-export const EditTagPopover = styled.div`
-  padding: 1.25rem 1.5625rem;
-  max-width: 14.375rem;
-  min-width: 14.375rem;
-  gap: 0.625rem;
-  display: flex;
-  background: var(--background-color);
-  flex-direction: column;
-  border-radius: 0.625rem;
-  z-index: 1;
-  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.2));
-`;
-
 export const EditTagPopoverLine = styled.span`
   line-height: 1.25rem;
   display: flex;
@@ -52,19 +38,6 @@ export const TagWrapper = styled.span<TagProps>`
   margin-left: 1rem;
 `;
 
-export const RemoveTagWrapper = styled.div`
-  position: absolute;
-  right: 1rem;
-  top: 1rem;
-  cursor: pointer;
-`;
-
-export const RemoveTag = styled(CloseOutlined)`
-  color: var(--primary-color);
-  width: 0.875rem;
-  height: 0.875rem;
-`;
-
 export const TagsWrapper = styled.div`
   display: flex;
   flex-wrap: wrap;