feat(sos): adds helplines

Signed-off-by: Rifa Achrinza <[email protected]>

packages/frontend/src/main/component/helplines.cljs

@@ -0,0 +1,61 @@
+(ns component.helplines
+  (:require [reagent.core :as r]
+            ["react-native" :as rn]
+            ["@expo/vector-icons" :refer [FontAwesome5]]))
+
+(defn helpline-group [title helplines streamlined-svc-mode]
+  [:> rn/View {:style {:marginTop (if streamlined-svc-mode "" "20px")}}
+   [:> rn/Text {:style {:color "#2A4E4C"
+                        :fontSize "16px"}}
+    title]
+   (->> helplines
+        (map (fn [{name :name
+                   contact :contact
+                   operating-hours :operating-hours}]
+               [:> rn/Pressable {:style {:flexDirection :row
+                                         :alignItems "center"
+                                         :justifyContent "space-between"
+                                         :padding "10px"}
+                                 :onPress #(rn/Linking.openURL (str "tel:" contact))}
+                [:> rn/View
+                 [:> rn/Text name]
+                 [:> rn/Text {:style {:color :#a5a5a5}}
+                  contact " · " operating-hours]]
+                [:> FontAwesome5 {:name :phone
+                                  :size 24
+                                  :color :black}]]))
+        (into [:> rn/View]))])
+
+(defn helplines [streamlined-svc-mode]
+  [:> rn/View {:style {:marginTop (if streamlined-svc-mode "" "20px")}}
+   (when (not streamlined-svc-mode)
+     [:> rn/Text {:style {:color :#2A4E4C
+                          :fontSize 24}}
+      "More helplines"]
+     [helpline-group
+      "General Mental Well-Being"
+      [{:name "Institute of Mental Health"
+        :contact "6389 2222"
+        :operating-hours "24Hrs"}
+       {:name "Samaritans of Singapore"
+        :contact "1767"
+        :operating-hours "24Hrs"}
+       {:name "National Care Helpline"
+        :contact "1800 202 6868"
+        :operating-hours "Daily 8am-12am"}
+       {:name "Silver Ribbon Singapore"
+        :contact "6385 3714"
+        :operating-hours "Weekdays 9am-5pm"}]])
+
+   [helpline-group
+    (if streamlined-svc-mode "" "Service Helplines")
+    [{:name "Singapore Armed Forces"
+      :contact "1800 278 0022"
+      :operating-hours "24Hrs"}
+     {:name "Singapore Civil Defence Force"
+      :contact "1800 286 6666"
+      :operating-hours "24Hrs"}
+     {:name "Singapore Police Forces"
+      :contact "1800 255 1151"
+      :operating-hours "Weekdays 8.30am-6.30pm"}]
+    streamlined-svc-mode]])

packages/frontend/src/main/frontend/app.cljs

@@ -18,12 +18,6 @@
 (def Tab (rnbt/createBottomTabNavigator))
 
 (defn root []
-;  [:> rnn/NavigationContainer
-;   [:> Stack.Navigator {:initialRouteName "Home"}
-;    [:> Stack.Screen {:name "Home"
-;                      :component (r/reactify-component home-screen)}]
-;    [:> Stack.Screen {:name "SOS"
-;                      :component (r/reactify-component sos-screen)}]]])
   [:> rnn/NavigationContainer
    [:> Tab.Navigator {:initialRouteName :Home}
     [:> Tab.Screen {:name "Home"
@@ -47,12 +41,34 @@
   (rf/reg-event-db
    :initialize-db
    (fn [db _]
-     (assoc db :user "Guest")))
+     (-> db
+         (assoc :user "Guest")
+         (assoc :helpline-groups {:general {:displayName "General Mental Well-being"}
+                                  :ns {:displayName "Service Helplines"}})
+         (assoc :helplines [{:name "Institute of Mental Health"
+                             :contact "6389 2222"
+                             :operating-hours "24Hrs"
+                             :group :general}
+                            {:name "Samaritans of Singapore"
+                             :contact "1767"
+                             :operating-hours "24Hrs"}
+                            {:name "National Care Helpline"
+                             :contact "1800 202 6868"
+                             :operating-hours "Daily 8am-12am"}
+                            {:name "Silver Ribbon Singapore"
+                             :contact "6385 3714"
+                             :operating-hours "Weekdays 9am-5pm"}]))))
 
   (rf/reg-sub
    :user
    (fn [db _]
      (:user db)))
+
+  (rf/reg-sub
+   :helplines-groups
+   (fn [db _]
+     (-> db
+         (select-keys [:helplines :helpline-groups]))))
 
   (rf/dispatch-sync [:initialize-db])
   (start))

packages/frontend/src/main/screen/home.cljs

@@ -39,8 +39,10 @@
                        :borderRadius :6px
                        :flexDirection :row
                        :gap :5px}}
-   [:> rn/Text {:style {:flex 2}}
-    "Image goes here"]
+;   [:> rn/Text {:style {:flex 2}}
+;    "Image goes here"]
+   [:> rn/Image {:style {:flex 2}
+                 :source ""}]
    [:> rn/View {:style {:flex 5}}
     [:> rn/Text {:style {:color :#2A4E4C
                          :fontWeight :bold}}

packages/frontend/src/main/screen/resources.cljs

@@ -1,5 +1,6 @@
 (ns screen.resources
   (:require [reagent.core :as r]
+            [component.helplines :refer [helplines]]
             ["react-native" :as rn]
             ["@expo/vector-icons" :refer [FontAwesome5]]))
 
@@ -72,7 +73,8 @@
      :#DDF1FE
      "https://mindline.sg/"]
 
-    [section-header "Useful Contacts"]]])
+    [section-header "Useful Contacts"]
+    [helplines true]]])
 
 (defn resources-screen []
   [resources-screen-inner])

