Merge branch 'dev'

friends/assets/css/app.css

@@ -3,6 +3,11 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+/* mapbox */
+.mapboxgl-control-container{
+  display:none;
+}
+
 /* Override some defaults I don't like */
 .input{
   border-radius: inherit !important;

friends/assets/js/app.js

@@ -24,9 +24,15 @@ import "phoenix_html"
 import {Socket} from "phoenix"
 import {LiveSocket} from "phoenix_live_view"
 import topbar from "../vendor/topbar"
+import mapboxgl from "../vendor/mapbox-gl"
+
+let Hooks = {};
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+let liveSocket = new LiveSocket("/live", Socket, {
+    hooks: Hooks,
+    params: { _csrf_token: csrfToken }
+})
 
 // Show progress bar on live navigation and form submits
 topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
@@ -42,3 +48,36 @@ liveSocket.connect()
 // >> liveSocket.disableLatencySim()
 window.liveSocket = liveSocket
 
+window.hideElement = function (id) {
+    var el = document.getElementById(id);
+    el.hidden = true;
+}
+
+window.selectResult = function (latlon, display) {    
+    var name_el = document.querySelector("[autocomplete=name]");
+    var latlon_el = document.querySelector("[autocomplete=latlon]");
+
+    name_el.value = display;
+    latlon_el.value = latlon;
+
+    window.liveSocket.hooks.showMapbox.initMap();
+};
+
+Hooks.showMapbox = {
+    initMap() {
+        mapboxgl.accessToken = 'pk.eyJ1IjoicnlhbnBhbmR5YSIsImEiOiJja3psM2tlcDA1MXl1Mm9uZmo5bGxpNzdxIn0.TwBKpTTypcD5fWFc8XRyHg';
+    
+        const latlon = JSON.parse(document.querySelector("[autocomplete=latlon]").value).reverse();
+        
+        const map = new mapboxgl.Map({
+          container: 'map',
+          style: 'mapbox://styles/mapbox/outdoors-v11',
+            center: latlon,
+          zoom: 8
+        });
+      },
+    
+      mounted() {
+        this.initMap();
+      }
+}

friends/assets/package.json

@@ -7,8 +7,8 @@
     "acorn": "^7.4.1",
     "acorn-node": "^1.8.2",
     "acorn-walk": "^7.2.0",
-    "arg": "^5.0.2",
     "anymatch": "^3.1.2",
+    "arg": "^5.0.2",
     "autoprefixer": "^10.4.12",
     "binary-extensions": "^2.2.0",
     "braces": "^3.0.2",
@@ -44,6 +44,7 @@
     "is-glob": "^4.0.3",
     "is-number": "^7.0.0",
     "lilconfig": "^2.0.6",
+    "mapbox-gl": "^2.10.0",
     "merge2": "^1.4.1",
     "micromatch": "^4.0.5",
     "minimist": "^1.2.7",
@@ -63,10 +64,10 @@
     "postcss-nested": "^6.0.0",
     "postcss-selector-parser": "^6.0.10",
     "postcss-value-parser": "^4.2.0",
+    "queue-microtask": "^1.2.3",
     "quick-lru": "^5.1.1",
     "read-cache": "^1.0.0",
     "readdirp": "^3.6.0",
-    "queue-microtask": "^1.2.3",
     "resolve": "^1.22.1",
     "reusify": "^1.0.4",
     "run-parallel": "^1.2.0",
@@ -80,7 +81,6 @@
     "xtend": "^4.0.2",
     "yaml": "^1.10.2"
   },
-  "devDependencies": {},
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },

friends/lib/friends/friend.ex

@@ -36,21 +36,45 @@ defmodule Friends.Friend do
 
   def changeset(friend, params \\ %{}) do
     friend
-    |> Ecto.Changeset.cast(params, [:name, :born, :nickname, :email, :phone, :slug, :user_id])
+    |> Ecto.Changeset.cast(params, [
-    |> Ecto.Changeset.validate_required([:name, :email, :phone, :born])
+      :name,
-    |> Ecto.Changeset.validate_format(:name, ~r/\w+\ \w+/)
+      :born,
+      :nickname,
+      :email,
+      :phone,
+      :slug,
+      :user_id,
+      :address_id
+    ])
+    |> Ecto.Changeset.validate_required([:name, :email, :phone, :born], message: "This field is required.")
+    |> Ecto.Changeset.validate_format(:name, ~r/\w+\ \w+/, message: "Please enter your full name.")
     |> Ecto.Changeset.validate_format(
       :email,
-      Regex.compile!("^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$")
+      Regex.compile!("^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$"),
+      message: "Invalid email format."
     )
     |> Ecto.Changeset.validate_format(
       :phone,
-      Regex.compile!("^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$")
+      Regex.compile!("^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$"),
+      message: "Invalid phone format."
     )
