Skip to content

Commit e8e724e

Browse files
author
Roshan Jossy
committed
fix type errors
1 parent 67bb8e9 commit e8e724e

File tree

14 files changed

+545
-560
lines changed

14 files changed

+545
-560
lines changed

‎src/components/UserDetails/Badges/BadgeIcon.tsx

Lines changed: 37 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,45 @@
1-
import { SiC } from "@react-icons/all-files/si/SiC"
2-
import { SiGo } from "@react-icons/all-files/si/SiGo"
3-
import { SiPython } from "@react-icons/all-files/si/SiPython"
4-
import { SiCplusplus } from "@react-icons/all-files/si/SiCplusplus"
5-
import { SiJavascript } from "@react-icons/all-files/si/SiJavascript"
6-
import { SiTypescript } from "@react-icons/all-files/si/SiTypescript"
7-
import { SiJava } from "@react-icons/all-files/si/SiJava"
8-
import { SiRuby } from "@react-icons/all-files/si/SiRuby"
9-
import { SiRust } from "@react-icons/all-files/si/SiRust"
10-
import { SiGnubash } from "@react-icons/all-files/si/SiGnubash"
11-
import { SiPhp } from "@react-icons/all-files/si/SiPhp"
12-
import React from "react"
1+
import { SiC } from '@react-icons/all-files/si/SiC'
2+
import { SiGo } from '@react-icons/all-files/si/SiGo'
3+
import { SiPython } from '@react-icons/all-files/si/SiPython'
4+
import { SiCplusplus } from '@react-icons/all-files/si/SiCplusplus'
5+
import { SiJavascript } from '@react-icons/all-files/si/SiJavascript'
6+
import { SiTypescript } from '@react-icons/all-files/si/SiTypescript'
7+
import { SiJava } from '@react-icons/all-files/si/SiJava'
8+
import { SiRuby } from '@react-icons/all-files/si/SiRuby'
9+
import { SiRust } from '@react-icons/all-files/si/SiRust'
10+
import { SiGnubash } from '@react-icons/all-files/si/SiGnubash'
11+
import { SiPhp } from '@react-icons/all-files/si/SiPhp'
12+
import React from 'react'
1313

