Skip to content

Commit

Permalink
add feeds page
Browse files Browse the repository at this point in the history
  • Loading branch information
@ginesdt
ginesdt committed Jan 8, 2024
1 parent 80df30b commit 041bf16
Show file tree
Hide file tree
Showing 8 changed files with 218 additions and 0 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@
"react-infinite-scroller": "1.2.6",
"react-masonry-component": "6.3.0",
"react-select": "5.7.4",
"timeago-react": "3.0.6",
"twitter-api-sdk": "1.2.1",
"web-push": "3.6.4",
"web3": "1.7.3",
Expand Down
87 changes: 87 additions & 0 deletions resources/scss/layouts/feeds.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
.pageFeeds {
padding-top: 97.21px;
background-color: $bgProfile;
.contentFeeds {
margin-bottom: 20px;
.medias {
.content {
width: calc(100% - 25px);
margin: 0 12.5px 24px;

audio, video {
width: 100%;
}

.contentFoot {
display: flex;
justify-content: space-between;

.userProfile {
a {
margin-top: 14px;
margin-bottom: 30px;
margin-left: 30px;

width: fit-content;

display: flex;
align-items: center;

.user {
width: 36px;
height: 36px;

.photo {
box-shadow: 0px 0px 0px 1px $lilac;
}

&.star {
&::after {
height: 18px;
width: 19px;
bottom: 0px;
right: -9.5px;
}
}
}

h3 {
margin-left: 10px;
}
}
}

.date {
font-size: smaller;
margin-top: 14px;
margin-right: 14px;
}
}
}
}
}
.not-found {
text-align: center;
font-weight: bold;
}
@include media-breakpoint-up(md) {
.contentFeeds {
.medias {
.content {
width: calc(50% - 25px);
margin: 0 12.5px 24px;
}
}
}
}
@include media-breakpoint-up(lg) {
padding-top: 140.29px;
background-color: $bgSite;
.contentFeeds {
background-color: $bgCard;
border-radius: 15px;
padding: 14px 40px;
position: relative;
}
}
}
2 changes: 2 additions & 0 deletions resources/scss/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
@import 'layouts/profileEdit.scss';
@import 'layouts/send-support.scss';
@import 'layouts/about.scss';
@import 'layouts/feeds.scss';

//@import 'pages/**/*.scss';
}
Expand Down Expand Up @@ -79,6 +80,7 @@
@import 'layouts/profileEdit.scss';
@import 'layouts/send-support.scss';
@import 'layouts/about.scss';
@import 'layouts/feeds.scss';

//@import 'pages/**/*.scss';
}
4 changes: 4 additions & 0 deletions src-cljsjs/cljsjs/timeago_react.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
(ns cljsjs.timeago-react
(:require ["timeago-react" :default tr]))

(js/goog.exportSymbol "timeago_react" tr)
1 change: 1 addition & 0 deletions src/streamtide/ui/core.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
[streamtide.ui.config :refer [config-map]]
[streamtide.ui.effects]
[streamtide.ui.events :as st-events]
[streamtide.ui.feeds.page]
[streamtide.ui.grants.page]
[streamtide.ui.home.page]
[streamtide.ui.leaderboard.page]
Expand Down
110 changes: 110 additions & 0 deletions src/streamtide/ui/feeds/page.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
(ns streamtide.ui.feeds.page
"Page showing highlighted content of different users in a single page"
(:require
[cljs-time.coerce :as tc]
[cljs.core.match :refer-macros [match]]
[cljsjs.timeago-react]
[district.graphql-utils :as gql-utils]
[district.ui.component.page :refer [page]]
[district.ui.graphql.events :as graphql-events]
[district.ui.graphql.subs :as gql]
[district.ui.web3-accounts.subs :as accounts-subs]
[re-frame.core :refer [subscribe dispatch]]
[reagent.core :as r]
[streamtide.ui.components.app-layout :refer [app-layout]]
[streamtide.ui.components.general :refer [nav-anchor no-items-found]]
[streamtide.ui.components.masonry :refer [infinite-scroll-masonry click-to-load-masonry]]
[streamtide.ui.components.media-embed :as embed]
[streamtide.ui.components.spinner :as spinner]
[streamtide.ui.components.user :refer [user-photo avatar-placeholder]]
[streamtide.ui.subs :as st-subs]))