+    |> validate_birthdate()
     |> Ecto.Changeset.unique_constraint(:name)
     |> Ecto.Changeset.unique_constraint(:email)
   end
 
+  defp validate_birthdate(%{changes: %{born: born}} = changeset) do
+    today = DateTime.utc_now |> DateTime.to_date
+    case born |> Date.diff(today) |> div(-365) do
+      age when age < 0 ->
+        changeset |> Ecto.Changeset.add_error(:born, "Please enter a date in the past.")
+      age when age > 90 ->
+        changeset |> Ecto.Changeset.add_error(:born, "Are you sure you're #{age} years old?")
+      _ -> changeset
+    end
+  end
+  defp validate_birthdate(changeset), do: changeset
+
   def all() do
     preloads = [:relationships, :reverse_relationships, :user, :address]
     @repo.all(from(f in Friends.Friend, preload: ^preloads))
@@ -64,10 +88,10 @@ defmodule Friends.Friend do
   def get_by_slug(slug) do
     @repo.one(
       from(f in Friend,
-        where: f.slug == ^slug,
+        where: f.slug == ^slug
-        preload: [:relationships, :reverse_relationships, :address]
       )
     )
+    |> load_preloads()
   end
 
   def get_by_id(id) do
@@ -82,13 +106,13 @@ defmodule Friends.Friend do
   def get_by_email(email) do
     @repo.one(
       from(f in Friend,
-        where: f.email == ^email,
+        where: f.email == ^email
-        preload: [:relationships, :reverse_relationships]
       )
     )
+    |> load_preloads()
   end
 
-  def create(params) do
+  def create(params \\ %{id: nil}) do
     %Friend{}
     |> Friend.changeset(%{params | id: nil})
     |> Map.put(:action, :insert)
@@ -102,9 +126,9 @@ defmodule Friends.Friend do
 
   def commit(changeset) do
     changeset
-    |> generate_slug
+    |> @repo.commit!
-    |> @repo.insert!
     |> load_preloads
+    |> assign_user!()
   end
 
   def generate_slug(%Ecto.Changeset{} = changeset) do
@@ -125,9 +149,10 @@ defmodule Friends.Friend do
 
   def create_or_update(params) do
     case params.id do
-      :new ->
+      "new" ->
         params
         |> create()
+        |> generate_slug
         |> commit()
 
       _number ->
@@ -159,6 +184,14 @@ defmodule Friends.Friend do
     if user |> is_nil(), do: false, else: friend.id == user.profile.id
   end
 
+  def assign_address(%Friend{} = friend, address) do
+    friend
+    |> Friends.Friend.changeset(%{
+      address_id: address.id
+    })
+    |> Friends.Repo.update!()
+  end
+
   def assign_user(%Friend{} = friend) do
     case friend.email |> Friends.Accounts.get_user_by_email() do
       nil ->
@@ -169,6 +202,11 @@ defmodule Friends.Friend do
     end
   end
 
+  def assign_user!(%Friend{} = friend) do
+    %{friend: new_friend, user: _user} = assign_user(friend)
+    new_friend
+  end
+
   def load_user(%Friends.Friend{user: %Ecto.Association.NotLoaded{}} = model) do
     model
     |> @repo.preload(:user)
@@ -200,5 +238,16 @@ defmodule Friends.Friend do
     |> @repo.preload([:user, :relationships, :reverse_relationships, :address])
   end
 
-  def load_preloads(%Friends.Friend{} = friend), do: friend
+  def load_preloads(friend), do: friend
+
+  def get_address(%Friend{} = friend) do
+    if friend.address do
+      {
+        friend.address.latlon,
+        friend.address.name
+      }
+    else
+      {nil, nil}
+    end
+  end
 end

friends/lib/friends/places/place.ex

@@ -1,8 +1,11 @@
 defmodule Friends.Places.Place do
   use Ecto.Schema
   import Ecto.Query
+  import Ecto.Changeset
   import Helpers
 
+  alias Friends.Places.{Place, Search}
+
   @repo Friends.Repo
 
   schema "places" do
@@ -12,50 +15,19 @@ defmodule Friends.Places.Place do
     field(:zoom, :integer)
 
     has_many(:events, Friends.Event)
-    has_many(:friends, Friends.Friend)
+    has_many(:friends, Friends.Friend, foreign_key: :address_id)
   end
 