packages/frontend/src/main/screen/sos.cljs

@@ -1,20 +1,21 @@
 (ns screen.sos
   (:require [reagent.core :as r]
-            ["react-native" :as rn]))
+            [re-frame.core :as rf]
+            [component.helplines :refer [helplines]]
+            ["react-native" :as rn]
+            ["@expo/vector-icons" :refer [FontAwesome5]]))
 
 (defn prominent-dialer []
   [:> rn/View {:style {:alignItems :center}}
-;                       :height :90%}}
    [:> rn/View {:style {:alignItems :center
                         :justifyContent :center
                         :padding :15px
-;                        :height :90%
                         :maxWidth :500px}}
     [:> rn/Text {:style {:fontSize 24}} "You are not alone."]
     [:> rn/Text {:style {:fontSize 24}} "We're here to help."]
     [:> rn/Text {:style {:fontSize 14
                          :color :#a5a5a5}} "You will remain anonymous."]
-    [:> rn/View {:style {:borderRadius :100%
+    [:> rn/Pressable {:style {:borderRadius :100%
                          :background :#FCEDD0
                          :margin :20px
                          :padding :15px
@@ -52,21 +53,9 @@
         "Helpline 1767"]]]]
     [:> rn/Text {:style {:color :#a5a5a5
                          :fontSize 14}}
-     "The button will bring up your phone’s dialler but will not call immediately."]]])
-
-(defn helpline-group [title hotlines]
-  [:> rn/View
-   [:> rn/Text title]])
-
-(defn helplines []
-  [:> rn/View
-   [:> rn/Text {:style {:color :#2A4E4C
-                        :fontSize 24}}
-    "More helplines"]
-   [helpline-group
-    "General Mental Well-Being"]])
+     "The button will bring up your phone’s dialer but will not call immediately."]]])
 
 (defn sos-screen []
-  [:> rn/ScrollView
+  [:> rn/ScrollView {:style {:padding "10px"}}
    [prominent-dialer]
    [helplines]])