Skip to content

Commit 4fc40a5

Browse files
0l1v3rr0l1v3rr
committed
client: add the funtionality to remove badge
1 parent 00b3834 commit 4fc40a5

File tree

7 files changed

+77
-22
lines changed

7 files changed

+77
-22
lines changed

‎client/src/components/form/PageTwo.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import Select from "../ui/Select";
44
import InputWrapper from "../ui/InputWrapper";
55
import Hr from "../ui/Hr";
66
import P from "../ui/P";
7-
import Input from "../ui/Input";
87
import Quote from "../ui/Quote";
98
import { useThemes } from "../../hooks/useThemes";
109
import { useMultistepContext } from "../../hooks/useMultistepContext";

‎client/src/components/lines/BadgeItem.tsx

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,21 @@ import { Badge } from "../../types";
22

33
type Props = {
44
badge: Badge;
5+
removeBadge: (position: number) => void;
56
};
67

7-
const BadgeItem = ({ badge }: Props) => {
8+
const BadgeItem = ({ badge, removeBadge }: Props) => {
89
return (
9-
<div className="flex cursor-pointer select-none items-center gap-3 border border-solid border-gh-bg-secondary bg-gh-bg-secondary px-3 py-[.45rem] transition-all duration-150">
10+
<button
11+
draggable
12+
className="flex cursor-grab select-none items-center gap-3 bg-gh-bg-secondary px-3 py-[.45rem] transition-all duration-150 hover:bg-gh-gray"
13+
onClick={(e) => {
14+
// double click
15+
if (e.detail === 2) {
16+
removeBadge(badge.position);
17+
}
18+
}}
19+
>
1020
<img
1121
onError={(e) => (e.currentTarget.style.display = "none")}
1222
className="h-4 w-4 select-none"
@@ -26,7 +36,7 @@ const BadgeItem = ({ badge }: Props) => {
2636
{badge.label}
2737
</span>
2838
)}
29-
</div>
39+
</button>
3040
);
3141
};
3242

‎client/src/components/lines/LineItem.tsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ type Props = {
1010
};
1111

1212
const LineItem = ({ line }: Props) => {
13-
const { addBadge } = useMultistepContext();
13+
const { addBadge, removeBadge } = useMultistepContext();
1414

1515
return (
1616
<div className="w-full rounded-md border border-gh-border bg-gh-bg">
@@ -25,9 +25,15 @@ const LineItem = ({ line }: Props) => {
2525
</div>
2626
) : (
2727
<div className="flex flex-wrap gap-2">
28-
{line.badges.map((badge, i) => (
29-
<BadgeItem key={i} badge={badge} />
30-
))}
28+
{[...line.badges]
29+
.sort((a, z) => a.position - z.position)
30+
.map((badge, i) => (
31+
<BadgeItem
32+
key={i}
33+
badge={badge}
34+
removeBadge={(p) => removeBadge(line.lineNumber, p)}
35+
/>
36+
))}
3137
</div>
3238
)}
3339

‎client/src/components/lines/NewBadge.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import PopupContainer from "../ui/PopupContainer";
1111
import Upload from "./Upload";
1212

1313
type Props = {
14-
addBadge: (badge: Badge) => void;
14+
addBadge: (badge: Omit<Badge, "position">) => void;
1515
};
1616

1717
const NewBadge = ({ addBadge }: Props) => {

‎client/src/components/ui/RepositoryLink.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ const RepositoryLink = ({ user, repository, isPublic }: Props) => {
1818
description: "This is a description",
1919
});
2020

21-
useEffect(() => {
22-
axios
23-
.get<GithubResponse>(`https://api.github.com/repos/${user}/${repository}`)
24-
.then((res) => setGithubStats(res.data));
25-
}, []);
21+
// useEffect(() => {
22+
// axios
23+
// .get<GithubResponse>(`https://api.github.com/repos/${user}/${repository}`)
24+
// .then((res) => setGithubStats(res.data));
25+
// }, []);
2626

2727
return (
2828
<div>

‎client/src/context/MultistepContext.tsx

Lines changed: 47 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ export interface MultistepContextType {
1919
card: Card;
2020
updateCard: () => (updated: Partial<Card>) => void;
2121
setCard: React.Dispatch<React.SetStateAction<Card>>;
22-
addBadge: (lineNumber: number, badge: Badge) => void;
22+
addBadge: (lineNumber: number, badge: Omit<Badge, "position">) => void;
23+
removeBadge: (lineNumber: number, position: number) => void;
2324
}
2425

2526
export const MultistepContext = createContext<MultistepContextType>(
@@ -45,7 +46,22 @@ export const MultistepProvider: FC<MultistepProviderProps> = ({ children }) => {
4546
gap: 10,
4647
lineHeight: 7,
4748
hideTitle: false,
48-
lines: [{ lineNumber: 1, badges: [] }],
49+
lines: [
50+
{
51+
lineNumber: 1,
52+
badges: [
53+
{ position: 1, color: "auto", icon: "react", label: "react" },
54+
{ position: 0, color: "auto", icon: "laravel", label: "laravel" },
55+
],
56+
},
57+
{
58+
lineNumber: 2,
59+
badges: [
60+
{ position: 1, color: "auto", icon: "spring", label: "spring" },
61+
{ position: 0, color: "auto", icon: "c", label: "c" },
62+
],
63+
},
64+
],
4965
backgroundColor: "",
5066
borderColor: "",
5167
titleColor: "",
@@ -60,7 +76,30 @@ export const MultistepProvider: FC<MultistepProviderProps> = ({ children }) => {
6076
[]
6177
);
6278

63-
const addBadge = useCallback((lineNumber: number, badge: Badge) => {
79+
const addBadge = useCallback(
80+
(lineNumber: number, badge: Omit<Badge, "position">) => {
81+
setCard((prev) => {
82+
const newObj = { ...prev };
83+
const lineIdx = newObj.lines.findIndex(
84+
(x) => x.lineNumber === lineNumber
85+
);
86+
87+
// line with the specified lineNumber doesn't exist
88+
if (lineIdx === -1) return prev;
89+
90+
// update the badges
91+
newObj.lines[lineIdx].badges = [
92+
...newObj.lines[lineIdx].badges,
93+
{ ...badge, position: newObj.lines[lineIdx].badges.length },
94+
];
95+
96+
return newObj;
97+
});
98+
},
99+
[]
100+
);
101+
102+
const removeBadge = useCallback((lineNumber: number, position: number) => {
64103
setCard((prev) => {
65104
const newObj = { ...prev };
66105
const lineIdx = newObj.lines.findIndex(
@@ -70,11 +109,10 @@ export const MultistepProvider: FC<MultistepProviderProps> = ({ children }) => {
70109
// line with the specified lineNumber doesn't exist
71110
if (lineIdx === -1) return prev;
72111

73-
// update the badges
74-
newObj.lines[lineIdx].badges = [
75-
...newObj.lines[lineIdx].badges,
76-
{ ...badge },
77-
];
112+
// remove the badge
113+
newObj.lines[lineIdx].badges = newObj.lines[lineIdx].badges.filter(
114+
(x) => x.position !== position
115+
);
78116

79117
return newObj;
80118
});
@@ -111,6 +149,7 @@ export const MultistepProvider: FC<MultistepProviderProps> = ({ children }) => {
111149
updateCard,
112150
setCard,
113151
addBadge,
152+
removeBadge,
114153
}}
115154
>
116155
{children}

‎client/src/types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export interface Line {
3737
}
3838

3939
export interface Badge {
40+
position: number;
4041
icon: string;
4142
label: string;
4243
color: string;

0 commit comments

Comments
 (0)