-  def new(place_name, opts \\ nil) do
+  def validate(place, params \\ %{}) do
-    {:ok, place} =
-      @repo.insert(%Friends.Places.Place{
-        name: place_name,
-        type: opts[:type]
-      })
-
     place
+    |> cast(params, [:name, :type, :latlon, :zoom])
+    |> unique_constraint(:name)
+    |> validate_required(:name)
   end
 
-  def get(place_name) do
+  def get_or_create(place) do
-    @repo.one(
-      from(p in Place,
-        where: p.name == ^place_name,
-        preload: [:events]
-      )
-    )
-  end
-
-  def get_or_new(name, opts \\ nil) do
-    case get(name) do
-      nil -> new(name, opts)
-      place -> place
-    end
-  end
-
-  def get_by_slug(slug) do
-    name = slug |> from_slug
-
-    @repo.one(
-      from(p in Place,
-        where: p.name == ^name,
-        preload: [:events]
-      )
-    )
-  end
-
-  def changeset(place, params \\ %{}) do
     place
-    |> Ecto.Changeset.cast(params, [:name, :type, :latlon, :zoom])
+    |> Friends.Places.Place.validate()
-    |> Ecto.Changeset.validate_required([:name])
+    |> Friends.Repo.insert!()
-    |> Ecto.Changeset.unique_constraint(:name)
   end
 end

friends/lib/friends/places/search.ex

@@ -1,5 +1,7 @@
 defmodule Friends.Places.Search do
-  def api_key, do: "pk.7c4a6f4bf061fd4a9af9663132c58af3"
+  def api_key,
+    do:
+      "pk.eyJ1IjoicnlhbnBhbmR5YSIsImEiOiJja3psM2tlcDA1MXl1Mm9uZmo5bGxpNzdxIn0.TwBKpTTypcD5fWFc8XRyHg"
 
   def viewbox(region) do
     [lat_min, lat_max, lon_min, lon_max] = region |> Enum.map(&String.to_float/1)
@@ -12,16 +14,30 @@ defmodule Friends.Places.Search do
     ]
   end
 
-  def query(str, region \\ nil) do
+  def autocomplete(str, region \\ nil) do
     viewbox =
       if region do
-        viewbox(query(region))
+        viewbox(autocomplete(region))
       end
 
-    url = "https://us1.locationiq.com/v1/search?key=#{api_key()}&q=#{str}&format=json#{viewbox}"
+    url =
+      "https://api.mapbox.com/geocoding/v5/mapbox.places/#{str}.json?proximity=ip&types=place%2Cpostcode%2Caddress&access_token=#{api_key}"
 
     response = HTTPoison.get!(url)
     results = Poison.decode!(response.body)
-    results
+
+    results["features"]
+  end
+
+  def parse_features(%{
+        "center" => lonlat,
+        "place_name" => name,
+        "id" => id
+      }) do
+    %{
+      name: name,
+      latlon: lonlat |> Enum.reverse() |> Poison.encode!(),
+      id: id |> String.replace(".", "-")
+    }
   end
 end

friends/lib/friends/repo.ex

@@ -2,4 +2,13 @@ defmodule Friends.Repo do
   use Ecto.Repo,
     otp_app: :friends,
     adapter: Ecto.Adapters.Postgres
+
+  def commit!(changeset) do
+    IO.inspect(changeset)
+
+    case changeset.action do
+      :update -> update!(changeset)
+      :insert -> insert!(changeset)
+    end
+  end
 end

friends/lib/friends_web/controllers/user_auth.ex

@@ -159,7 +159,7 @@ defmodule FriendsWeb.UserAuth do
       nil ->
         conn
         |> put_flash(:info, "You're logged in but we still need to make you a profile!")
-        |> redirect(to: Routes.friends_edit_path(conn, :overview, :new))
+        |> redirect(to: Routes.friends_edit_path(conn, :welcome))
         |> halt()
 
       # Or make a new one

friends/lib/friends_web/live/components/autocomplete.ex

