Skip to content

Commit

Permalink
Allow defining dates for campaigns
Browse files Browse the repository at this point in the history
  • Loading branch information
@ginesdt
ginesdt committed Sep 23, 2024
1 parent 4e5dccc commit 08a23ed
Show file tree
Hide file tree
Showing 9 changed files with 230 additions and 15 deletions.
3 changes: 3 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"buffer": "6.0.3",
"chalk": "2.4.2",
"create-react-class": "15.7.0",
"css-loader": "^7.1.2",
"dataloader": "2.1.0",
"expo-modules-core": "^1.12.15",
"expo-web-browser": "^13.0.3",
Expand All @@ -39,6 +40,7 @@
"pg": "^8.11.5",
"pg-native": "^3.1.0",
"react": "18.2.0",
"react-datepicker": "^7.3.0",
"react-dom": "18.2.0",
"react-infinite": "0.13.0",
"react-infinite-scroller": "1.2.6",
Expand All @@ -50,6 +52,7 @@
"siwe": "^2.3.2",
"sqlite": "^5.1.1",
"sqlite3": "^5.1.7",
"style-loader": "^4.0.0",
"thirdweb": "5.24.0",
"timeago-react": "3.0.6",
"twitter-api-sdk": "1.2.1",
Expand Down
19 changes: 18 additions & 1 deletion resources/scss/layouts/campaign.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,15 +49,32 @@
}

.creator-container {
margin-bottom: 24px;
margin-bottom: 10px;
span {
font-weight: bold;
display: block;
margin-bottom: 4px;
}
}

.react-datepicker__calendar-icon {
width: 1.2em;
height: 1.7em;
}

.date {
span {
margin-right: 8px;
}
}
.datepicker {
border: 3px solid $lilac;
padding: 6px 10px 5px 30px;
width: 160px;
}

.buttons {
margin-top: 16px;
display: flex;
justify-content: space-between;

Expand Down
7 changes: 6 additions & 1 deletion src/streamtide/server/graphql/graphql_resolvers.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -407,13 +407,18 @@
config))
true))))

(defn gql-date->secs [date]
(js/parseInt (/ (.getTime (graphql-utils/gql-date->date date)) 1000)))

(defn update-campaign-mutation [_ {:keys [:campaign/id :user/address :campaign/image :campaign/start-date :campaign/end-date] :as args} {:keys [:current-user :config]}]
(log/debug "update-campaign-mutation" args)
(try-catch-throw
(wrap-as-promise
(safe-go
(<? (logic/update-farcaster-campaign! (user-id current-user)
(select-keys args [:campaign/id :user/address :campaign/image :campaign/start-date :campaign/end-date])
(cond-> (select-keys args [:campaign/id :user/address :campaign/image :campaign/start-date :campaign/end-date])
(:campaign/start-date args) (update :campaign/start-date gql-date->secs)
(:campaign/end-date args) (update :campaign/end-date gql-date->secs))
config))
true))))

Expand Down
33 changes: 26 additions & 7 deletions src/streamtide/ui/admin/campaign/page.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
[streamtide.ui.admin.campaign.subs :as c-subs]
[streamtide.ui.components.app-layout :refer [app-layout]]
[streamtide.ui.components.custom-select :refer [select]]
[streamtide.ui.components.datepicker :refer [date-picker]]
[streamtide.ui.components.error-notification :as error-notification]
[streamtide.ui.components.spinner :as spinner]
[streamtide.ui.components.warn-popup :as warn-popup]
Expand Down Expand Up @@ -65,11 +66,18 @@
(defn- photo->gql [photo]
(-> photo :selected-file :url-data))

(defn date->gql [date]
(js/parseInt (/ (.getTime date) 1000)))

