Remove server-side face rendering and importing.
This commit is contained in:
parent
f3bee7434d
commit
99f0f214e1
4 changed files with 10 additions and 75 deletions
31
README.md
31
README.md
|
@ -1,26 +1,7 @@
|
|||
# Getting started with Absinthe
|
||||
# Client-side GraphQL
|
||||
|
||||
[Absinthe](https://absinthe-graphql.org/) is an open source implementation of
|
||||
the GraphQL server specification for Elixir. Note that I said "Elixir" there
|
||||
and now "Phoenix". Absinthe doesn't need Phoenix, but we're going to use it in
|
||||
this example because my guess is that not many people are making purely GraphQL
|
||||
services and most of us are probably bolting it on to existing sites or
|
||||
services.
|
||||
|
||||
Absinthe has [truly amazing docs](https://hexdocs.pm/absinthe/overview.html).
|
||||
Seriously. They're so great. You should check them out.
|
||||
|
||||
In this branch we've added Absinthe to our project, and configured a type and a
|
||||
schema for our list of people, and a migration which can import new people.
|
||||
|
||||
Look at:
|
||||
|
||||
* `mix.exs`
|
||||
* `lib/faces_web/router.ex`
|
||||
* `lib/faces_web/schema/schema.ex`
|
||||
* `lib/faces_web/schema/person.ex`
|
||||
* `lib/faces_web/resolvers/people.ex`
|
||||
|
||||
[Demo](http://localhost:4000/graphiql)
|
||||
|
||||
Next, move on to `step-4` to see how to use this from the client-side.
|
||||
So, a GraphQL API isn't much use without the ability to use it from the browser,
|
||||
so here's where we implement the faces gallery as a client-side app. Whilst
|
||||
it's possible to do progressive enhancement I've removed all functionality from
|
||||
the faces controller to prove that all the data loading and changing is
|
||||
happening via GraphQL.
|
||||
|
|
|
@ -3,18 +3,6 @@ defmodule FacesWeb.FaceController do
|
|||
alias Faces.Gallery
|
||||
|
||||
def index(conn, _params) do
|
||||
render(conn, "index.html", people: Gallery.list_people())
|
||||
end
|
||||
|
||||
def create(conn, %{"username" => username}) do
|
||||
case Gallery.import_user(username) do
|
||||
{:ok, _user} ->
|
||||
render(conn, "index.html", people: Gallery.list_people())
|
||||
|
||||
{:error, reason} ->
|
||||
conn
|
||||
|> put_flash(:error, reason)
|
||||
|> render("index.html", people: Gallery.list_people())
|
||||
end
|
||||
render(conn, "index.html")
|
||||
end
|
||||
end
|
||||
|
|
|
@ -16,8 +16,7 @@ defmodule FacesWeb.Router do
|
|||
scope "/", FacesWeb do
|
||||
# Use the default browser stack
|
||||
pipe_through(:browser)
|
||||
|
||||
resources("/", FaceController, only: [:index, :create])
|
||||
get("/", FaceController, :index)
|
||||
end
|
||||
|
||||
# Other scopes may use custom stacks.
|
||||
|
|
|
@ -1,41 +1,8 @@
|
|||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<h1>Face Gallery</h1>
|
||||
|
||||
<%= if get_flash(@conn, :error) do %>
|
||||
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
|
||||
<% end %>
|
||||
<div id="face-alerts"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row" id="face-gallery">
|
||||
<%= for person <- @people do %>
|
||||
<div class="col-sm-3 mb-3">
|
||||
<div class="card">
|
||||
<img class="card-img-top" src="<%= person.avatar_url %>" alt="<%= person.name %>">
|
||||
<div class="card-body">
|
||||
<a href="https://github.com/<%= person.username %>"><h5 class="card-title"><%= person.name %></h5></a>
|
||||
<p class="card-text"><%= person.location %></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="col-sm-3 mb-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title">Add Face</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<%= form_for @conn, face_path(@conn, :create), fn f -> %>
|
||||
<div class="form-group">
|
||||
<label for="username">Github Username</label>
|
||||
<%= text_input f, :username, class: "form-control" %>
|
||||
</div>
|
||||
|
||||
<%= submit "Add", class: "btn btn-primary" %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="face-gallery"></div>
|
||||
|
|
Reference in a new issue