@@ -0,0 +1,52 @@
+defmodule FriendsWeb.Components.Autocomplete do
+  use FriendsWeb, :live_component
+  import Helpers
+
+  alias Phoenix.LiveView.JS
+
+  def search_results(assigns) do
+    ~H"""
+    <div id="search-results" class="absolute w-full md:w-max bottom-16">
+
+    <%= if @search_results do %>
+    <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-2/3 overflow-auto">
+    <%= for r <- @search_results do %>
+    <li class="py-0 my-0">
+      <.link id={r[:id]}
+      latlon={r[:latlon]}
+      class="search_result"
+      onMouseDown={"selectResult('#{r[:latlon]}', '#{r[:name]}')"}>
+        <%= r[:name] %>
+      </.link>
+      </li>
+    <% end %>
+    </ul>
+    <% end %>
+
+    </div>
+    <script language="javascript">
+    window.elSearch_results = document.querySelector("#search-results");
+    window.elSearchInput = document.querySelector("input[autocomplete=value]");
+    window.elSearchResultID = document.querySelector("input[autocomplete=id]");
+
+    window.hideResults = function () {
+    window.elSearch_results.classList.add("hidden");
+    }
+
+    window.showResults = function () {
+    document.getElementById("search-results").classList.remove("hidden");
+    }
+
+    window.selectSearchResult = function (result) {
+    const elSelectedResult = document.querySelector("#" + result);
+    const searchResultID = elSelectedResult.attributes.id.value;
+    const display = elSelectedResult.innerText;
+
+    window.elSearchInput.value = display;
+    window.elSearchResultID.value = searchResultID;
+    }
+    </script>
+
+    """
+  end
+end

friends/lib/friends_web/live/components/components.ex

@@ -3,6 +3,8 @@ defmodule FriendsWeb.FriendsLive.Components do
   use Phoenix.HTML
   import Helpers
   alias Friends.Friend
+  alias FriendsWeb.Components.{Autocomplete, Map}
+  alias Phoenix.LiveView.JS
 
   def header(assigns) do
     ~H"""
@@ -25,23 +27,27 @@ defmodule FriendsWeb.FriendsLive.Components do
     """
   end
 
+  @spec edit_menu(any) :: Phoenix.LiveView.Rendered.t()
   def edit_menu(assigns) do
-    ~H"""
+    if assigns.live_action == :welcome,
-        <div class="hidden sm:tabs sm:mb-8">
+      do: "",
-      <%= for page <- [:overview, :timeline, :relationships] do %>
+      else: ~H"""
-      <% is_active = if(page == @live_action) do "tab-active" end %>
+          <div class="hidden sm:tabs sm:mb-8">
-      <.link patch={Routes.friends_edit_path(FriendsWeb.Endpoint, page, @friend.slug)} class={"font-bold sm:tab-lg flex-grow no-underline tab tab-lifted #{is_active}"}>
+        <%= for page <- [:overview, :timeline, :relationships] do %>
-      <%= page |> to_string |> :string.titlecase() %>
+        <% is_active = if(page == @live_action) do "tab-active" end %>
-      </.link>
+        <.link patch={Routes.friends_edit_path(FriendsWeb.Endpoint, page, @friend.slug)} class={"font-bold sm:tab-lg flex-grow no-underline tab tab-lifted #{is_active}"}>
-      <% end %>
+        <%= page |> to_string |> :string.titlecase() %>
-    </div>
+        </.link>
-    """
+        <% end %>
+      </div>
+      """
   end
 
   def show_page(:main, assigns), do: show_page(:overview, %{assigns | live_action: :overview})
 
   def show_page(:overview, assigns) do
     ~H"""
+                  <Map.show address_latlon={@latlon} />
         <ul class="py-4 pl-0 md:text-xl h-1/2">
           <li class="flex flex-row mb-8 gap-6">
               <strong class="w-28 text-right">Nickname:</strong>
@@ -70,7 +76,8 @@ defmodule FriendsWeb.FriendsLive.Components do
           </li>
           <li class="flex flex-row mb-8 gap-6">
               <strong class="w-28 text-right">Address:</strong>
-              <div class=""><%= @friend.address %></div>
+              <div class=""><%= @address %></div>
+              <input type="hidden" autocomplete="latlon" value={@latlon}/>
           </li>
         </ul>
     """
@@ -119,17 +126,23 @@ defmodule FriendsWeb.FriendsLive.Components do
   end
 
   ###
