Skip to content

Commit 4b75096

Browse files
Connorrmcd6Connorrmcd6
committedNov 13, 2024
Started implementing onboarding flow
1 parent d286dac commit 4b75096

File tree

7 files changed

+224
-58
lines changed

7 files changed

+224
-58
lines changed
 

‎app/handlers/fpl.go

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
package handlers
2+
3+
import (
4+
"encoding/json"
5+
"fmt"
6+
"io"
7+
"log"
8+
"net/http"
9+
10+
"github.com/labstack/echo/v5"
11+
)
12+
13+
// FPLTeamResponse represents the relevant fields from the API response
14+
type FPLTeamResponse struct {
15+
PlayerFirstName string `json:"player_first_name"`
16+
PlayerLastName string `json:"player_last_name"`
17+
Name string `json:"name"`
18+
}
19+
20+
func FetchFplTeam(c echo.Context) error {
21+
teamID := c.QueryParam("teamID")
22+
if teamID == "" {
23+
return echo.NewHTTPError(http.StatusBadRequest, "teamID is required")
24+
}
25+
26+
teamURL := fmt.Sprintf("https://fantasy.premierleague.com/api/entry/%s/", teamID)
27+
log.Printf("Fetching team data from: %s", teamURL)
28+
29+
resp, err := http.Get(teamURL)
30+
if err != nil {
31+
return echo.NewHTTPError(http.StatusInternalServerError, fmt.Sprintf("failed to fetch team: %v", err))
32+
}
33+
defer resp.Body.Close()
34+
35+
body, err := io.ReadAll(resp.Body)
36+
if err != nil {
37+
return echo.NewHTTPError(http.StatusInternalServerError, fmt.Sprintf("failed to read response: %v", err))
38+
}
39+
40+
if resp.StatusCode != http.StatusOK {
41+
log.Printf("FPL API error: %s", string(body))
42+
return echo.NewHTTPError(resp.StatusCode, "Failed to fetch team data")
43+
}
44+
45+
var teamData FPLTeamResponse
46+
if err := json.Unmarshal(body, &teamData); err != nil {
47+
return echo.NewHTTPError(http.StatusInternalServerError, fmt.Sprintf("failed to parse team data: %v", err))
48+
}
49+
50+
return c.JSON(http.StatusOK, teamData)
51+
}

‎app/handlers/profile.go

+39-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,51 @@
11
package handlers
22

33
import (
4+
"log"
5+
"net/http"
6+
47
"github.com/cmcd97/bytesize/app/views"
58
"github.com/cmcd97/bytesize/lib"
69
"github.com/labstack/echo/v5"
710
"github.com/pocketbase/pocketbase/apis"
811
"github.com/pocketbase/pocketbase/models"
912
)
1013

14+
const (
15+
StatusOK = 200
16+
TeamIDField = "teamID"
17+
)
18+
1119
func ProfileGet(c echo.Context) error {
12-
var record *models.Record = c.Get(apis.ContextAuthRecordKey).(*models.Record)
13-
return lib.Render(c, 200, views.Profile(record))
20+
// Get auth record with error handling
21+
record, ok := c.Get(apis.ContextAuthRecordKey).(*models.Record)
22+
if !ok || record == nil {
23+
log.Printf("Failed to get auth record for request: %v", c.Request().RequestURI)
24+
return echo.NewHTTPError(http.StatusUnauthorized, "unauthorized")
25+
}
26+
27+
// Get team ID with proper type assertion
28+
teamIDInterface := record.Get(TeamIDField)
29+
log.Printf("Raw teamID value: %v (type: %T)", teamIDInterface, teamIDInterface)
30+
31+
// Handle different types that teamID could be
32+
var teamIDValue int
33+
switch v := teamIDInterface.(type) {
34+
case int:
35+
teamIDValue = v
36+
case float64:
37+
teamIDValue = int(v)
38+
case nil:
39+
return lib.Render(c, StatusOK, views.Setup())
40+
default:
41+
log.Printf("Unexpected teamID type: %T", v)
42+
return lib.Render(c, StatusOK, views.Setup())
43+
}
44+
45+
// Check for zero value
46+
if teamIDValue == 0 {
47+
return lib.Render(c, StatusOK, views.Setup())
48+
}
49+
50+
return lib.Render(c, StatusOK, views.Profile(record))
1451
}

‎app/main.go

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ func InitAppRoutes(e *core.ServeEvent, pb *pocketbase.PocketBase) {
1515
return c.Redirect(303, "profile")
1616
})
1717
appGroup.GET("/profile", handlers.ProfileGet)
18+
appGroup.GET("/fpl_team_id", handlers.FetchFplTeam)
1819

