chore(web): scaffold core components

* chore: reorg folder structure * chore(config): add npmrc to access fontawesome pro kit * deps: add new dependencies * deps: bump all to latest * chore: reformat scripts in accordance to linting rules * chore(noaa): camel case json keys in response
clairBuoyant · Jul 29, 2024 · 5b32d8e · 5b32d8e
1 parent eb6a7c0
commit 5b32d8e
Show file tree

Hide file tree

Showing 106 changed files with 4,078 additions and 1,715 deletions.
diff --git a/.taskfiles/web.taskfile.yml b/.taskfiles/web.taskfile.yml
@@ -2,6 +2,11 @@
 version: '3'
 
 tasks:
+  browserslist:update:
+    internal: true
+    cmds:
+      - npx update-browserslist-db@latest
+
   build:
     desc: Transpile for production
     cmds:
@@ -11,6 +16,7 @@ tasks:
     desc: Install all dependencies
     cmds:
       - npm ci
+      - task: browserslist-update
 
   run:
     desc: Run Web with Vite dev server

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -5,6 +5,9 @@
       "changeProcessCWD": true
     }
   ],
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
   "typescript.tsdk": "./web/node_modules/typescript/lib",
   "yaml.format.singleQuote": true,
   "yaml.schemas": {

diff --git a/Taskfile.yml b/Taskfile.yml
@@ -1,6 +1,8 @@
 ---
 version: '3'
 
+dotenv: ['.env']
+
 includes:
   api:
     taskfile: .taskfiles/api.taskfile.yml

diff --git a/internal/http/handler.go b/internal/http/handler.go
@@ -13,6 +13,21 @@ type application interface {
 	ServerError(w http.ResponseWriter, r *http.Request, err error, code int)
 }
 
+func AuthMe(app application) http.HandlerFunc {
+	return func(w http.ResponseWriter, r *http.Request) {
+		type Me struct {
+			FirstName string `json:"firstName"`
+		}
+
+		// TODO(@kylejb): provide user information
+		if err := response.JSON(w, http.StatusOK, Me{
+			FirstName: "UserFirstNameGoesHere (TESTING)",
+		}); err != nil {
+			app.ServerError(w, r, errors.NewAppError(http.StatusInternalServerError, "failed to encode response", err), 0)
+		}
+	}
+}
+
 func Buoy(app application) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
 		dataset := noaa.RealtimeDataset(r.URL.Query().Get("dataset"))
@@ -25,10 +40,10 @@ func Buoy(app application) http.HandlerFunc {
 			return
 		}
 
-		// TODO: add validation for stationID too
+		// TODO(@kylejb): add validation for stationID too
 		data, err := noaa.Realtime(r.PathValue("stationID"), dataset)
 		if err != nil {
-			// TODO: dynamically provide http status code
+			// TODO(@kylejb): dynamically provide http status code
 			app.ServerError(w, r, errors.NewAppError(http.StatusNotAcceptable, "failed to encode response", err), http.StatusNotAcceptable)
 			return
 		}

diff --git a/internal/http/routes.go b/internal/http/routes.go
@@ -9,6 +9,8 @@ import (
 func NewRouter(app *app.Application) *http.ServeMux {
 	mux := http.NewServeMux()
 
+	mux.HandleFunc("/auth/me", AuthMe(app))
+
 	mux.HandleFunc("/buoy/{stationID}", Buoy(app))
 	mux.HandleFunc("/buoys", Buoys(app))
 

diff --git a/pkg/noaa/noaa.go b/pkg/noaa/noaa.go
@@ -67,7 +67,7 @@ func parseValue(value string) (float32, error) {
 }
 
 func parseRecordToStruct(record []string, mo *MeteorologicalObservation) error {
-	// TODO: refactor parsing approach
+	// TODO(@kylejb): refactor parsing approach
 
 	row := record[0]
 	trimmed := strings.TrimSpace(row)

diff --git a/pkg/noaa/realtime.go b/pkg/noaa/realtime.go
@@ -54,52 +54,52 @@ func (d RealtimeDataset) IsValid() bool {
 
 type MeteorologicalObservation struct {
 	Datetime            time.Time `json:"datetime"`
-	WindDirection       int16     `json:"wind_direction"`
-	WindSpeed           float32   `json:"wind_speed"`
-	WindGust            float32   `json:"wind_gust"`
-	WaveHeight          float32   `json:"wave_height"`
-	DominantWavePeriod  float32   `json:"dominant_wave_period"`
-	AverageWavePeriod   float32   `json:"average_wave_period"`
-	WaveDirection       int16     `json:"wave_direction"`
-	SeaLevelPressure    float32   `json:"sea_level_pressure"`
-	PressureTendency    float32   `json:"pressure_tendency"`
-	AirTemperature      float32   `json:"air_temperature"`
-	WaterTemperature    float32   `json:"water_temperature"`
-	DewpointTemperature float32   `json:"dewpoint_temperature"`
+	WindDirection       int16     `json:"windDirection"`
+	WindSpeed           float32   `json:"windSpeed"`
+	WindGust            float32   `json:"windGust"`
+	WaveHeight          float32   `json:"waveHeight"`
+	DominantWavePeriod  float32   `json:"dominantWavePeriod"`
+	AverageWavePeriod   float32   `json:"averageWavePeriod"`
+	WaveDirection       int16     `json:"waveDirection"`
+	SeaLevelPressure    float32   `json:"seaLevelPressure"`
+	PressureTendency    float32   `json:"pressureTendency"`
+	AirTemperature      float32   `json:"airTemperature"`
+	WaterTemperature    float32   `json:"waterTemperature"`
+	DewpointTemperature float32   `json:"dewpointTemperature"`
 	Visibility          float32   `json:"visibility"`
 	Tide                float32   `json:"tide"`
 }
 
 type WaveSummaryObservation struct {
 	Datetime              time.Time `json:"datetime"`
-	SignificantWaveHeight float32   `json:"significant_wave_height"`
-	SwellHeight           float32   `json:"swell_height"`
-	SwellPeriod           float32   `json:"swell_period"`
-	WindWaveHeight        float32   `json:"wind_wave_height"`
-	WindWavePeriod        float32   `json:"wind_wave_period"`
-	SwellDirection        string    `json:"swell_direction"`
-	WindWaveDirection     float32   `json:"wind_wave_direction"`
+	SignificantWaveHeight float32   `json:"significantWaveHeight"`
+	SwellHeight           float32   `json:"swellHeight"`
+	SwellPeriod           float32   `json:"swellPeriod"`
+	WindWaveHeight        float32   `json:"windWaveHeight"`
+	WindWavePeriod        float32   `json:"windWavePeriod"`
+	SwellDirection        string    `json:"swellDirection"`
+	WindWaveDirection     float32   `json:"windWaveDirection"`
 	Steepness             string    `json:"steepness"`
-	AverageWavePeriod     float32   `json:"average_wave_period"`
-	DominantWaveDirection int16     `json:"dominant_wave_direction"`
+	AverageWavePeriod     float32   `json:"averageWavePeriod"`
+	DominantWaveDirection int16     `json:"dominantWaveDirection"`
 }
 
 // Encodes time.Time object to ISODateString
 func (o MeteorologicalObservation) MarshalJSON() ([]byte, error) {
 	metObs := struct {
 		Datetime            string  `json:"datetime"`
-		WindDirection       int16   `json:"wind_direction"`
-		WindSpeed           float32 `json:"wind_speed"`
-		WindGust            float32 `json:"wind_gust"`
-		WaveHeight          float32 `json:"wave_height"`
-		DominantWavePeriod  float32 `json:"dominant_wave_period"`
-		AverageWavePeriod   float32 `json:"average_wave_period"`
-		WaveDirection       int16   `json:"wave_direction"`
-		SeaLevelPressure    float32 `json:"sea_level_pressure"`
-		PressureTendency    float32 `json:"pressure_tendency"`
-		AirTemperature      float32 `json:"air_temperature"`
-		WaterTemperature    float32 `json:"water_temperature"`
-		DewpointTemperature float32 `json:"dewpoint_temperature"`
+		WindDirection       int16   `json:"windDirection"`
+		WindSpeed           float32 `json:"windSpeed"`
+		WindGust            float32 `json:"windGust"`
+		WaveHeight          float32 `json:"waveHeight"`
+		DominantWavePeriod  float32 `json:"dominantWavePeriod"`
+		AverageWavePeriod   float32 `json:"averageWavePeriod"`
+		WaveDirection       int16   `json:"waveDirection"`
+		SeaLevelPressure    float32 `json:"seaLevelPressure"`
+		PressureTendency    float32 `json:"pressureTendency"`
+		AirTemperature      float32 `json:"airTemperature"`
+		WaterTemperature    float32 `json:"waterTemperature"`
+		DewpointTemperature float32 `json:"dewpointTemperature"`
 		Visibility          float32 `json:"visibility"`
 		Tide                float32 `json:"tide"`
 	}{

diff --git a/pkg/noaa/stations.go b/pkg/noaa/stations.go
@@ -7,20 +7,20 @@ import (
 
 type Stations struct {
 	XMLName  xml.Name  `xml:"stations" json:"-"`
-	Stations []Station `xml:"station"`
+	Stations []Station `xml:"station" json:"stations"`
 }
 
 type Station struct {
 	XMLName      xml.Name `xml:"station" json:"-"`
-	ID           string   `xml:"id,attr"`
-	Lat          float32  `xml:"lat,attr"`
-	Lon          float32  `xml:"lon,attr"`
-	Name         string   `xml:"name,attr"`
-	Owner        string   `xml:"owner,attr"`
-	Type         string   `xml:"type,attr"`
-	Met          string   `xml:"met,attr"`
-	Currents     string   `xml:"currents,attr"`
-	WaterQuality string   `xml:"waterquality,attr"`
+	ID           string   `xml:"id,attr" json:"id"`
+	Lat          float32  `xml:"lat,attr" json:"latitude"`
+	Lon          float32  `xml:"lon,attr" json:"longitude"`
+	Name         string   `xml:"name,attr" json:"name"`
+	Owner        string   `xml:"owner,attr" json:"owner"`
+	Type         string   `xml:"type,attr" json:"type"`
+	Met          string   `xml:"met,attr" json:"met"`
+	Currents     string   `xml:"currents,attr" json:"currents"`
+	WaterQuality string   `xml:"waterquality,attr" json:"waterQuality"`
 }
 
 // ActiveStations provides information about all currently active

diff --git a/web/.eslintignore b/web/.eslintignore
@@ -2,6 +2,7 @@
 tsconfig.json
 tsconfig.*.json
 **/*.config.ts
+**/*.config.js
 
 # dependencies
 node_modules

diff --git a/web/.eslintrc.json b/web/.eslintrc.json
@@ -1,24 +1,28 @@
 {
   "env": {
-    "amd": true,
     "browser": true,
     "node": true
   },
   "extends": [
-    "plugin:jsx-a11y/recommended",
     "airbnb",
     "airbnb-typescript",
+    "eslint:recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript",
+    "plugin:jsx-a11y/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
     "prettier"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
     },
-    "ecmaVersion": 2021,
-    "project": [
-      "./tsconfig.json"
-    ],
+    "ecmaVersion": "latest",
+    "project": ["./tsconfig.json"],
     "sourceType": "module"
   },
   "plugins": [
@@ -38,6 +42,12 @@
     "import/named": "error",
     "import/no-anonymous-default-export": "off",
     "import/no-duplicates": "error",
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": ["**/*{-,.}spec.ts", "**/app/provider.tsx"]
+      }
+    ],
     "import/no-named-as-default": "error",
     "import/no-named-as-default-member": "off",
     "import/no-unresolved": "error",
@@ -48,15 +58,7 @@
           "caseInsensitive": true,
           "order": "asc"
         },
-        "groups": [
-          "builtin",
-          "external",
-          "internal",
-          "parent",
-          "sibling",
-          "index",
-          "object"
-        ],
+        "groups": ["builtin", "external", "internal", "parent", "sibling", "index", "object"],
         "newlines-between": "always"
       }
     ],
@@ -74,32 +76,24 @@
         }
       }
     ],
+    "react-hooks/rules-of-hooks": "error",
+    "react/jsx-props-no-spreading": "off",
+    "react/prop-types": "off",
     "react/react-in-jsx-scope": "off",
     "react/require-default-props": "off",
-    "react-hooks/rules-of-hooks": "error",
     "sort-keys-fix/sort-keys-fix": "warn"
   },
   "settings": {
     "import/parsers": {
-      "@typescript-eslint/parser": [
-        ".ts",
-        ".tsx"
-      ]
+      "@typescript-eslint/parser": [".ts", ".tsx"]
     },
     "import/resolver": {
       "node": {
-        "extensions": [
-          ".js",
-          ".jsx",
-          ".ts",
-          ".tsx"
-        ]
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
       },
       "typescript": {
         "alwaysTryTypes": true,
-        "project": [
-          "tsconfig.json"
-        ]
+        "project": ["tsconfig.json"]
       }
     },
     "react": {

diff --git a/web/.npmrc b/web/.npmrc
@@ -0,0 +1,3 @@
+@awesome.me:registry=https://npm.fontawesome.com/
+@fortawesome:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=${FA_PACKAGE_TOKEN}