refactor(keymaps): establish mapping type

data/data.go

@@ -3,6 +3,7 @@ package data
 import (
 	"database/sql"
 	"fmt"
+	"log"
 
 	"github.com/markbates/goth"
 )
@@ -19,8 +20,13 @@ type User struct {
 	GithubID  string
 }
 
+type Mapping struct {
+	ID     int
+	Keymap string
+	MapsTo string
+}
+
 type UserSettings struct {
-	Mappings     map[string]string
 	SearchEngine string
 	LeaderKey    string
 }
@@ -114,43 +120,37 @@ func buildUserFromGothUser(gothUser goth.User) *User {
 	return user
 }
 
-func (s *Storage) GetUserSettings(email string) *UserSettings {
-	settings := &UserSettings{}
-	settings.Mappings = getMappings(s.db, email)
-	settings = s.getGenericSettings(email, settings)
-
-	return settings
-}
-
-func getMappings(db *sql.DB, email string) map[string]string {
-	rows, err := db.Query(
-		`SELECT keymap, maps_to
+func (s *Storage) GetMappings(email string) []Mapping {
+	mappings := []Mapping{}
+	rows, err := s.db.Query(
+		`SELECT mappings.id, keymap, maps_to
             FROM mappings
             INNER JOIN users
             ON mappings.user_id = users.id
             WHERE users.email = ?`,
 		email,
 	)
 	if err != nil {
+		log.Println(err)
 		return nil
 	}
 	defer rows.Close()
 
-	mappings := make(map[string]string)
 	for rows.Next() {
-		var keymap, mapsTo string
-		err = rows.Scan(&keymap, &mapsTo)
+		mapping := Mapping{}
+		err = rows.Scan(&mapping.ID, &mapping.Keymap, &mapping.MapsTo)
 		if err != nil {
 			return nil
 		}
 
-		mappings[keymap] = mapsTo
+		mappings = append(mappings, mapping)
 	}
 
 	return mappings
 }
 
-func (s *Storage) getGenericSettings(email string, settings *UserSettings) *UserSettings {
+func (s *Storage) GetUserSettings(email string) *UserSettings {
+	settings := &UserSettings{}
 	rows, err := s.db.Query(
 		`SELECT setting_key, setting_value
             FROM user_settings

handlers/root.go

@@ -15,6 +15,7 @@ func (h *Handler) HandleRoot(w http.ResponseWriter, r *http.Request) {
 	}
 
 	userSettings := h.store.GetUserSettings(user.Email)
+	mappings := h.store.GetMappings(user.Email)
 
-	views.Home(user, userSettings).Render(r.Context(), w)
+	views.Home(user, userSettings, mappings).Render(r.Context(), w)
 }

handlers/settings.go

@@ -18,6 +18,17 @@ func (h *Handler) HandleSettings(w http.ResponseWriter, r *http.Request) {
 	views.Settings(user, userSettings).Render(r.Context(), w)
 }
 
+func (h *Handler) HandleMappings(w http.ResponseWriter, r *http.Request) {
+	user, err := h.auth.GetSessionUser(r)
+	if err != nil {
+		log.Println(err)
+		return
+	}
+
+	mappings := h.store.GetMappings(user.Email)
+	views.Mappings(user, mappings).Render(r.Context(), w)
+}
+
 func (h *Handler) HandleSettingsUpdate(w http.ResponseWriter, r *http.Request) {
 	user, err := h.auth.GetSessionUser(r)
 	if err != nil {
@@ -36,6 +47,8 @@ func (h *Handler) HandleSettingsUpdate(w http.ResponseWriter, r *http.Request) {
 	userSettings.SearchEngine = r.FormValue("searchEngine")
 	h.store.UpdateUserSettings(user.Email, userSettings)
 
+	mappings := h.store.GetMappings(user.Email)
+
 	w.Header().Set("HX-Refresh", "true")
-	views.Home(user, userSettings).Render(r.Context(), w)
+	views.Home(user, userSettings, mappings).Render(r.Context(), w)
 }

main.go

@@ -41,6 +41,7 @@ func main() {
 	// app routes
 	r.HandleFunc("/", auth.RequireAuth(handler.HandleRoot, authService))
 	r.HandleFunc("/settings", auth.RequireAuth(handler.HandleSettings, authService))
+	r.HandleFunc("/mappings", auth.RequireAuth(handler.HandleMappings, authService))
 	r.HandleFunc("/update-settings", auth.RequireAuth(handler.HandleSettingsUpdate, authService))
 
 	// auth

public/js/input.js

@@ -1,11 +1,14 @@
 let inputSequence = [];
 let leaderMode = false;
 
+const mappingsArray = JSON.parse(
+    document.getElementById("mappings").textContent,
+);
 const userSettings = JSON.parse(
     document.getElementById("userSettings").textContent,
 );
 
-const keymaps = userSettings.Mappings;
+const keymaps = parseMappings(mappingsArray);
 const leaderKey = userSettings.LeaderKey;
 
 document.addEventListener("keydown", (event) => {
@@ -86,3 +89,12 @@ document.addEventListener("keydown", (event) => {
             });
     }
 });
+
+// Parses an array of mappings objects into a dictionary
+function parseMappings(mappingsArray) {
+    const mappings = {};
+    mappingsArray.forEach((mapping) => {
+        mappings[mapping["Keymap"]] = mapping["MapsTo"];
+    });
+    return mappings;
+}

views/home.templ

@@ -5,8 +5,9 @@ import (
 	"github.com/scottmckendry/mnemstart/data"
 )
 
-templ Home(user goth.User, settings *data.UserSettings) {
+templ Home(user goth.User, settings *data.UserSettings, mappings []data.Mapping) {
 	@templ.JSONScript("userSettings", settings)
+	@templ.JSONScript("mappings", mappings)
 	@Page(true, user) {
 		<h1>mnemstart</h1>
 		<form action={ templ.SafeURL(settings.SearchEngine) } method="get">

views/page.templ

@@ -17,6 +17,7 @@ templ Page(nav bool, user goth.User) {
 		</head>
 		<body>
 			<button hx-get="/settings" hx-target="body" hx-swap="beforeend">Settings</button>
+			<button hx-get="/mappings" hx-target="body" hx-swap="beforeend">Mappings</button>
 			{ children... }
 			if nav {
 				<footer>

views/settings.templ

@@ -10,35 +10,6 @@ templ Settings(user goth.User, settings *data.UserSettings) {
 		<div class="modal-underlay" _="on click trigger closeModal"></div>
 		<div class="modal-content">
 			<h2>Settings</h2>
-			/*
-			<table id="mappings-table">
-				<thead>
-					<tr>
-						<th>Keymap</th>
-						<th>URL</th>
-						<th></th>
-					</tr>
-				</thead>
-				<tbody>
-					for keymap, url := range settings.Mappings {
-						<tr>
-							<td>{ keymap }</td>
-							<td>{ url }</td>
-							<td>
-								<button class="button" hx-delete={ "/delete-mapping/" + keymap } hx-swap="#mappings-table">Delete</button>
-							</td>
-						</tr>
-					}
-					<tr>
-						<td><input type="text" name="keymap" placeholder="Keymap" mapping-include-edit=""/></td>
-						<td><input type="text" name="url" placeholder="URL" mapping-include-edit=""/></td>
-						<td>
-							<button class="button" _="on click trigger addMapping" hx-put="/add-mapping" hx-include="input[mapping-include-edit]" hx-swap="#mappings-table">Add</button>
-						</td>
-					</tr>
-				</tbody>
-			</table>
-            */
 			<label for="leaderKey">Leader Key</label>
 			<input type="text" name="leaderKey" value={ settings.LeaderKey } placeholder="Leader Key" data-include-edit=""/>
 			<label for="searchEngine">Search Engine</label>