1414
const iconMap = {
15-
"Go": <SiGo />,
16-
"Python": <SiPython />,
17-
"C": <SiC />,
18-
"C++": <SiCplusplus/>,
19-
"JavaScript": <SiJava/>,
20-
"TypeScript": <SiTypescript />,
21-
"Java": <SiJava />,
22-
"Ruby": <SiRuby />,
23-
"Rust": <SiRust />,
24-
"Unix Sell": <SiGnubash />,
25-
"PHP": <SiPhp />
15+
Go: <SiGo />,
16+
Python: <SiPython />,
17+
C: <SiC />,
18+
'C++': <SiCplusplus />,
19+
JavaScript: <SiJava />,
20+
TypeScript: <SiTypescript />,
21+
Java: <SiJava />,
22+
Ruby: <SiRuby />,
23+
Rust: <SiRust />,
24+
'Unix Sell': <SiGnubash />,
25+
PHP: <SiPhp />,
2626
}
27-
export default function BadgeIcon ({displayName}) {
28-
return (
29-
<div className="text-3xl z-10 badge-icon">
30-
{iconMap[displayName]}
31-
<style>
32-
{`
27+
28+
type BadgeIconProps = {
29+
displayName: keyof typeof iconMap
30+
}
31+
32+
export default function BadgeIcon({ displayName }: BadgeIconProps) {
33+
return (
34+
<div className="text-3xl z-10 badge-icon">
35+
{iconMap[displayName]}
36+
<style>
37+
{`
3338
.badge-icon {
3439
color: #00000077;
3540
}
3641
`}
37-
</style>
38-
</div>
39-
)
42+
</style>
43+
</div>
44+
)
4045
}

‎src/components/UserDetails/Badges/BadgeList.tsx

Lines changed: 43 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,50 @@
1-
import { useFragment, graphql, usePaginationFragment } from "react-relay"
2-
import { Badge_node$data } from "../../../queries/__generated__/Badge_node.graphql"
3-
import Badge from "./Badge"
1+
import { useFragment, graphql, usePaginationFragment } from 'react-relay'
2+
import { Badge_node$data } from '../../../queries/__generated__/Badge_node.graphql'
3+
import Badge from './Badge'
44

5-
const BadgeList = ({user}: any) => {
6-
const {data, loadNext, hasNext} = usePaginationFragment(
7-
graphql`
8-
fragment BadgeList_user on User
9-
@refetchable(queryName: "BadgeList_userQuery")
10-
@argumentDefinitions(
11-
count: {type: "Int", defaultValue: 5}
12-
cursor: {type: "String"}
13-
){
14-
badges(first:$count, after: $cursor)
15-
@connection(key: "BadgeList__badges") {
16-
edges {
17-
node {
18-
id
19-
...Badge_node
20-
}
21-
}
5+
const BadgeList = ({ user }: any) => {
6+
const { data, loadNext, hasNext } = usePaginationFragment(
7+
graphql`
8+
fragment BadgeList_user on User
9+
@refetchable(queryName: "BadgeList_userQuery")
10+
@argumentDefinitions(
11+
count: { type: "Int", defaultValue: 5 }
12+
cursor: { type: "String" }
13+
) {
14+
badges(first: $count, after: $cursor)
15+
@connection(key: "BadgeList__badges") {
16+
edges {
17+
node {
18+
id
19+
...Badge_node
2220
}
21+
}
2322
}
24-
`, user
25-
)
23+
}
24+
`,
25+
user
26+
)
2627

27-
if (!data || !data.badges) {
28-
return (<></>)
29-
}
28+
if (!data || !data.badges) {
29+
return <></>
30+
}
3031

31-
return (
32-
<div className="space-y-4">
33-
{
34-
data.badges.edges.map((badge)=> (<Badge key={badge.node.id} badge={badge.node}/>))
35-
}
36-
{hasNext? <button onClick={()=>{loadNext(2)}}>Load more</button>: null}
37-
38-
</div>
39-
)
32+
return (
33+
<div className="space-y-4">
34+
{data.badges.edges.map((badge: any) => (
35+
<Badge key={badge.node.id} badge={badge.node} />
36+
))}
37+
{hasNext ? (
38+
<button
39+
onClick={() => {
40+
loadNext(2)
41+
}}
42+
>
43+
Load more
44+
</button>
45+
) : null}
46+
</div>
47+
)
4048
}
4149

42-
export default BadgeList
50+
export default BadgeList

‎src/components/UserDetails/Badges/CircularProgress.tsx

Lines changed: 62 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,65 @@
11
export interface CircularProgressProps {
2-
progress: number
3-
}
4-
5-
export const polarToCartesian = (
6-
centerX: number,
7-
centerY: number,
8-
radius: number,
9-
angleInDegrees: number
10-
) => {
11-
var angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0
12-
13-
return {
14-
x: centerX + radius * Math.cos(angleInRadians),
15-
y: centerY + radius * Math.sin(angleInRadians),
16-
}
17-
}
18-
19-
export const getArcAttributes = (
20-
x: number,
21-
y: number,
22-
radius: number,
23-
startAngle: number,
24-
endAngle: number
25-
) => {
26-
var start = polarToCartesian(x, y, radius, endAngle)
27-
var end = polarToCartesian(x, y, radius, startAngle)
28-
var arcSweep = endAngle - startAngle <= 180 ? '0' : '1'
29-
30-
const arcSting = [
31-
'M',
32-
start.x,
33-
start.y,
34-
'A',
35-
radius,
36-
radius,
37-
0,
38-
arcSweep,
39-
0,
40-
end.x,
41-
end.y,
42-
].join(' ')
2+
progress: number
3+
}
434

44-
return arcSting
45-
}
46-
47-
const CircularProgress = ({ progress }: CircularProgressProps) => {
48-
const endAngle = progress * 3.6
49-
50-
return (
51-
<>
52-
<svg viewBox="0 0 100 100">
53-
<path
54-
id="arc1"
55-
fill="none"
56-
stroke="#00BCD4"
57-
strokeWidth="10"
58-
d={getArcAttributes(50, 50, 30, 0, endAngle - .0001)}
59-
/>
60-
</svg>
61-
</>
62-
)
5+
export const polarToCartesian = (
6+
centerX: number,
7+
centerY: number,
8+
radius: number,
9+
angleInDegrees: number
10+
) => {
11+
const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0
12+
13+
return {
14+
x: centerX + radius * Math.cos(angleInRadians),
15+
y: centerY + radius * Math.sin(angleInRadians),
6316
}
64-
65-
export default CircularProgress
66-
17+
}
18+
19+
export const getArcAttributes = (
20+
x: number,
21+
y: number,
22+
radius: number,
23+
startAngle: number,
24+
endAngle: number
25+
) => {
26+
const start = polarToCartesian(x, y, radius, endAngle)
27+
const end = polarToCartesian(x, y, radius, startAngle)
28+
const arcSweep = endAngle - startAngle <= 180 ? '0' : '1'
29+
30+
const arcSting = [
31+
'M',
32+
start.x,
33+
start.y,
34+
'A',
35+
radius,
36+
radius,
37+
0,
38+
arcSweep,
39+
0,
40+
end.x,
41+
end.y,
42+
].join(' ')
43+
44+
return arcSting
45+
}
46+
47+
const CircularProgress = ({ progress }: CircularProgressProps) => {
48+
const endAngle = progress * 3.6
49+
50+
return (
51+
<>
52+
<svg viewBox="0 0 100 100">
53+
<path
54+
id="arc1"
55+
fill="none"
56+
stroke="#00BCD4"
57+
strokeWidth="10"
58+
d={getArcAttributes(50, 50, 30, 0, endAngle - 0.0001)}
59+
/>
60+
</svg>
61+
</>
62+
)
63+
}
64+
65+
export default CircularProgress

‎src/components/UserDetails/Badges/Hexagon.tsx

Lines changed: 51 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,52 @@
1-
export default function Hexagon ({children, size, color}) {
2-
return (
1+
import { ReactNode } from 'react'
32

4-
<div className="badge-icon-container">
5-
{children}
6-
<style jsx>
7-
{`
8-
.badge-icon-container {
9-
position: relative;
10-
width: ${size * 0.645}px;
11-
height: ${size}px;
12-
background-image: linear-gradient(90deg, #00ffb8, #13ce9a);
13-
border-radius: ${size / 10}px;
14-
display: flex;
15-
justify-content: center;
16-
align-items: center;
17-
}
18-
19-
.badge-icon-container:before,
20-
.badge-icon-container:after {
21-
content: '';
22-
display: block;
23-
position: absolute;
24-
top: 0;
25-
bottom: 0;
26-
left: 0;
27-
right: 0;
28-
width: inherit;
29-
height: inherit;
30-
border-radius: inherit;
31-
background-image: inherit;
32-
}
33-
34-
.badge-icon-container:before {
35-
transform: rotate(60deg);
36-
}
37-
38-
.badge-icon-container:after {
39-
transform: rotate(-60deg);
40-
}
41-
`}
42-
</style>
43-
</div>
44-
)
45-
}
3+
type HexagonProps = {
4+
children: ReactNode
5+
size: number
6+
color: string
7+
}
8+
9+
export default function Hexagon({ children, size, color }: HexagonProps) {
10+
return (
11+
<div className="badge-icon-container">
12+
{children}
13+
<style jsx>
14+
{`
15+
.badge-icon-container {
16+
position: relative;
17+
width: ${size * 0.645}px;
18+
height: ${size}px;
19+
background-image: linear-gradient(90deg, #00ffb8, #13ce9a);
20+
border-radius: ${size / 10}px;
21+
display: flex;
22+
justify-content: center;
23+
align-items: center;
24+
}
25+
26+
.badge-icon-container:before,
27+
.badge-icon-container:after {
28+
content: '';
29+
display: block;
30+
position: absolute;
31+
top: 0;
32+
bottom: 0;
33+
left: 0;
34+
right: 0;
35+
width: inherit;
36+
height: inherit;
37+
border-radius: inherit;
38+
background-image: inherit;
39+
}
40+
41+
.badge-icon-container:before {
42+
transform: rotate(60deg);
43+
}
44+
45+
.badge-icon-container:after {
46+
transform: rotate(-60deg);
47+
}
48+
`}
49+
</style>
50+
</div>
51+
)
52+
}

0 commit comments

Comments
 (0)