Create PicturesPage

frontend/src/App/View/Page/PicturesPage.purs

@@ -3,15 +3,17 @@ module App.View.Page.PicturesPage where
 import AppPrelude
 
 import App.Context (Context)
+import App.Data.Picture (Picture(..))
 import App.Data.Route as Route
 import App.Env (Env)
+import App.View.Agent.PicturesAgent (PicturesAgent, usePicturesAgent)
 import App.View.Organism.HeaderMenu as HeaderMenu
 import App.View.Skeleton.Wide as Wide
 import App.View.Utils (navigate)
-import React.Basic (element)
+import React.Basic (JSX, element)
 import React.Basic.DOM as R
-import React.Basic.Events (handler_)
-import React.Basic.Hooks (ReactComponent, component, useReducer)
+import React.Basic.DOM.Events (capture_)
+import React.Basic.Hooks (ReactComponent, component, useEffect, useReducer)
 import React.Basic.Hooks as React
 
 
@@ -25,6 +27,11 @@ type State =
 
 data Action = Unit
 
+type ChildProps =
+  { context :: Context
+  , pictures :: PicturesAgent
+  }
+
 make :: Env -> Effect (ReactComponent Props)
 make env = do
   header <- HeaderMenu.make env
@@ -35,20 +42,25 @@ make env = do
           }
 
     state /\ dispatch <- useReducer initialState handleAction
+    pictures <- usePicturesAgent env context
+
+    useEffect unit do
+      pictures.load
+      pure $ pure unit
 
     pure
       $ Wide.render
       { header: element header { context }
-      , alpha: element alpha props
+      , alpha: element alpha { context, pictures }
       }
 
 handleAction :: State -> Action -> State
 handleAction state _ = state
 
 
-makeAlpha :: Env -> Effect (ReactComponent Props)
+makeAlpha :: Env -> Effect (ReactComponent ChildProps)
 makeAlpha env = do
-  component "Alpha" \ props@{ context } -> React.do
+  component "Alpha" \ props@{ context, pictures } -> React.do
     pure
       $ R.div
       { className: "alpha w-full mt-20"
@@ -58,21 +70,39 @@ makeAlpha env = do
           , children:
             [ R.button
               { className: "block w-1/2 secondary-button"
-              , onClick: handler_ $ navigate Route.Games
+              , onClick: capture_ $ navigate Route.Games
               , children:
                 [ R.i { className: "fas fa-play px-2" }
                 , R.text "Games"
                 ]
               }
             , R.button
               { className: "block w-1/2 secondary-button active"
-              , onClick: handler_ $ navigate Route.Pictures
+              , onClick: capture_ $ navigate Route.Pictures
               , children:
                 [ R.i { className: "fas fa-image px-2" }
                 , R.text "Pictures"
                 ]
               }
             ]
           }
+        , renderPictures pictures
         ]
       }
+
+renderPictures :: PicturesAgent -> JSX
+renderPictures pictures =
+  R.div
+  { className: "grid grid-cols-3 gap-3 mt-3"
+  , children: renderPicture <$> pictures.items
+  }
+
+renderPicture :: Picture -> JSX
+renderPicture (Picture picture) =
+  R.div
+  { className: "relative pb-full w-full border border-white rounded overflow-hidden"
+  , children: pure $ R.img
+    { className: "absolute w-full h-full object-cover"
+    , src: picture.thumbnail_url
+    }
+  }

frontend/tailwind.config.js

@@ -16,6 +16,9 @@ module.exports = {
         width: "width",
         visibility: "visibility, opacity",
       },
+      spacing: {
+        full: "100%",
+      },
     },
   },
   variants: {

rails/app/controllers/api/pictures_controller.rb

@@ -2,7 +2,7 @@ class Api::PicturesController < ApiController
   before_action :set_picture_attachment, only: [:destroy]
 
   def index
-    @pictures = current_user.pictures_blobs.order(id: :desc)
+    @pictures = Picture.includes(user_attachment: :user).order(id: :desc)
     render json: @pictures.each_with_object(Picture).map(&:becomes).map(&method(:index_attributes))
   end