groxio-learning/grapevine

Education for Elixir

Grapevine

setup

Create a file dev.secret.exs and test.secret.exs into config folder. The dummy file:

use Mix.Config

config :grapevine, Grapevine.Repo,
  username: "postgres",
  password: "postgres",
  database: "grapevine_dev",
  hostname: "localhost",
  show_sensitive_data_on_connection_error: true,
  pool_size: 10

And update the values for username, password, hostname.

Setup the project with mix setup.

Start Phoenix endpoint with mix phx.server.

Now you can visit localhost:4000 from your browser.

Dummy Data

Add instructions into priv/repo/seeds.exs to delete dummy users and posts and create all dummy users and posts, when its run mix run priv/repo/seeds.exs or mix setup.

e-mail	password
[email protected]	passwordpass
[email protected]	passwordpass

grapevine's Issues

Users can like/favorite/upvote a resource

User Story

As a user
When I visit the /posts page and view the list of posts
Then I should be able to "like" or "upvote" or "favorite" a post
And that post should increment its displayed "like count"

Implementation Details

• We will need some way to store the information regarding which users have liked which posts. Some kind of dedicated "likes" or "favorites" or "upvotes" table that contains a post ID and a user ID.
• We will need to implement a button that sends a phoenix live view event to allow a user to like/unlike a post. Can we make this button its own LiveView component?

Thursday, 7/8 To Do List

👋 Hello all! Since I'm out of the office this week and I can't join our usual Thursday session, I wrote up this issue to describe the list of To Dos that we need to tackle next. You guys can tackle this list however you decide is best 😄

This Week

• Rename Resource module and database table to Post, see convo here for reference.
  • NOTE: Since we want to rename the table and schema module and since we want to build some LiveView code to act as the front-end for managing posts, as described here #7, I'd suggest using the Phoenix Live generator to generate a new table and schema and the associated routes and live views. Running this generator https://hexdocs.pm/phoenix/Mix.Tasks.Phx.Gen.Live.html will generate all the code you need to serve as the foundation for our LiveView CRUD app, including code that uses Live actions for routing. Then, we can simply delete the old migrations and schema files describing the old Resource module and table.
• Finish the To Do's from last week, outlined here, in particular this item:
  • Define a context module that exposes these functions:
    • Function to create a post that belongs to a given user.
    • There should be a test for the context and this function.
• Then, if you guys have time, you can get started on this issue #7. I'd suggest getting started by learning more about how to use live actions for routing.
  • See the docs here https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.Router.html#live/4-actions-and-live-navigation

Next Week

Next week we will finish the deployment and CI setup. I'm still waiting on:

• Gigelixir access for myself so I can fetch the secret credentials
• Repo owner access here so I can set the secrets and add branch protections

I'll also follow up with GitHub when I'm back in the office next week about getting some more organization seats so that we can get more admin access set up.

User can create/edit post with category

User Story: User can create/edit post with category

• Seed some categories into the DB (blog, video, book, course, podcast)
• Update the new/edit post form to include a category drop down menu so that a post can specify its category.

User story: User can view posts with category

• Display a new column in the posts table that shows the category.

User story: User can filter posts by category

• User can filter the posts table by category.
• Posts index view has a filter field. Users can select a category and the table updates to include only posts belonging to that category.

User can create a new category

Do we want this feature? Maybe an admin can create a new category in the future?

---

Next up: user can add/edit a post's tags (this means a user will need to be able to create tags).
example tags: testing, apis, pubsub, liveview, pattern matching

Update README with info on deployments and testing CI

We should update the README for future collaborators so that they know:

• The app is deployed to Gigalixir when a PR is merged to main
• Tests run on every PR and you can only merge if they pass

Generate a new Phoenix app

Deliverable

There is an elixir-eductor Phoenix app that is committed to this repository.

Implementation

Use the mix phx.new --live command to generate a new Phoenix app that uses LiveView. Make sure you can successfully run:

• mix deps.get
• cd assets && npm install
• cd .. && mix phx.server and see the "welcome to phoenix" page in your browser at localhost:4000

10/14 Plan

• Continue with any debugging of the post list sorting described here #34 (comment)
• Ensure that when a post is added to the list in real-time, via pub sub, that any sorting is respected.
• Discuss next steps! Pick a feature that you guys want to build out next and write up a new issue with the following format:

## User Story
A brief description of how the feature should behave from the point of view of the user

## Implementation Notes
Any notes/ideas on how we will build the feature

Users can sort posts index list

User Story

As a user
When I visit the /posts page
I see a list of posts sorted by their "posted" or "created" date, and this data is displayed for each post
I can sort the posts either by created date or by number of likes

Implementation Details