(defn- clean-form-data [form-data]
(try
(cond-> form-data
(and (:image form-data) (-> form-data :image :error)) (dissoc :image)
(and (:image form-data) (-> form-data :image :error not)) (update :image photo->gql))
(and (:image form-data) (-> form-data :image :error not)) (update :image photo->gql)
(= (:start-date form-data) "") (assoc :start-date nil)
(and (:start-date form-data) (not= (:start-date form-data) "")) (update :start-date date->gql)
(= (:end-date form-data) "") (assoc :end-date nil)
(and (:end-date form-data) (not= (:end-date form-data) "")) (update :end-date date->gql))
(catch :default e
(dispatch [::error-notification/show-error "Invalid data" e])
(throw e))))
Expand All @@ -80,6 +88,8 @@
campaign-id (-> @active-page-sub :params :campaign)
form-data (r/atom {:id campaign-id})
errors (reaction {:local (cond-> {}
(-> @form-data :image :error)
(assoc :image (-> @form-data :image :error))
)})]
(fn []
(let [active-session (subscribe [::st-subs/active-session])
Expand Down Expand Up @@ -112,8 +122,7 @@
[:div.headerCampaign
[:h2 (str "Campaign: " campaign-id)]
[:div
[:span "Frame URL:"]
[:span url]
[:span (str "Frame URL: " url)]
[:img.clipboard {:height "24px"
:src "/img/layout/icon-clipboard.svg"
:on-click #(js/navigator.clipboard.writeText url)}]]]
Expand All @@ -135,16 +144,26 @@
:class "options"
:initial-value (:user/address user)
:options users}]]]
; TODO allow defining dates
;[:div.start (str "Start Time: " (ui-utils/format-graphql-time start-date))]
;[:div.end (str "End Time: " (ui-utils/format-graphql-time end-date))]
[:div.dates
[:div.date.start
[:span "Start Time:"]
[date-picker {:form-data form-data
:class "datepicker"
:id :start-date
:initial-value (when start-date (ui-utils/gql-time->date start-date))}]]
[:div.date.end
[:span "End Time:"]
[date-picker {:form-data form-data
:class "datepicker"
:id :end-date
:initial-value (when end-date (ui-utils/gql-time->date end-date))}]]]
[:div.buttons
[:button.btBasic.btBasic-light.btUpdateCampaign
{:on-click #(dispatch [::c-events/update-campaign
{:form-data (clean-form-data @form-data)
:on-success (fn []
(reset! form-data (with-meta @form-data {:touched? false})))}])
:disabled (or (not (:touched? (meta @form-data))) updating? removing?)}
:disabled (or (not (:touched? (meta @form-data))) (not-empty (-> @errors :local)) updating? removing?)}
"Update"]
[:button.btBasic.btBasic-light.btDeleteCampaign
{:on-click (fn [e]
Expand Down
10 changes: 7 additions & 3 deletions src/streamtide/ui/admin/campaigns/page.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,12 @@
[[:items [[:grant/user [:user/address
:user/name]]]]]])

(defn format-graphql-date [gql-time]
(when gql-time
(.toLocaleString (ui-utils/gql-time->date gql-time)
js/undefined #js { :year "numeric" :month "short" :day "numeric" } )))

(defn campaign-entry [{:keys [:campaign/id :campaign/start-date :campaign/end-date :campaign/user] :as campaign}]
(js/console.log user)
(let [nav (partial nav-anchor {:route :route.admin/campaign :params {:campaign id}})]
[nav
[:div.contentCampaign
Expand All @@ -58,10 +62,10 @@
[:h3 (:user/name user)]]
[:div.cel.startdate
[:h4.d-lg-none "Start Date"]
[:span (ui-utils/format-graphql-time start-date)]]
[:span (format-graphql-date start-date)]]
[:div.cel.enddate
[:h4.d-lg-none "End Date"]
[:span (ui-utils/format-graphql-time end-date)]]]]))
[:span (format-graphql-date end-date)]]]]))


(defn campaign-entries [campaigns-search]
Expand Down
24 changes: 24 additions & 0 deletions src/streamtide/ui/components/datepicker.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
(ns streamtide.ui.components.datepicker
"Page to manage a specific campaign"
(:require
["react-datepicker" :default DatePicker]
["react-datepicker/dist/react-datepicker.css"]
[district.ui.component.form.input :refer [assoc-by-path get-by-path]]
[reagent.core :as r]))


(defn date-picker [{:keys [:form-data :id :on-change :class :initial-value]}]
(r/create-element
DatePicker
#js {:showIcon true
:isClearable true
:className class
:selected (let [value (get-by-path @form-data id)]
(if (= "" value) nil
(or value initial-value)))
:onChange (fn [new-date]
(let [new-date (if (nil? new-date) "" new-date)]
(swap! form-data (fn [current-value]
(with-meta (assoc-by-path current-value id new-date)
(assoc (meta current-value) :touched? true))))
(when on-change (on-change new-date))))}))
5 changes: 4 additions & 1 deletion src/streamtide/ui/utils.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,13 @@
(let [function (if show "add" "remove")]
(js-invoke (-> js/document .-body .-classList) function "hidden" )))

(defn gql-time->date [gql-time]
(tc/to-date (gql-utils/gql-date->date gql-time)))

(defn format-graphql-time [gql-time]
"Pretty printed version of the time coming from the server"
(when gql-time
(.toLocaleString (tc/to-date (gql-utils/gql-date->date gql-time))
(.toLocaleString (gql-time->date gql-time)
js/undefined #js {:hour12 false :dateStyle "short" :timeStyle "short"} )))

(defn truncate-text
Expand Down
4 changes: 4 additions & 0 deletions webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,10 @@ module.exports = {
},
flags: 'g'
}
},
{
test: /\.(sass|css)$/,
use: ['style-loader', 'css-loader']
}
]
},
Expand Down
Loading

0 comments on commit 08a23ed

Please sign in to comment.