feat(dashboard): adds recently updated component and time-since fn

Author: rafaeldelboni

:w

@@ -0,0 +1,25 @@
+(ns codes.clj.docs.frontend.adapters.time)
+
+(def MINUTE 60)
+(def HOUR (* MINUTE 60))
+(def DAY (* HOUR 24))
+(def WEEK (* DAY 7))
+(def MONTH (* DAY 30))
+(def YEAR (* DAY 365))
+
+(defn time-since [date now]
+  (let [seconds-ago (-> (- now date)
+                        (/ 1000)
+                        Math/round)
+        {:keys [divisor unit]} (cond
+                                 (< seconds-ago MINUTE) {:divisor 1 :unit "second"}
+                                 (< seconds-ago HOUR) {:divisor MINUTE :unit "minute"}
+                                 (< seconds-ago DAY) {:divisor HOUR :unit "hour"}
+                                 (< seconds-ago WEEK) {:divisor DAY :unit "day"}
+                                 (< seconds-ago MONTH) {:divisor WEEK :unit "week"}
+                                 (< seconds-ago YEAR) {:divisor MONTH :unit "month"}
+                                 :else {:divisor YEAR :unit "year"})
+        value (-> (/ seconds-ago divisor)
+                  Math/floor)
+        plural? (if (> value 1) "s" "")]
+    (str value " " unit plural? " ago")))

src/codes/clj/docs/frontend/adapters/time.cljs

@@ -1,11 +1,12 @@
 (ns codes.clj.docs.frontend.components.query
-  (:require ["@mantine/core" :refer [Alert Anchor Avatar Grid Group Indicator
-                                     LoadingOverlay SimpleGrid Text Title
-                                     Tooltip]]
+  (:require ["@mantine/core" :refer [Alert Anchor Avatar Box Grid Group
+                                     Indicator LoadingOverlay SimpleGrid Text
+                                     Title Tooltip]]
             ["@tabler/icons-react" :refer [IconInfoCircle]]
+            [clojure.string :as str]
             [codes.clj.docs.frontend.infra.helix :refer [defnc]]
-            [helix.core :refer [$]]
-            [helix.dom :as dom]))
+            [codes.clj.docs.frontend.adapters.time :as adapters.time]
+            [helix.core :refer [$]]))
 
 (defnc latest-interactions [{:keys [value loading? error]}]
   ($ SimpleGrid {:cols 1}
@@ -15,42 +16,31 @@
       ($ Alert {:variant "light" :color "red" :radius "md" :title "Error" :icon ($ IconInfoCircle)}
         (str error))
 
-      ($ Group {:pos "relative" :grow true}
-        ($ LoadingOverlay {:visible loading? :zIndex 1000 :overlayProps #js {:radius "sm" :blur 2}})
+      ($ Box {:pos "relative"}
+        ($ LoadingOverlay {:visible loading? :zIndex 1000
+                           :loaderProps #js {:type "dots"}
+                           :overlayProps #js {:radius "sm" :blur 2}})
         ($ SimpleGrid {:cols 2}
           (map
-            (fn [{:keys [author]}]
-              (let [{:keys [author-id login account-source avatar-url]} author]
-                ($ Group {:key (str "latest" author-id) :grow true}
+            (fn [{:keys [note-id example-id see-also-id definition-id author created-at]}]
+              (let [id (str "latest" (or note-id example-id see-also-id))
+                    action (cond
+                             note-id " authored a note for "
+                             example-id " authored an example for "
+                             see-also-id " added a see also on ")
+                    definition (str/replace definition-id #"/0$" "")
+                    ago (adapters.time/time-since created-at (.now js/Date))
+                    {:keys [login account-source avatar-url]} author]
+                ($ Group {:key id :wrap "nowrap"}
                   ($ Anchor {:href (str "/author/" login "/" account-source)}
-                    ($ Avatar {:size "md" :src avatar-url}))
-
-                  (dom/div
-                    ($ Text "banana")))))
-
+                    ($ Avatar {:src avatar-url}))
+                  ($ Text {:size "sm"} login
+                    ($ Text {:component "span"}
+                      action " "
+                      ($ Anchor {:href definition-id} definition)
+                      " " ago ".")))))
             value))))))
 
-    ; <UnstyledButton className={classes.user}>
-    ;   <Group>
-    ;     <Avatar
-    ;       src="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/avatars/avatar-8.png"
-    ;       radius="xl"
-    ;     />
-    ;
-    ;     <div style={{ flex: 1 }}>
-    ;       <Text size="sm" fw={500}>
-    ;         Harriette Spoonlicker
-    ;       </Text>
-    ;
-    ;       <Text c="dimmed" size="xs">
-    ;         [email protected]
-    ;       </Text>
-    ;     </div>
-    ;
-    ;     <IconChevronRight style={{ width: rem(14), height: rem(14) }} stroke={1.5} />
-    ;   </Group>
-    ; </UnstyledButton>
-
 (defnc top-author [{:keys [value loading? error]}]
   ($ SimpleGrid {:cols 1}
     ($ Title {:order 1} "Top Authors")
@@ -60,7 +50,9 @@
         (str error))
 
       ($ Group {:pos "relative"}
-        ($ LoadingOverlay {:visible loading? :zIndex 1000 :overlayProps #js {:radius "sm" :blur 2}})
+        ($ LoadingOverlay {:visible loading? :zIndex 1000
+                           :loaderProps #js {:type "dots"}
+                           :overlayProps #js {:radius "sm" :blur 2}})
         ($ Grid {:grow false :gutter "lg"}
           (map
             (fn [{:keys [author-id login account-source interactions avatar-url]}]