ui improvements and integrating filters with backend

cmd/root.go

@@ -16,7 +16,9 @@ import (
 	"github.com/marcopollivier/techagenda/pkg/lending"
 	"github.com/marcopollivier/techagenda/pkg/oauth"
 	"github.com/marcopollivier/techagenda/pkg/static"
+	"github.com/marcopollivier/techagenda/pkg/tag"
 	"github.com/marcopollivier/techagenda/pkg/user"
+	"github.com/marcopollivier/techagenda/pkg/venue"
 )
 
 var rootCmd = &cobra.Command{
@@ -32,6 +34,8 @@ var rootCmd = &cobra.Command{
 			ssr.Module(),
 			user.Module(),
 			event.Module(),
+			tag.Module(),
+			venue.Module(),
 
 			lending.Module(),
 			static.Module(),

lib/ssr/props.go

@@ -6,7 +6,10 @@ import (
 )
 
 type Props struct {
-	User   *user.User
-	Event  *event.Event
-	Events []event.Event
+	MainTag string
+	User    *user.User
+	Event   *event.Event
+	Events  []event.Event
+	Tags    []string
+	Cities  []string
 }

pkg/event/model.go

@@ -6,6 +6,7 @@ import (
 	"github.com/lib/pq"
 	"github.com/marcopollivier/techagenda/pkg/attendee"
 	"github.com/marcopollivier/techagenda/pkg/cfp"
+	"github.com/marcopollivier/techagenda/pkg/tag"
 	"github.com/marcopollivier/techagenda/pkg/user"
 	"github.com/marcopollivier/techagenda/pkg/venue"
 	"gorm.io/gorm"
@@ -25,17 +26,12 @@ type Event struct {
 	UserID      uint           `json:"user_id"`
 
 	Attendees []attendee.Attendee `json:"attendees"`
-	Tags      []Tags              `json:"tags" gorm:"many2many:events_tags"`
+	Tags      []tag.Tag           `json:"tags" gorm:"many2many:events_tags"`
 	Venues    []venue.Venue       `json:"venues" gorm:"many2many:events_venues"`
 	Cfp       cfp.Cfp             `json:"cfp"`
 	User      user.User           `json:"user"`
 }
 
-type Tags struct {
-	gorm.Model
-	Tag string `json:"tag"`
-}
-
 // ENUM(online, in_person)
 type EventTypeOf int
 

pkg/lending/handler.go

@@ -10,6 +10,8 @@ import (
 	"github.com/marcopollivier/techagenda/lib/ssr"
 	"github.com/marcopollivier/techagenda/pkg/event"
 	"github.com/marcopollivier/techagenda/pkg/oauth"
+	"github.com/marcopollivier/techagenda/pkg/tag"
+	"github.com/marcopollivier/techagenda/pkg/venue"
 )
 
 type QueryParams struct {
@@ -22,18 +24,26 @@ type QueryParams struct {
 	Limit     int                 `query:"limit"`
 }
 
-func NewLendingHandler(server *echo.Echo, eventService event.Service, engine *ssr.Engine) {
+func NewLendingHandler(server *echo.Echo, eventService event.Service, tagService tag.Service, venueService venue.Service, engine *ssr.Engine) {
 	server.Static("/assets", "./ui/public/")
+	server.Static("/favicon.ico", "./ui/public/favicon.ico")
 
 	server.GET("/v2", func(c echo.Context) (err error) {
 		var (
-			ctx = c.Request().Context()
-			qp  QueryParams
+			ctx     = c.Request().Context()
+			qp      QueryParams
+			mainTag = ""
 		)
 		if err = c.Bind(&qp); err != nil {
 			slog.ErrorContext(ctx, "Error parsing query params", "error", err.Error())
 		}
 
+		if len(qp.Tags) > 0 {
+			mainTag = qp.Tags[0]
+		}
+
+		tags, _ := tagService.GetAllTags(ctx)
+		cities, _ := venueService.GetAllCities(ctx)
 		events, _ := eventService.Get(ctx, qp.Name, qp.City, qp.Tags, qp.TypeOf, qp.Available, qp.Page, qp.Limit)
 
 		page := engine.RenderRoute(gossr.RenderConfig{
@@ -44,8 +54,11 @@ func NewLendingHandler(server *echo.Echo, eventService event.Service, engine *ss
 				"description": "A Tech Agenda é um projeto OpenSource que foi criado pensando em ajudar as pessoas a encontrarem eventos de tecnologia perto delas.",
 			},
 			Props: &ssr.Props{
-				Events: events,
-				User:   oauth.GetUserFromCtx(ctx),
+				MainTag: mainTag,
+				Events:  events,
+				User:    oauth.GetUserFromCtx(ctx),
+				Tags:    tags,
+				Cities:  cities,
 			},
 		})
 		return c.HTML(http.StatusOK, string(page))

pkg/tag/fx.go

@@ -0,0 +1,9 @@
+package tag
+
+import "go.uber.org/fx"
+
+func Module() fx.Option {
+	return fx.Module("tags",
+		fx.Provide(NewTagsService),
+	)
+}

pkg/tag/model.go

@@ -0,0 +1,8 @@
+package tag
+
+import "gorm.io/gorm"
+
+type Tag struct {
+	gorm.Model
+	Tag string `json:"tag"`
+}

pkg/tag/service.go

@@ -0,0 +1,29 @@
+package tag
+
+import (
+	"context"
+	"log/slog"
+
+	"gorm.io/gorm"
+)
+
+type Service interface {
+	GetAllTags(ctx context.Context) (t []string, err error)
+}
+
+type TagsService struct {
+	db *gorm.DB
+}
+
+func NewTagsService(db *gorm.DB) Service {
+	return &TagsService{
+		db: db,
+	}
+}
+
+func (s *TagsService) GetAllTags(ctx context.Context) (t []string, err error) {
+	if err = s.db.WithContext(ctx).Table("tags").Select("tag").Scan(&t).Error; err != nil {
+		slog.ErrorContext(ctx, "Fail to get tags from the database", "error", err.Error())
+	}
+	return
+}

pkg/venue/fx.go

@@ -0,0 +1,9 @@
+package venue
+
+import "go.uber.org/fx"
+
+func Module() fx.Option {
+	return fx.Module("venue",
+		fx.Provide(NewVenueService),
+	)
+}

pkg/venue/service.go

@@ -1 +1,29 @@
 package venue
+
+import (
+	"context"
+	"log/slog"
+
+	"gorm.io/gorm"
+)
+
+type Service interface {
+	GetAllCities(ctx context.Context) (t []string, err error)
+}
+
+type VenueService struct {
+	db *gorm.DB
+}
+
+func NewVenueService(db *gorm.DB) Service {
+	return &VenueService{
+		db: db,
+	}
+}
+
+func (s *VenueService) GetAllCities(ctx context.Context) (t []string, err error) {
+	if err = s.db.WithContext(ctx).Table("venues").Select("distinct city").Scan(&t).Error; err != nil {
+		slog.ErrorContext(ctx, "Fail to get tags from the database", "error", err.Error())
+	}
+	return
+}

ui/package.json

@@ -5,10 +5,7 @@
   "dependencies": {
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^2.1.1",
-    "flowbite": "^2.2.1",
-    "flowbite-react": "^0.7.2",
     "moment": "^2.30.1",
-    "preline": "^2.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-world-flags": "^1.6.0",

ui/src/components/AdBanner.tsx

@@ -4,7 +4,7 @@ import TechBro from '../../public/tech_bro.png'
 export default function AdBanner() {
     return (
         <div className="relative bg-white">
-            <div className="relative isolate overflow-hidden bg-blue-500 shadow-2xl sm:rounded-3xl lg:flex h-auto">
+            <div className="relative isolate overflow-hidden bg-blue-500 shadow-2xl rounded-3xl lg:flex h-1/6">
                 <div className="ml-6 max-w-md text-center lg:flex-auto lg:py-32 lg:text-left">
                     <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
                         Crie, promova e busque por eventos de Tecnologia facilmente.

ui/src/components/EventList.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Event } from '../props/lending.generated';
+import { Event } from '../props/generated';
 import EventCard from '../organisms/EventCard';
 
 interface EventListProps {

ui/src/components/Footer.tsx

@@ -26,7 +26,7 @@ export default function Footer() {
                                 window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
                             }}
                             type="button"
-                            className="inline-flex items-center rounded-full text-center px-6 py-2 text-sm font-medium shadow-sm bg-blue-500 text-white hover:bg-gray-100 hover:text-blue-500 shadow-lg ring-1 ring-black ring-opacity-5"
+                            className="inline-flex items-center rounded-full border border-transparent bg-blue-500 px-8 py-3 text-center font-medium text-white hover:opacity-90"
                         >
                             <ChevronUpIcon className="-ml-0.5 mr-1.5 h-5 w-5" aria-hidden="true" />
                             Voltar ao topo

ui/src/components/Header.tsx

@@ -1,26 +1,28 @@
 import { Disclosure } from '@headlessui/react';
 import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
 import TechAgendaLogo from '../../public/logo.svg';
-import { AdjustmentsHorizontalIcon } from '@heroicons/react/20/solid';
 import LoginButton from '../organisms/LoginButton';
 import { User } from "../props/generated";
 import classNames from '../helper/classNames';
+import FilterButton from '../organisms/FilterButton';
 
 const navigation = [
-    { name: 'Todos os eventos', href: '#', slug: "main" },
-    { name: 'Design', href: '#', slug: "design" },
-    { name: 'Product', href: '#', slug: "product" },
-    { name: 'DevOps', href: '#', slug: "devops" },
-    { name: 'Software', href: '#', slug: "software" },
-    { name: 'Management', href: '#', slug: "management" },
+    { name: 'Todos os eventos', tag: "" },
+    { name: 'Design', tag: "design" },
+    { name: 'Product', tag: "product" },
+    { name: 'DevOps', tag: "devops" },
+    { name: 'Software', tag: "software" },
+    { name: 'Management', tag: "management" },
 ]
 
 interface HeaderProps {
     user: User
     currentPage: string
+    tags: string[]
+    cities: string[]
 }
 
-export default function Header({ user, currentPage }: HeaderProps) {
+export default function Header({ user, currentPage, tags, cities }: HeaderProps) {
     return (
         <Disclosure as="nav" className="pt-8 pb-6">
             {({ open }) => (
@@ -55,12 +57,12 @@ export default function Header({ user, currentPage }: HeaderProps) {
                                             {navigation.map((item) => (
                                                 <a
                                                     key={item.name}
-                                                    href={item.href}
+                                                    href={item.tag === "" ? "/v2" : `/v2?tags=${item.tag}`}
                                                     className={classNames(
-                                                        item.slug === currentPage ? 'bg-white text-black shadow-md' : 'text-gray-400 hover:bg-gray-200 hover:text-black',
+                                                        item.tag === currentPage ? 'bg-white text-black shadow-md' : 'text-gray-400 hover:bg-gray-200 hover:text-black',
                                                         'rounded-full px-3 py-1 text-sm font-medium'
                                                     )}
-                                                    aria-current={item.slug === currentPage ? 'page' : undefined}
+                                                    aria-current={item.tag === currentPage ? 'page' : undefined}
                                                 >
                                                     {item.name}
                                                 </a>
@@ -71,15 +73,7 @@ export default function Header({ user, currentPage }: HeaderProps) {
 
                             </div>
                             {/* Filters menu item */}
-                            <div className="relative flex items-center justify-between">
-                                <button
-                                    type="button"
-                                    className="inline-flex items-center rounded-full bg-gray-100 px-3 py-2 text-sm font-medium text-black shadow-sm hover:bg-blue-500 hover:text-white shadow-lg ring-1 ring-black ring-opacity-5"
-                                >
-                                    <AdjustmentsHorizontalIcon className="-ml-0.5 mr-1.5 h-5 w-5" aria-hidden="true" />
-                                    Filtros
-                                </button>
-                            </div>
+                            <FilterButton tags={tags} cities={cities} />
                         </div>
                     </div>
                 </>

ui/src/components/MapBanner.tsx

@@ -9,7 +9,7 @@ export default function MapBanner() {
                 </div>
                 <div className="mt-6">
                     <a href="#"
-                        className="inline-block rounded-full border border-transparent bg-blue-500 px-8 py-3 text-center font-medium text-white hover:bg-blue-700"
+                        className="inline-block rounded-full border border-transparent bg-blue-500 px-8 py-3 text-center font-medium text-white hover:opacity-90"
                     >
                         Mostrar mais
                     </a>