• Update the /posts index template to display the post.created_at date for each post
• Ensure that the list of posts that are displayed on the page are sorted by created_at when the page loads. I'd suggest updating the core function that returns a list of post to return the list sorted by date using Ecto.
• Then, you'll want to add buttons/links to the page that allow the use to change between sorting posts by date and by number of likes. Review this blog post for some ideas on how to get started https://elixirschool.com/blog/sorting-a-table-with-live-view-live-links/. This post might be a little outdated since I wrote it in 2019 (can you even remember back that far?? I cannot!) but it should give you a good idea of where to get started and where to go in the LiveView docs. The post talks about using live_link/2 but you'll want to use live_patch instead, see docs here.
  • Use live_patch to create a link to the current live view with some query params like /posts?sort=likes and /posts?sort=date
  • Implement a handle_params function that knows how to handle each query parameter scenario. If sort is set to date, then update the live view's socket to have posts: set to the list of posts sorted by date. If the sort param is set to likes, then set the lists of :posts in socket assigns to a list sorted by number of likes.

Elixir Educator Can Be Deployed

Problem Statement

We want to deploy early and often to ensure that we always deploy new code and validate it in the production environment so that we can make it easy to debug new production issues/bugs.

Deliverable

The Elixir Educator app that simply runs the phoenix server and shows the "welcome to phoenix" page can be deployed to Gigelixir.

Stretch Goal

Explore some CI/CD options for automatic deploys when a PR is merged to the master branch.

Posts Index List Updates in Real-Time

User Story

As user
When I view the /posts page
And another user elsewhere in the world adds a new post
Then my view of the /posts page updated in real-time to show me the new post without my having to refresh the page

Implementation Notes

We're gonna use PubSub!

• First, we need to start the PubSub server as part of our app's supervision tree (see docs)
• When a new post is created, we should publish a message over a PubSub topic
• The post index live view should subscribe to that topic when the live view mounts.
• It should implement a handle_info function to respond to the "new post" message
• It should respond by updating the list of posts in socket assigns

Docs on working with Phoenix PubSub here https://hexdocs.pm/phoenix_pubsub/Phoenix.PubSub.html

Users Can Manage Resources

User Story

As a user
When I visit /resources (or whatever we decide to call this route)
Then I can create a new resource,
View all resources,
View a single resource with all of its details,
Edit an existing resource, or
Delete a resource

Implementation Details

This page should be supported by a live view that uses LiveView live_actions to control what the user sees and how they can interact with the page.

Let's start by delivering:

• User can visit /resources and see a list of all of the resources.

This should mount a live view with the live_action set to :index and display a list of all resources. For more info on routing with live_actions, see the docs here https://hexdocs.pm/phoenix_live_view/Phoenix.LiveView.Router.html#live/4-actions-and-live-navigation.

MVP Domain Model + Application Core

Problem Statement

From the gist we wrote up last week here https://gist.github.com/SophieDeBenedetto/4127f6fc7112d3277b04f3493e4b7ee0, we decided our MVP (Minimum Viable Product) should look something like this:

Elixir Education Resource Portal

• Users should be able to log in
• Users should be able to submit a resource
• Users should be able to browse resources
• Users should be able to search resources

The first step towards building this functionality is implementing the core modules and schemas that will represent users and resources, and map to a users database table and resources database table.

Deliverable

• There is a users database table with some of the attributes we specified here https://gist.github.com/SophieDeBenedetto/4127f6fc7112d3277b04f3493e4b7ee0#gistcomment-3784430
• There is a User schema implemented in our application core that maps to this database table.
• There is a resources database table with some of the attributes we specified here https://gist.github.com/SophieDeBenedetto/4127f6fc7112d3277b04f3493e4b7ee0#gistcomment-3784430
• There is a Resource schema implemented in our application core that maps to this database table
• There is a relationship between the user that posts a resource and the resource: A user has many resources and a resource belongs to a user. This represents the user that posted the resource. Later we may implement some functionality for users to save or favorite resources, but not yet. So, we will need to implement this "has_many/belongs_to" relationship between these two entities.
• There are some passing tests for the User and Resource modules that verifies the behavior of the modules.

Implementation Details

• Use the mix phx.gen.schema tool to generate the Resource and table.
• Use the Phoenix auth generator to generate an Accounts context, a User schema and the users table.

Validade URL on Post module

Hi all,

I think we must validate the format for the URL field on Post. And I share here on this issue a good start where we can use for our full implementation.

valid? = fn url ->
  uri = URI.parse(url)
  uri.scheme != nil && uri.host =~ ~r/(www\.)?[[:alnum:]]\.[[:alnum:]]/i && uri.host =~ ~r/\A[^\.]/i
end

urls = [
  "http://vk.com",
  "http://semantic-ui.com/collections/menu.html",
  "https://translate.yandex.ru/?text=poll&lang=en-ru",
  "www.vk.com",
  ".vk.com",
  "abdeeej",
  "http://vk",
  "http://.vk.com"
]

urls |> Enum.map(valid?) |> IO.inspect

[true, true, true, false, false, false, false, false]

Link to implement a custom validate with Ecto.Changeset.validate_change/3, to use it this previous code to implement our validade_urls function inside the Grapevine.Post module.