Skip to content

Commit 5c5c397

Browse files
lucassantuslucassantus
authored
Merge pull request #9 from LucasSantus/develop
📌 refactor code in project
2 parents 851ddbd + 55433cd commit 5c5c397

File tree

15 files changed

+169
-166
lines changed

15 files changed

+169
-166
lines changed

‎src/components/Card.tsx

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
1-
import { FC, PropsWithChildren } from "react";
1+
import { PropsWithChildren } from "react";
22

3-
export const Card: FC<PropsWithChildren> = ({ children }) => {
4-
return (
5-
<div className="bg-custom-purple-600 rounded-2xl shadow-card">
6-
<div>{children}</div>
7-
</div>
8-
);
9-
};
3+
export const Card: React.FC<PropsWithChildren> = ({ children }) => (
4+
<div className="bg-custom-purple-600 rounded-2xl shadow-card">{children}</div>
5+
);

‎src/components/Sales/components/InfoOfTheDay.tsx

Lines changed: 15 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,20 @@
1-
import { ReactNode } from "react";
2-
3-
interface IInfoOfTheDayProps {
4-
icon: ReactNode;
5-
dailySale: string;
6-
weekday: string;
7-
}
1+
import { IInfoOfTheDayProps } from "../types";
82

93
export const InfoOfTheDay: React.FC<IInfoOfTheDayProps> = ({
104
icon,
11-
dailySale,
5+
description,
126
weekday,
13-
}) => {
14-
return (
15-
<>
16-
<div className="flex items-center gap-1">
17-
{icon}
18-
<span className="text-white font-inter text-sm font-medium">
19-
{dailySale}
20-
</span>
21-
</div>
22-
23-
<span className="text-white font-inter text-2xl font-medium">
24-
{weekday}
7+
}) => (
8+
<>
9+
<div className="flex items-center gap-1">
10+
{icon}
11+
<span className="text-white font-inter text-sm font-medium">
12+
{description}
2513
</span>
26-
</>
27-
);
28-
};
14+
</div>
15+
16+
<span className="text-white font-inter text-2xl font-medium">
17+
{weekday}
18+
</span>
19+
</>
20+
);

‎src/components/Sales/constants.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { IconPolygon } from "../Icons/IconPolygon";
2+
import { ISalesDataTypes } from "./types";
3+
4+
export const SALES_DATA: ISalesDataTypes = {
5+
mostSales: {
6+
description: "Dia com mais vendas",
7+
weekday: "quarta-feira",
8+
icon: <IconPolygon className="text-green-700 shadow-sm" />,
9+
},
10+
leastSales: {
11+
description: "Dia com menos vendas",
12+
weekday: "domingo",
13+
icon: <IconPolygon className="text-red-700 rotate-180 shadow-sm" />,
14+
},
15+
};

‎src/components/Sales/index.tsx

Lines changed: 10 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,26 @@
11
import { Card } from "../Card";
2-
import { IconPolygon } from "../Icons/IconPolygon";
2+
33
import { SimpleGraph } from "../SimpleGraph";
44
import { InfoOfTheDay } from "./components/InfoOfTheDay";
5+
import { SALES_DATA } from "./constants";
56