(def timeago (r/adapt-react-class js/timeago_react))

(def page-size 6)

(defn build-feeds-content-query [after]
[:search-contents
(cond-> {:first page-size
:order-by :contents.order-by/creation-date
:order-dir :desc}
after (assoc :after after))
[:total-count
:end-cursor
:has-next-page
[:items [:content/id
:content/public
:content/type
:content/url
:content/creation-date
[:content/user [:user/address
:user/name
:user/photo
:user/unlocked]]]]]])


(defn content-card [{:keys [:content/id :content/public :content/type :content/url :content/creation-date :content/user]}]
(let [type (gql-utils/gql-name->kw type)
{:keys [:user/address :user/name :user/photo :user/unlocked]} user
nav (partial nav-anchor {:route :route.profile/index :params {:address address}})
creation-date (-> creation-date gql-utils/gql-date->date tc/to-date)]
[:div.content
[:div.media
{:class (case type
:content-type/image "photo"
:content-type/video "video"
:content-type/audio "audio"
:content-type/other "other"
"")}
(case type
:content-type/image [embed/embed-image url]
:content-type/video [embed/embed-video url]
:content-type/audio [embed/embed-audio url]
:content-type/other [embed/embed-other url]
:default "")]
[:div.contentFoot
[:div.userProfile
[nav
[user-photo {:class (when unlocked "star") :src photo}]
[:h3 name]]]
[:div.date
[timeago {:title (.toUTCString creation-date)
:datetime creation-date}]]]]))

(defmethod page :route.feeds/index []
(let [active-account (subscribe [::accounts-subs/active-account])
active-session? (subscribe [::st-subs/active-account-has-session?])]
(fn []
(let [user-content (subscribe [::gql/query {:queries [(build-feeds-content-query nil)]}
{:id {:active-account @active-account :active-session? @active-session?}}])
loading? (:graphql/loading? (first @user-content))
all-content (->> @user-content
(mapcat (fn [r] (-> r :search-contents :items))))
has-more? (-> (last @user-content) :search-contents :has-next-page)]
[app-layout
[:main.pageSite.pageFeeds
{:id "feeds"}
;[:div.headerFeeds
; [:div.container
; [:h1.titlePage "Feeds"]]]
(if loading?
[spinner/spin]
[:div.container
[:div.contentFeeds
(if (and (empty? all-content)
(not loading?))
[no-items-found {:message "No content found"}]
[infinite-scroll-masonry {:class "medias"
:loading? loading?
:has-more? has-more?
:load-fn #(let [end-cursor (:end-cursor (:search-contents (last @user-content)))]
(dispatch [::graphql-events/query
{:query {:queries [(build-feeds-content-query end-cursor)]}
:id {:active-account @active-account :active-session? @active-session?}}]))
:loading-spinner-delegate (fn [] [:div.spinner-container [spinner/spin]])}
(when-not (:graphql/loading? (first @user-content))
(doall
(for [{:keys [:content/id] :as content} all-content]
^{:key id}
[content-card content])))])]])]
[embed/safe-link-popup]]))))
1 change: 1 addition & 0 deletions src/streamtide/ui/routes.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,5 @@
["/oauth-callback-verifier" :route.oauth-callback/verifier]
["/profile/:address" :route.profile/index]
["/profile" :route.profile/index]
["/feeds" :route.feeds/index]
["/send-support" :route.send-support/index]])
12 changes: 12 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11745,6 +11745,18 @@ through2@3.0.2:
resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==

timeago-react@3.0.6:
version "3.0.6"
resolved "https://registry.yarnpkg.com/timeago-react/-/timeago-react-3.0.6.tgz#d1b55af67ed21b1c5429b9ba8043d0d0f7dab295"
integrity sha512-4ywnCX3iFjdp84WPK7gt8s4n0FxXbYM+xv8hYL73p83dpcMxzmO+0W4xJuxflnkWNvum5aEaqTe6LZ3lUIudjQ==
dependencies:
timeago.js "^4.0.0"

timeago.js@^4.0.0:
version "4.0.2"
resolved "https://registry.yarnpkg.com/timeago.js/-/timeago.js-4.0.2.tgz#724e8c8833e3490676c7bb0a75f5daf20e558028"
integrity sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w==

timed-out@^4.0.1:
version "4.0.1"
resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
Expand Down

0 comments on commit 041bf16

Please sign in to comment.