Skip to content

Commit

Permalink
refactor(app): fix some of the errors and all deprecated errors
Browse files Browse the repository at this point in the history
  • Loading branch information
leineveber committed Feb 13, 2023
1 parent d9f6103 commit 44d7e6f
Show file tree
Hide file tree
Showing 65 changed files with 667 additions and 709 deletions.
4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
9 changes: 6 additions & 3 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
</>
);
};
Expand Down
20 changes: 9 additions & 11 deletions src/api/covid.api.ts
Original file line number Diff line number Diff line change
@@ -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
Expand Down
10 changes: 1 addition & 9 deletions src/components/apps/kanban/Card/Card.styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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;
Expand Down
40 changes: 14 additions & 26 deletions src/components/apps/kanban/Card/Card.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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']}>
Expand Down Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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) => (
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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;
Expand Down
Loading

0 comments on commit 44d7e6f

Please sign in to comment.