1920
e.Router.GET("/", func(c echo.Context) error {
2021
return c.Redirect(303, "/app")

‎app/views/setup.templ

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
package views
2+
3+
import (
4+
"github.com/cmcd97/bytesize/app/components"
5+
"github.com/cmcd97/bytesize/lib"
6+
)
7+
8+
templ Setup() {
9+
@lib.BaseLayout() {
10+
@components.Navbar()
11+
<div id="setup-page-content" class="flex flex-col items-center">
12+
<div class="card bg-base-100 w-96 shadow-xl">
13+
<div class="card-body">
14+
<div class="p-6 space-y-6">
15+
<h2 class="text-2xl font-bold">We noticed you haven't linked your FPL account</h2>
16+
// <p class="text-lg text-gray-600 font-medium">Let's get set up first!</p>
17+
<ol class="list-decimal list-inside space-y-4 text-sm font-small-text">
18+
<li class="flex items-start">
19+
<span class="ml-2">1. Login to <a href="https://fantasy.premierleague.com" class="text-blue-600 hover:text-blue-800 underline">fantasy.premierleague.com</a> on a browser</span>
20+
</li>
21+
<li class="flex items-start">
22+
<span class="ml-2">2. Click on "Pick Team" or "Points"</span>
23+
</li>
24+
<li class="flex items-start">
25+
<span class="ml-2">3. If you clicked on "Pick Team", click on "Gameweek History" next</span>
26+
</li>
27+
<li class="flex items-start">
28+
<span class="ml-2">4. In the URL of the page, you will see fantasy.premierleague.com/entry/ followed by a number. Paste that number below and click the Check Team Button</span>
29+
</li>
30+
</ol>
31+
</div>
32+
<div id="team-search-result">
33+
<label class="input input-bordered flex items-center gap-2 mb-5">
34+
<input name="teamID" type="text" class="grow" placeholder="Team ID"/>
35+
<svg
36+
xmlns="http://www.w3.org/2000/svg"
37+
viewBox="0 0 16 16"
38+
fill="currentColor"
39+
class="h-4 w-4 opacity-70"
40+
>
41+
<path
42+
fill-rule="evenodd"
43+
d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
44+
clip-rule="evenodd"
45+
></path>
46+
</svg>
47+
</label>
48+
<div class="card-actions justify-end">
49+
<button class="btn btn-primary" hx-target="#team-search-result" hx-get="/app/fpl_team_id" hx-include="[name='teamID']">Check Team</button>
50+
</div>
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
}
56+
}

‎lib/base.templ

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ templ BaseLayout() {
1313
<script src="https://unpkg.com/htmx.org@1.9.10" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>
1414
<link rel="preconnect" href="https://fonts.googleapis.com"/>
1515
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
16-
<link href="https://fonts.googleapis.com/css2?family=DotGothic16&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet"/>
16+
<link href="https://fonts.googleapis.com/css2?family=DotGothic16&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet"/>
1717
</head>
1818
<body class="antialiased overflow-auto font-brand bg-base-200" hx-ext="response-targets">
1919
<div>

‎public/styles.css

+75-55
Original file line numberDiff line numberDiff line change
@@ -596,20 +596,24 @@ video {
596596
margin-bottom: 1.25rem;
597597
}
598598

599-
.mt-5 {
600-
margin-top: 1.25rem;
601-
}
602-
603-
.mb-5 {
604-
margin-bottom: 1.25rem;
599+
.mb-10 {
600+
margin-bottom: 2.5rem;
605601
}
606602

607603
.mb-2 {
608604
margin-bottom: 0.5rem;
609605
}
610606

611-
.mb-10 {
612-
margin-bottom: 2.5rem;
607+
.ml-2 {
608+
margin-left: 0.5rem;
609+
}
610+
611+
.mt-5 {
612+
margin-top: 1.25rem;
613+
}
614+
615+
.mb-5 {
616+
margin-bottom: 1.25rem;
613617
}
614618

615619
.inline-block {
@@ -624,10 +628,6 @@ video {
624628
display: table;
625629
}
626630

627-
.grid {
628-
display: grid;
629-
}
630-
631631
.hidden {
632632
display: none;
633633
}
@@ -640,6 +640,10 @@ video {
640640
height: 6rem;
641641
}
642642

643+
.h-4 {
644+
height: 1rem;
645+
}
646+
643647
.h-6 {
644648
height: 1.5rem;
645649
}
@@ -652,6 +656,14 @@ video {
652656
height: 100vh;
653657
}
654658

659+
.w-24 {
660+
width: 6rem;
661+
}
662+
663+
.w-4 {
664+
width: 1rem;
665+
}
666+
655667
.w-6 {
656668
width: 1.5rem;
657669
}
@@ -672,18 +684,6 @@ video {
672684
width: 100%;
673685
}
674686

675-
.w-24 {
676-
width: 6rem;
677-
}
678-
679-
.w-16 {
680-
width: 4rem;
681-
}
682-
683-
.w-36 {
684-
width: 9rem;
685-
}
686-
687687
.max-w-7xl {
688688
max-width: 80rem;
689689
}
@@ -700,12 +700,16 @@ video {
700700
flex-shrink: 0;
701701
}
702702

703-
.auto-cols-max {
704-
grid-auto-columns: max-content;
703+
.grow {
704+
flex-grow: 1;
705+
}
706+
707+
.list-inside {
708+
list-style-position: inside;
705709
}
706710

707-
.grid-flow-col {
708-
grid-auto-flow: column;
711+
.list-decimal {
712+
list-style-type: decimal;
709713
}
710714

711715
.flex-col {
@@ -716,6 +720,10 @@ video {
716720
place-items: center;
717721
}
718722

723+
.items-start {
724+
align-items: flex-start;
725+
}
726+
719727
.items-center {
720728
align-items: center;
721729
}
@@ -728,16 +736,20 @@ video {
728736
justify-content: center;
729737
}
730738

731-
.justify-between {
732-
justify-content: space-between;
733-
}
734-
735739
.gap-2 {
736740
gap: 0.5rem;
737741
}
738742

739-
.gap-5 {
740-
gap: 1.25rem;
743+
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
744+
--tw-space-y-reverse: 0;
745+
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
746+
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
747+
}
748+
749+
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
750+
--tw-space-y-reverse: 0;
751+
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
752+
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
741753
}
742754

743755
.overflow-auto {
@@ -756,10 +768,6 @@ video {
756768
border-radius: 0.5rem;
757769
}
758770

759-
.rounded-full {
760-
border-radius: 9999px;
761-
}
762-
763771
.bg-opacity-90 {
764772
--tw-bg-opacity: 0.9;
765773
}
@@ -777,23 +785,23 @@ video {
777785
stroke: currentColor;
778786
}
779787

780-
.p-2 {
781-
padding: 0.5rem;
788+
.p-6 {
789+
padding: 1.5rem;
782790
}
783791

784792
.px-6 {
785793
padding-left: 1.5rem;
786794
padding-right: 1.5rem;
787795
}
788796

789-
.text-center {
790-
text-align: center;
791-
}
792-
793797
.font-brand {
794798
font-family: DotGothic16, ui-sans-serif, system-ui;
795799
}
796800

801+
.font-small-text {
802+
font-family: Nunito Sans, ui-sans-serif, system-ui;
803+
}
804+
797805
.text-2xl {
798806
font-size: 1.5rem;
799807
line-height: 2rem;
@@ -809,23 +817,26 @@ video {
809817
line-height: 1.25rem;
810818
}
811819

812-
.text-base {
813-
font-size: 1rem;
814-
line-height: 1.5rem;
820+
.font-bold {
821+
font-weight: 700;
815822
}
816823

817-
.text-xl {
818-
font-size: 1.25rem;
819-
line-height: 1.75rem;
824+
.font-medium {
825+
font-weight: 500;
820826
}
821827

822-
.text-5xl {
823-
font-size: 3rem;
824-
line-height: 1;
828+
.text-blue-600 {
829+
--tw-text-opacity: 1;
830+
color: rgb(37 99 235 / var(--tw-text-opacity));
825831
}
826832

827-
.font-bold {
828-
font-weight: 700;
833+
.text-gray-600 {
834+
--tw-text-opacity: 1;
835+
color: rgb(75 85 99 / var(--tw-text-opacity));
836+
}
837+
838+
.underline {
839+
text-decoration-line: underline;
829840
}
830841

831842
.antialiased {
@@ -837,6 +848,10 @@ video {
837848
opacity: 0.5;
838849
}
839850

851+
.opacity-70 {
852+
opacity: 0.7;
853+
}
854+
840855
.shadow {
841856
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
842857
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -879,6 +894,11 @@ video {
879894
transform: translate3d(0,0,0);
880895
}
881896

897+
.hover\:text-blue-800:hover {
898+
--tw-text-opacity: 1;
899+
color: rgb(30 64 175 / var(--tw-text-opacity));
900+
}
901+
882902
@media (min-width: 768px) {
883903
.md\:text-2xl {
884904
font-size: 1.5rem;

‎tailwind.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ module.exports = {
3939
extend: {},
4040
fontFamily: {
4141
'brand': ['DotGothic16', 'ui-sans-serif', 'system-ui'],
42+
'small-text': ['Nunito Sans', 'ui-sans-serif', 'system-ui'],
4243
},
4344

4445
plugins: [],

0 commit comments

Comments
 (0)
Please sign in to comment.