67
export const Sales: React.FC = () => {
8+
const { mostSales, leastSales } = SALES_DATA;
9+
710
return (
811
<Card>
9-
<div className="px-12 py-7">
10-
<span className="text-white font-inter text-2xl">
12+
<div className="px-12 py-7 flex flex-col justify-center">
13+
<span className="text-white font-inter text-2xl text-center sm:text-left">
1114
Vendas por dia da semana
1215
</span>
1316
<div className="grid sm:grid-cols-2 grid-cols-1 pt-8">
14-
<div className="flex flex-col gap-2 sm:justify-center sm:items-start items-center">
15-
<InfoOfTheDay
16-
dailySale="Dia com mais vendas"
17-
weekday="quarta-feira"
18-
icon={<IconPolygon className="text-green-700 shadow-sm" />}
19-
/>
17+
<div className="flex flex-col gap-2">
18+
<InfoOfTheDay {...mostSales} />
2019
<div className="pt-7" />
21-
<InfoOfTheDay
22-
dailySale="Dia com menos vendas"
23-
weekday="domingo"
24-
icon={
25-
<IconPolygon className="text-red-700 rotate-180 shadow-sm" />
26-
}
27-
/>
20+
<InfoOfTheDay {...leastSales} />
2821
</div>
2922

30-
<div className="pt-10">
31-
<SimpleGraph />
32-
</div>
23+
<SimpleGraph />
3324
</div>
3425
</div>
3526
</Card>

‎src/components/Sales/types.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
export interface IInfoOfTheDayProps {
2+
icon: React.ReactNode;
3+
description: string;
4+
weekday: string;
5+
}
6+
7+
export interface ISalesDataTypes {
8+
mostSales: IInfoOfTheDayProps;
9+
leastSales: IInfoOfTheDayProps;
10+
}

‎src/components/Score.tsx

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,19 @@
1-
import { FC } from "react";
21
import { Card } from "./Card";
32
import { IconHappyPerson } from "./Icons/IconHappyPerson";
43

5-
export const Score: FC = () => {
6-
return (
7-
<Card>
8-
<div className="flex flex-col h-72 justify-between items-center p-7">
9-
<span className="font-inter font-semibold text-2xl text-white">
10-
NPS Geral
11-
</span>
12-
<span className="font-inter font-semibold text-2xl text-custom-green-500 flex flex-col justify-center items-center gap-2">
13-
<IconHappyPerson />
14-
Excelente!
15-
</span>
16-
<span className="font-inter font-normal text-sm text-white">
17-
NPS Score 75
18-
</span>
19-
</div>
20-
</Card>
21-
);
22-
};
4+
export const Score: React.FC = () => (
5+
<Card>
6+
<div className="flex flex-col h-72 justify-between items-center p-7">
7+
<span className="font-inter font-semibold text-2xl text-white">
8+
NPS Geral
9+
</span>
10+
<span className="font-inter font-semibold text-2xl text-custom-green-500 flex-col justify-center items-center gap-2">
11+
<IconHappyPerson />
12+
Excelente!
13+
</span>
14+
<span className="font-inter font-normal text-sm text-white">
15+
NPS Score 75
16+
</span>
17+
</div>
18+
</Card>
19+
);

‎src/components/SimpleGraph/constants.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { IDaysTypes } from "./types";
2+
3+
export const DAYS: IDaysTypes[] = [
4+
{
5+
day: "dom",
6+
value: 21,
7+
},
8+
{
9+
day: "seg",
10+
value: 5,
11+
},
12+
{
13+
day: "ter",
14+
value: 14,
15+
},
16+
{
17+
day: "qua",
18+
value: 6,
19+
},
20+
{
21+
day: "qui",
22+
value: 25,
23+
},
24+
{
25+
day: "sex",
26+
value: 4.5,
27+
},
28+
{
29+
day: "sab",
30+
value: 13,
31+
},
32+
];

‎src/components/SimpleGraph/index.tsx

Lines changed: 19 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,30 @@
1-
interface IDaysType {
2-
day: string;
3-
value: number;
4-
}
1+
import { useMemo } from "react";
2+
import { DAYS } from "./constants";
53

6-
const DAYS: IDaysType[] = [
7-
{
8-
day: "dom",
9-
value: 2,
10-
},
11-
{
12-
day: "seg",
13-
value: 5,
14-
},
15-
{
16-
day: "ter",
17-
value: 4,
18-
},
19-
{
20-
day: "qua",
21-
value: 6,
22-
},
23-
{
24-
day: "qui",
25-
value: 5,
26-
},
27-
{
28-
day: "sex",
29-
value: 4.5,
30-
},
31-
{
32-
day: "sab",
33-
value: 3,
34-
},
35-
];
4+
const calculateValue = (value: number) => {
5+
let total = value * 10;
366

37-
export const SimpleGraph: React.FC = () => {
38-
const calcularValor = (value: number) => {
39-
let valueTotal = value * 10;
7+
if (total < 0) return 1;
8+
else if (total > 140) return 140;
409

41-
if (valueTotal < 0) return 1;
42-
else if (valueTotal > 140) return 140;
10+
return total;
11+
};
4312

44-
return valueTotal;
45-
};
13+
export const SimpleGraph: React.FC = () => {
14+
const valueMemoized = useMemo(() => {
15+
return DAYS.reduce((acc, item) => {
16+
acc[item.day] = calculateValue(item.value);
17+
return acc;
18+
}, {} as { [key: string]: number });
19+
}, []);
4620

4721
return (
48-
<div className="relative h-full flex items-center">
22+
<div className="relative h-full flex items-center pt-48 sm:pt-0">
4923
<div className="w-full bg-[#4A4556] h-[3px]" />
5024

51-
<div className="absolute flex justify-between items-end h-full overflow-auto z-10 inset-0">
25+
<div className="absolute flex items-end justify-between w-full overflow-auto p-1 inset-0">
5226
{DAYS.map((item) => {
53-
const value = calcularValor(item.value);
54-
55-
const divStyle = {
56-
height: `${value}px`,
57-
};
27+
const value = valueMemoized[item.day];
5828

5929
return (
6030
<div
@@ -63,7 +33,7 @@ export const SimpleGraph: React.FC = () => {
6333
>
6434
<div
6535
className={"bg-custom-cyan-600 w-[15px] rounded-full"}
66-
style={divStyle}
36+
style={{ height: `${value}px` }}
6737
/>
6838
<span className="font-inter font-medium text-sm text-white">
6939
{item.day}

‎src/components/SimpleGraph/types.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export interface IDaysTypes {
2+
day: string;
3+
value: number;
4+
}

‎src/components/Statistics/components/Item.tsx

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎src/components/Statistics/components/ItemStatistics.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import classNames from "classnames";
2+
import { FC, useMemo } from "react";
3+
import { formatterNumbers } from "../../../utils/formatterNumbers";
4+
import { IItemStatisticsProps } from "./types";
5+
6+
export const ItemStatistics: FC<IItemStatisticsProps> = ({
7+
title,
8+
value,
9+
color,
10+
type,
11+
}) => {
12+
const valueFormatted = useMemo(() => {
13+
return type === "integer" ? value : formatterNumbers(value, 1);
14+
}, [value, type]);
15+
16+
return (
17+
<div className={`flex gap-1 text-white font-inter text-sm font-medium`}>
18+
<div className={classNames(`h-4 w-4 rounded-full`, color)}></div>
19+
<div>{`${title} ${valueFormatted}`}</div>
20+
</div>
21+
);
22+
};

‎src/components/Statistics/components/types.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export interface IItemStatisticsProps {
2+
title: string;
3+
value: number;
4+
color: string;
5+
type: "money" | "integer";
6+
}

‎src/components/Statistics/index.tsx

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,8 @@
11
import { FC, useMemo } from "react";
22
import { Card } from "../Card";
33
import { CircleProgress } from "../CircleProgress";
4-
import { ItemStatistics } from "./components/Item";
5-
6-
interface IDataType {
7-
expected: number;
8-
reached: number;
9-
type: "money" | "integer";
10-
}
11-
12-
interface IStatisticsProps {
13-
title: string;
14-
data: IDataType;
15-
backgroundColor: string;
16-
strokeColor: string;
17-
}
4+
import { ItemStatistics } from "./components/ItemStatistics";
5+
import { IStatisticsProps } from "./types";
186

197
export const Statistics: FC<IStatisticsProps> = ({
208
title,

‎src/components/Statistics/types.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export interface IDataTypes {
2+
expected: number;
3+
reached: number;
4+
type: "money" | "integer";
5+
}
6+
7+
export interface IStatisticsProps {
8+
title: string;
9+
data: IDataTypes;
10+
backgroundColor: string;
11+
strokeColor: string;
12+
}

0 commit comments

Comments
 (0)