Skip to content

Commit fe5343a

Browse files
lsbyerleylsbyerley
committed
bucnation page update
1 parent 0c88e3d commit fe5343a

File tree

1 file changed

+95
-140
lines changed

1 file changed

+95
-140
lines changed

‎app/routes/bucnation.tsx

+95-140
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,50 @@ import {
2020
TabsTrigger,
2121
} from '#app/components/ui/tabs'
2222

23-
interface VCActivityType {
24-
id: number
25-
activeFlag: string
26-
status: string
27-
playerFirstName: string
28-
playerLastName: string
29-
playerPosition: string
30-
playerWeightLbs: number
31-
playerHeightInches: number
32-
playerEligibilityYear: string
23+
interface RosterItem {
24+
name: string
25+
position: string
26+
height: string
27+
weight: string
28+
year: string
29+
headshot: string
30+
}
31+
32+
interface RosterApiRes {
33+
type: string
34+
roster: RosterItem[]
35+
}
36+
37+
interface ScheduleItem {
38+
opponent: string
39+
vsat: string
40+
date: string
41+
time: string
42+
result: string
43+
score: string
44+
opponentLogo: string
45+
}
46+
47+
interface ScheduleApiRes {
48+
type: string
49+
schedule: ScheduleItem[]
50+
}
51+
52+
interface StatsItem {
53+
assists: string
54+
firstName: string
55+
lastName: string
56+
minutes: string
57+
points: string
58+
rebounds: string
59+
steals: string
60+
fgPercent: string
61+
threePercent: string
62+
}
63+
64+
interface StatsApiRes {
65+
type: string
66+
stats: StatsItem[]
3367
}
3468

3569
export const meta: MetaFunction = ({ data }) => [
@@ -45,22 +79,23 @@ export const headers: HeadersFunction = () => ({
4579
})
4680

4781
export const loader = async ({ request }: LoaderFunctionArgs) => {
48-
const reqHeaders = {
49-
Pb: 'iKi6oAQ2TmqZBqDc',
50-
'User-Agent':
51-
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36',
52-
}
82+
const hoopsApi = process.env.HOOPS_API;
83+
const responsePromises = await Promise.all([
84+
fetch(`${hoopsApi}/api/etsu/roster`),
85+
fetch(`${hoopsApi}/api/etsu/schedule`),
86+
fetch(`${hoopsApi}/api/etsu/stats`),
87+
])
5388

54-
const response = await fetch(
55-
'https://api.verbalcommits.com/vc/schools/chart/etsu',
56-
{
57-
headers: reqHeaders,
58-
},
59-
)
60-
const data = (await response.json()) as VCActivityType[]
61-
const filteredResults = data.filter(d => d.status === 'ENROLLMENT')
89+
const responseData = (await Promise.all(
90+
responsePromises.map(response => response.json()),
91+
)) as [RosterApiRes, ScheduleApiRes, StatsApiRes]
92+
// console.log('LOG: loaderData', responseData)
6293

63-
return json({ roster: filteredResults })
94+
return json({
95+
roster: responseData[0],
96+
schedule: responseData[1],
97+
stats: responseData[2],
98+
})
6499
}
65100

66101
export const action = async ({ request }: ActionFunctionArgs) => {
@@ -73,67 +108,8 @@ const heightFromInches = (total: number) => {
73108
return `${feet}'${inches}"`
74109
}
75110

76-
const games = [
77-
{
78-
opponent: 'TBD',
79-
date: 'November 18, 2024',
80-
score: {
81-
home: 0,
82-
away: 0,
83-
},
84-
image: 'https://generated.vusercontent.net/placeholder.svg',
85-
},
86-
]
87-
88-
const stats = [
89-
{
90-
firstName: 'Tester',
91-
lastName: 'McNester',
92-
position: 'SF',
93-
height: '6\'9"',
94-
points: 27.4,
95-
rebounds: 7.8,
96-
assists: 7.2,
97-
blocks: 1.1,
98-
steals: 1.3,
99-
},
100-
{
101-
firstName: 'Tester',
102-
lastName: 'McNester',
103-
position: 'SF',
104-
height: '6\'9"',
105-
points: 27.4,
106-
rebounds: 7.8,
107-
assists: 7.2,
108-
blocks: 1.1,
109-
steals: 1.3,
110-
},
111-
{
112-
firstName: 'Tester',
113-
lastName: 'McNester',
114-
position: 'SF',
115-
height: '6\'9"',
116-
points: 27.4,
117-
rebounds: 7.8,
118-
assists: 7.2,
119-
blocks: 1.1,
120-
steals: 1.3,
121-
},
122-
{
123-
firstName: 'Tester',
124-
lastName: 'McNester',
125-
position: 'SF',
126-
height: '6\'9"',
127-
points: 27.4,
128-
rebounds: 7.8,
129-
assists: 7.2,
130-
blocks: 1.1,
131-
steals: 1.3,
132-
},
133-
]
134-
135111
export default function BucNation() {
136-
const data = useLoaderData<typeof loader>()
112+
const { roster, schedule, stats } = useLoaderData<typeof loader>()
137113

138114
return (
139115
<Tabs
@@ -166,28 +142,22 @@ export default function BucNation() {
166142
Roster
167143
</h2>
168144
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
169-
{data.roster.map(r => {
145+
{roster.roster.map(r => {
170146
return (
171-
<Card className="p-4" key={r.id}>
147+
<Card className="p-4" key={r.name}>
172148
<div className="flex items-center gap-4">
173149
<Avatar>
174150
<AvatarImage
175-
src="/placeholder.svg"
176-
alt={`${r.playerFirstName} ${r.playerLastName}`}
151+
src={`https://etsubucs.com/${r.headshot}`}
152+
alt={`${r.name}`}
177153
/>
178-
<AvatarFallback>
179-
{r.playerFirstName[0].toUpperCase()}
180-
{r.playerLastName[0].toUpperCase()}
181-
</AvatarFallback>
154+
<AvatarFallback>{r.name[0].toUpperCase()}</AvatarFallback>
182155
</Avatar>
183156
<div>
184-
<h3 className="text-lg font-semibold">
185-
{r.playerFirstName} {r.playerLastName}
186-
</h3>
157+
<h3 className="text-lg font-semibold">{r.name}</h3>
187158
<p className="text-gray-500 dark:text-gray-400">
188-
{r.playerPosition} |{' '}
189-
{heightFromInches(r.playerHeightInches)} |{' '}
190-
{r.playerWeightLbs} Lbs
159+
{r.position} | {r.height}
160+
{r.weight}
191161
</p>
192162
</div>
193163
</div>
@@ -198,35 +168,31 @@ export default function BucNation() {
198168
</TabsContent>
199169
<TabsContent value="schedule">
200170
<h2 className="my-8 text-center text-xl font-bold sm:text-left">
201-
Schedule (coming soon..)
171+
Schedule
202172
</h2>
203-
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
204-
{games.map((game, index) => (
173+
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3">
174+
{schedule.schedule.map((item, index: number) => (
205175
<Card key={index} className="p-4">
206176
<div className="flex flex-col gap-4">
207177
<div className="flex items-center justify-between">
208178
<div className="flex items-center gap-4">
209-
<img
210-
src="https://generated.vusercontent.net/placeholder.svg"
211-
alt={`Opponent ${index + 1}`}
212-
width={40}
213-
height={40}
214-
className="h-10 w-10 rounded-full"
215-
/>
179+
<Avatar>
180+
<AvatarImage
181+
src={`https://etsubucs.com/${item.opponentLogo}`}
182+
alt={`${item.opponent}`}
183+
/>
184+
<AvatarFallback>{item.vsat}</AvatarFallback>
185+
</Avatar>
216186
<div>
217-
<h3 className="text-lg font-semibold">{game.opponent}</h3>
187+
<h3 className="text-lg font-semibold">{item.opponent}</h3>
218188
<p className="text-gray-500 dark:text-gray-400">
219-
{game.date}
189+
{item.date}
220190
</p>
221191
</div>
222192
</div>
223193
<div className="flex items-center gap-2">
224-
<div className="text-lg font-semibold">
225-
{game.score.home}
226-
</div>
227-
<div className="text-lg font-semibold">
228-
{game.score.away}
229-
</div>
194+
<div className="text-lg font-semibold">{item.result}</div>
195+
<div className="text-lg font-semibold">{item.score}</div>
230196
</div>
231197
</div>
232198
</div>
@@ -236,21 +202,21 @@ export default function BucNation() {
236202
</TabsContent>
237203
<TabsContent value="stats">
238204
<h2 className="my-8 text-center text-xl font-bold sm:text-left">
239-
Player Stats (coming soon)
205+
Player Stats
240206
</h2>
241-
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
242-
{stats.map((player, index) => (
207+
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
208+
{stats.stats.map((player, index: number) => (
243209
<div
244210
key={index}
245211
className="flex flex-col gap-6 rounded-lg bg-white p-6 shadow-md dark:bg-gray-950"
246212
>
247213
<div className="flex items-center justify-between">
248214
<div className="flex items-center gap-4">
249215
<h3 className="text-xl font-bold">
250-
{player.firstName[0].toUpperCase()}. {player.lastName}
216+
{player.firstName[0]}. {player.lastName}
251217
</h3>
252218
<span className="text-sm text-gray-500 dark:text-gray-400">
253-
{player.position} | {player.height}
219+
{`MPG: ${player.minutes}`}
254220
</span>
255221
</div>
256222
</div>
@@ -259,41 +225,30 @@ export default function BucNation() {
259225
<span className="text-sm text-gray-500 dark:text-gray-400">
260226
Pts
261227
</span>
262-
<span className="font-medium">
263-
{player.points.toFixed(1)}
264-
</span>
228+
<span className="font-medium">{player.points}</span>
265229
</div>
266230
<div className="flex flex-col items-end">
267231
<span className="text-sm text-gray-500 dark:text-gray-400">
268232
Reb
269233
</span>
270-
<span className="font-medium">
271-
{player.rebounds.toFixed(1)}
272-
</span>
234+
<span className="font-medium">{player.rebounds}</span>
273235
</div>
274236
<div className="flex flex-col items-end">
275237
<span className="text-sm text-gray-500 dark:text-gray-400">
276238
Ast
277239
</span>
278-
<span className="font-medium">
279-
{player.assists.toFixed(1)}
280-
</span>
240+
<span className="font-medium">{player.assists}</span>
281241
</div>
282242
<div className="flex flex-col items-end">
283243
<span className="text-sm text-gray-500 dark:text-gray-400">
284-
Blk
244+
3pt%
285245
</span>
286-
<span className="font-medium">
287-
{player.blocks.toFixed(1)}
288-
</span>
289-
</div>
290-
<div className="flex flex-col items-end">
246+
<span className="font-medium">{player.threePercent}</span>
247+
</div><div className="flex flex-col items-end">
291248
<span className="text-sm text-gray-500 dark:text-gray-400">
292-
Stl
293-
</span>
294-
<span className="font-medium">
295-
{player.steals.toFixed(1)}
249+
Fg%
296250
</span>
251+
<span className="font-medium">{player.fgPercent}</span>
297252
</div>
298253
</div>
299254
</div>

0 commit comments

Comments
 (0)