+  def edit_page(:welcome, assigns) do
+    top = ~H"""
+    <h1>Welcome!</h1>
+    <p>Before we get started, we just need some basic info about you:</p>
+    <%= edit_page(:overview, assigns) %>
+    """
+  end
 
   def edit_page(:overview, assigns) do
     ~H"""
-    <%= @peer_data.address |> Tuple.to_list |> Enum.join(".") %>
-
     <.form
         for={@changeset}
         let={f}
         action={@action}
         phx_change= "validate"
-        phx_submit= "save">
+        phx_submit= "save"
+        >
         <%= hidden_input f, :id, value: @friend.id %>
         <div class="border-b-4 flex flex-row">
           <%= text_input f, :name, placeholder: "Full Name",
@@ -144,11 +157,24 @@ defmodule FriendsWeb.FriendsLive.Components do
             phx_debounce: :blur %>
           <div class="min-w-fit flex place-items-center mx-4"><%= error_tag f, :name %></div>
         </div>
+
+    <%= if @address_latlon do %>
+          <Map.show address_latlon={@address_latlon} />
+      <% end %>
         <ul class="py-4 pl-0 h-1/2">
+        <li class="flex flex-row gap-x-6">
+              <strong class="md:text-xl w-20 md:w-28 shrink-0 text-right">Email:</strong>
+              <div class="flex flex-col h-16">
+                <%= text_input f, :email, class: "input input-primary input-sm md:input-md input-disabled", phx_debounce: "blur", value: @current_user.email %>
+                <div class="min-w-fit flex place-items-center mr-4"><%= error_tag f, :email %></div>
+              </div>
+          </li>
+        <%= if @live_action != :welcome do %>
           <li class="flex flex-row gap-x-6 h-16">
               <strong class="md:text-xl w-20 md:w-28 shrink-0 text-right">Nickname:</strong>
               <div class=""><%= text_input f, :nickname, class: "input input-primary input-sm md:input-md", phx_debounce: "blur", value: @friend.nickname %></div>
           </li>
+          <% end %>
           <li class="flex flex-row gap-x-6">
               <strong class="md:text-xl w-20 md:w-28 shrink-0 text-right">Birthday:</strong>
               <div class="flex flex-col h-16">
@@ -156,33 +182,37 @@ defmodule FriendsWeb.FriendsLive.Components do
                 <div class="min-w-fit flex place-items-center mr-4"><%= error_tag f, :born %></div>
               </div>
           </li>
-          <li class="flex flex-row gap-x-6">
-              <strong class="md:text-xl w-20 md:w-28 shrink-0 text-right">Email:</strong>
-              <div class="flex flex-col h-16">
-                <%= text_input f, :email, class: "input input-primary input-sm md:input-md", phx_debounce: "blur", value: @friend.email %>
-                <div class="min-w-fit flex place-items-center mr-4"><%= error_tag f, :email %></div>
-              </div>
-          </li>
           <li class="flex flex-row gap-x-6">
               <strong class="md:text-xl w-20 md:w-28 shrink-0 text-right">Phone:</strong>
               <div class="flex flex-col h-16">
-                <%= text_input f, :phone, class: "input input-primary input-sm md:input-md", phx_debounce: "blur", value: @friend.phone %>
+                <%= text_input f, :phone, class: "input input-primary input-sm md:input-md", phx_debounce: "blur", value: @friend.phone |> FriendsWeb.LiveHelpers.display_phone(@changeset) %>
                 <div class="min-w-fit flex place-items-center mr-4"><%= error_tag f, :phone %></div>
               </div>
           </li>
-          <li class="flex flex-row gap-x-6">
+          <li class="flex flex-row gap-x-6 relative">
               <strong class="md:text-xl w-20 md:w-28 shrink-0 text-right">Address:</strong>
-              <div class="flex flex-col h-16">
+                <div class="flex flex-col h-16">
-                <%= text_input f, :address_query, class: "input input-primary input-sm md:input-md", phx_throttle: "500", value: @address_query %>
+                <%= text_input f, :address_query, value: @address_query,
-                <%= hidden_input f, :address_id, value: 0 %>
+                class: "input input-primary input-sm md:input-md",
+                phx_debounce: "500",
+                phx_change: :address_search,
+                phx_click: JS.show(to: "#search-results"),
+                phx_blur: JS.hide(to: "#search-results"),
+                autocomplete: "name" %>
+                <%= hidden_input f, :address_latlon, value: @address_latlon,
+                id: "address-latlon", autocomplete: "latlon",
+                phx_change: "validate"
+                 %>
               </div>
+              <Autocomplete.search_results search_results={@search_results}/>
           </li>
         </ul>
-
         <div class="form-control flex flex-row gap-x-4 md:justify-end mb-4 md:w-1/2">
-          <div class="flex-1">
+        <%= if @live_action != :welcome do %>
-            <.link patch={Routes.friends_show_path(FriendsWeb.Endpoint, :overview, @friend.slug)} class="btn btn-block btn-outline">back</.link>
+            <div class="flex-1">
-          </div>
+              <.link patch={Routes.friends_show_path(FriendsWeb.Endpoint, :overview, @friend.slug)} class="btn btn-block btn-outline">back</.link>
+            </div>
+            <% end %>
           <div class="flex-1">
             <%= if @changeset.valid? do %>
               <%= submit "Save", phx_disable_with: "Saving...", class: "btn btn-block" %>
@@ -190,9 +220,9 @@ defmodule FriendsWeb.FriendsLive.Components do
               <%= submit "Save", class: "btn btn-block btn-disabled" %>
             <% end %>
           </div>
-          <%= if @live_action != :new do %>
+          <%= if @live_action != :welcome and @current_user.profile.id == @friend.id do %>
             <div class="flex-1">
-              <button phx-click="delete" phx-value-friend_id={@friend.id} class="btn btn-block btn-error">Delete</button>
+              <.link href={Routes.user_settings_path(FriendsWeb.Endpoint, :edit)} class="btn btn-block btn-error">Delete</.link>
             </div>
           <% end %>
         </div>

friends/lib/friends_web/live/components/map.ex

@@ -0,0 +1,9 @@
+defmodule FriendsWeb.Components.Map do
+  use FriendsWeb, :live_component
+
+  def show(assigns) do
+    ~H"""
+    <div id="map" phx-hook={"showMapbox"} latlon={@address_latlon}></div>
+    """
+  end
+end

friends/lib/friends_web/live/edit.ex

@@ -7,13 +7,27 @@ defmodule FriendsWeb.FriendsLive.Edit do
 
   alias Friends.{Friend, Places}
 
+  # No slug means it's a new profile form
+  def mount(%{}, token, socket) do
+    friend = Friend.new()
+    live_action = socket.assigns.live_action || :overview
+
+    {:ok,
+     socket
+     |> assign(:live_action, live_action)
+     |> assign_current_user(token |> Map.get("user_token"))
+     |> assign(:friend, friend)
+     |> assign(:address_latlon, nil)
+     |> assign(:search_results, nil)
+     |> title("Welcome")
+     |> assign(:changeset, %Friend{} |> Friend.changeset())}
+  end
+
+  # Has a slug means it's an edit profile form
   def mount(%{"slug" => slug} = _attrs, token, socket) do
-    live_action = socket.assigns.live_action || false
+    live_action = socket.assigns.live_action || :overview
 
     friend = Friend.get_by_slug(slug)
-    editable = friend |> Friend.can_be_edited_by(socket.assigns[:current_user])
-
-    # address_viewbox = Places.Search.query()
 
     if(live_action) do
       {:ok,
@@ -21,38 +35,57 @@ defmodule FriendsWeb.FriendsLive.Edit do
        |> assign(:live_action, live_action)
        |> assign_current_user(token |> Map.get("user_token"))
        |> assign(:friend, friend)
+       |> assign(:action, Routes.friends_path(socket, :update))
        |> title(friend.name <> " - " <> (live_action |> titlecase))
        |> assign(:changeset, %Friend{} |> Friend.changeset())
-       |> assign(:action, editable)
        |> assign(:address_query, nil)
-       |> assign(:peer_data, get_connect_info(socket, :peer_data))}
+       |> assign(:search_results, nil)}
     else
       {:ok, socket |> redirect(to: Routes.friends_show_path(socket, :overview, friend.slug))}
     end
   end
 
-  def handle_params(%{"slug" => slug} = attrs, _url, socket) do
+  def handle_params(%{"slug" => slug} = _attrs, _url, socket) do
     live_action = socket.assigns.live_action || false
 
     friend = Friend.get_by_slug(slug)
     editable = friend |> Friend.can_be_edited_by(socket.assigns[:current_user])
 
+    {address_latlon, address_query} = friend |> Friend.get_address()
+
     {:noreply,
      socket
      |> assign_friend(friend)
+     |> assign(:action, Routes.friends_path(socket, :update))
      |> assign(:live_action, live_action)
+     |> assign(:address_query, address_query)
+     |> assign(:address_latlon, address_latlon |> Poison.encode!())
+     |> assign(:search_results, nil)
      |> title(friend.name <> " - " <> (live_action |> titlecase))
      |> assign(:editable, editable)}
   end
 
+  def handle_params(_attrs, _token, socket) do
+    friend = Friend.new()
+
+    {:noreply,
+     socket
+     |> assign_friend(friend)
+     |> assign(:live_action, socket.assigns.live_action)
+     |> assign(:address_query, nil)
+     |> assign(:action, Routes.friends_path(socket, :update))
+     |> title("Welcome")}
+  end
+
   def handle_event("validate", %{"friend" => form_params}, %{assigns: %{friend: friend}} = socket) do
-    id = form_params["id"]
+    id = form_params["id"] |> parse_id
     name = form_params["name"]
     nickname = form_params["nickname"]
     born = form_params["born"]
     email = form_params["email"]
     phone = form_params["phone"] |> format_phone
     address_query = form_params["address_query"]
+    address_latlon = form_params["address_latlon"]
 
     new_params = %{
       id: id,
@@ -75,6 +108,7 @@ defmodule FriendsWeb.FriendsLive.Edit do
       |> assign(:changeset, changeset)
       |> assign_friend(friend |> struct(new_params), changeset)
       |> assign(:address_query, address_query)
+      |> assign(:address_latlon, address_latlon)
     }
   end
 
@@ -82,23 +116,36 @@ defmodule FriendsWeb.FriendsLive.Edit do
   def handle_event(
         "save",
         %{"friend" => form_params},
-        %{assigns: %{changeset: changeset}} = socket
+        %{assigns: %{changeset: _changeset}} = socket
       ) do
     name = form_params["name"]
     nickname = form_params["nickname"]
     born = form_params["born"]
     email = form_params["email"]
     phone = form_params["phone"] |> format_phone
-    id = form_params["id"]
+    slug = form_params["slug"] || name |> to_slug
+    id = form_params["id"] || :new
+    address_latlon = form_params["address_latlon"] |> Poison.decode!()
+    address_query = form_params["address_query"]
+
+    address = %Friends.Places.Place{
+      name: address_query,
+      latlon: address_latlon
+    }
+
+    new_address =
+      address
+      |> Friends.Places.Place.get_or_create()
 
     new_params = %{
       id: id,
       name: name,
       nickname: nickname,
-      slug: name |> to_slug,
+      slug: slug,
       born: born,
       phone: phone,
-      email: email
+      email: email,
+      address_id: new_address.id
     }
 
     updated_friend = Friend.create_or_update(new_params)
@@ -110,17 +157,21 @@ defmodule FriendsWeb.FriendsLive.Edit do
       |> put_flash(:info, "Saved #{updated_friend |> first_name}!")
       |> assign(:new_friend, new_changeset)
       |> assign(:friend, updated_friend)
-      |> push_patch(to: "/friend/#{updated_friend.slug}")
+      |> push_navigate(to: "/friend/#{updated_friend.slug}")
     }
   end
 
-  # Handle deleting a friend
+  def handle_event("address_search", %{"friend" => %{"address_query" => query}}, socket) do
-  def handle_event("delete", %{"friend_id" => friend_id}, socket) do
+    results = Places.Search.autocomplete(query) |> Enum.map(&Places.Search.parse_features/1)
-    friend = Friend.get_by_id(friend_id)
 
-    {:noreply,
+    if query == "" do
-     socket
+      {:noreply, socket |> assign(:search_results, nil)}
-     |> put_flash(:error, "Deleted '#{friend.name}'.")
+    else
-     |> push_navigate(to: "/")}
+      {:noreply, socket |> assign(:search_results, results)}
+    end
+  end
+
+  def handle_event(event, unsigned_params, socket) do
+    {:noreply, socket}
   end
 end

friends/lib/friends_web/live/show.ex

@@ -10,12 +10,16 @@ defmodule FriendsWeb.FriendsLive.Show do
     friend = Friend.get_by_slug(slug)
     editable = friend |> Friend.can_be_edited_by(socket.assigns[:current_user])
 
+    {latlon, address} = friend |> Friend.get_address()
+
     if(live_action) do
       {:ok,
        socket
        |> assign(:live_action, live_action)
        |> assign_current_user(token |> Map.get("user_token"))
        |> assign(:friend, friend)
+       |> assign(:address, address)
+       |> assign(:latlon, latlon |> Poison.encode!())
        |> title(friend.name <> " - " <> (live_action |> titlecase))
        |> assign(:changeset, %Friend{} |> Friend.changeset())
        |> assign(:action, editable)}

friends/lib/friends_web/router.ex

@@ -73,6 +73,8 @@ defmodule FriendsWeb.Router do
     post "/confirm", UserConfirmationController, :create
     get "/confirm/:token", UserConfirmationController, :edit
     post "/confirm/:token", UserConfirmationController, :update
+
+    live "/welcome", FriendsLive.Edit, :welcome
   end
 
   # Routes that require the user be authenticated:
@@ -104,13 +106,14 @@ defmodule FriendsWeb.Router do
   end
 
   # Edit modes (require being logged in and having a profile)
-  scope "/friend/update/", FriendsWeb do
+  scope "/edit/", FriendsWeb do
     pipe_through [:browser, :require_authenticated_user, :capture_profile]
 
+    post "/", FriendsController, :update
+
+    live "/:slug", FriendsLive.Edit
     live "/:slug/overview", FriendsLive.Edit, :overview
     live "/:slug/timeline", FriendsLive.Edit, :timeline
     live "/:slug/relationships", FriendsLive.Edit, :relationships
-
-    post "/:slug/update", FriendsController, :update
   end
 end

friends/lib/friends_web/templates/layout/_user_menu.html.heex

@@ -1,12 +1,16 @@
-<ul class="p-2 shadow menu menu-compact dropdown-content bg-base-100 text-neutral rounded-box w-52 flex flex-col gap-4">
 <%= if @current_user do %>
-  <li class="p-2 pb-4 border-b-2"><%= @current_user.email %></li>
+    <label tabindex="0" class="btn btn-ghost btn-circle avatar">
-  <li><%= link "Settings", to: Routes.user_settings_path(@conn, :edit) %></li>
+      <div class="w-10 rounded-full">
-  <li><%= link "Log out", to: Routes.user_session_path(@conn, :delete), method: :delete %></li>
+        <img src="https://placeimg.com/80/80/people" />
+      </div>
+    </label>
+    <ul class="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 text-neutral rounded-box w-52">
+    <li><%= @current_user.email %></li>
+    <li><%= link "Settings", to: Routes.user_settings_path(@conn, :edit) %></li>
+    <li><%= link "Log out", to: Routes.user_session_path(@conn, :delete), method: :delete %></li>
+  </ul>
 <% else %>
   <%= link "Log in", to: Routes.user_session_path(@conn, :new), class: "btn" %>
   <%= link "Register", to: Routes.user_registration_path(@conn, :new), class: "btn btn-primary" %>
-  <%= link "Log in", to: Routes.user_session_path(@conn, :new), class: "btn" %>
-  <%= link "Register", to: Routes.user_registration_path(@conn, :new), class: "btn btn-primary" %>
 <% end %>
 

friends/lib/friends_web/views/error_helpers.ex

@@ -10,10 +10,8 @@ defmodule FriendsWeb.ErrorHelpers do
   """
   def error_tag(form, field) do
     Enum.map(Keyword.get_values(form.errors, field), fn error ->
-      content_tag(:span, translate_error(error),
+      field = field |> Atom.to_string() |> String.capitalize()
-        class: "invalid-feedback",
+      content_tag(:span, "#{translate_error(error)}", class: "block mt-1 text-sm text-red-700")
-        phx_feedback_for: input_name(form, field)
-      )
     end)
   end
 

friends/lib/friends_web/views/live_helpers.ex

@@ -6,6 +6,33 @@ defmodule FriendsWeb.LiveHelpers do
     atom |> to_string |> :string.titlecase()
   end
 
+  def parse_id("new"), do: "new"
+  def parse_id(int), do: int |> String.to_integer()
+
+  def display_phone(phone, changeset) do
+    if changeset.errors[:phone] do
+      phone
+    else
+      display_phone(phone)
+    end
+  end
+  def display_phone(phone) do
+    """
+    TODO: Actually implement this
+    """
+
+    has_plus = phone |> String.starts_with?("+")
+    case phone |> String.length do
+      10 ->
+        country = "+1 "
+        [area, first, sec1, sec2] = phone |> to_charlist |> Enum.chunk_every(3) |> Enum.map(&(&1 |> to_string))
+        "#{country}(#{area}) #{first}-#{sec1}#{sec2}"
+        IO.inspect "#{country}(#{area}) #{first}-#{sec1}#{sec2}"
+      11 when has_plus ->
+        phone
+    end
+  end
+
   def assign_current_user(socket, user_token) do
     user =
       case user_token do

friends/test/friends_web/controllers/friends_live_test.exs

@@ -9,9 +9,14 @@ defmodule FriendsWeb.FriendsLiveTest do
     } = friend_fixture(%{email: user_fixture().email}) |> Friends.Friend.assign_user()
   end
 
-  describe "GET '/friends/:slug'" do
+  describe "GET '/friend/:slug'" do
+    test "redirects if live_action not specified", %{conn: conn, friend: friend} do
+      conn = conn |> get("/friend/#{friend.slug}/")
+      assert redirected_to(conn) == Routes.friends_show_path(conn, :overview, friend.slug)
+    end
+
     test "shows the friend overview", %{conn: conn, friend: friend} do
-      conn = conn |> get("/friends/#{friend.slug}")
+      conn = conn |> get("/friend/#{friend.slug}/overview")
       assert html_response(conn, 200) =~ friend.name
     end
   end