From 2d04c2f3bbd06df96d8bb3edf11f3493ac3cd596 Mon Sep 17 00:00:00 2001 From: Kimi Yap Date: Wed, 31 Jul 2024 21:06:10 +0800 Subject: [PATCH] fix: android deployment Signed-off-by: Kimi Yap --- .gitignore | 3 + packages/frontend/package-lock.json | 20 ++++++ packages/frontend/package.json | 3 +- .../src/main/component/helplines.cljs | 6 +- packages/frontend/src/main/frontend/app.cljs | 63 ++++++++++++++----- packages/frontend/src/main/screen/auth.cljs | 17 +++-- .../frontend/src/main/screen/explore.cljs | 12 ++-- packages/frontend/src/main/screen/home.cljs | 55 ++++++++-------- .../src/main/screen/mindfulpause.cljs | 24 +++---- .../frontend/src/main/screen/resources.cljs | 18 +++--- packages/frontend/src/main/screen/sos.cljs | 28 ++++----- packages/frontend/tsconfig.json | 4 ++ 12 files changed, 160 insertions(+), 93 deletions(-) create mode 100644 packages/frontend/tsconfig.json diff --git a/.gitignore b/.gitignore index 4b31f6a..6729d03 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,6 @@ packages/frontend/assets/* .\#* .m2 dist/ +packages/frontend/android/ +packages/frontend/ios/ +packages/frontend/dist diff --git a/packages/frontend/package-lock.json b/packages/frontend/package-lock.json index 899e921..cc10b02 100644 --- a/packages/frontend/package-lock.json +++ b/packages/frontend/package-lock.json @@ -17,6 +17,7 @@ "@react-navigation/drawer": "^6.6.15", "@react-navigation/native": "^6.1.17", "@react-navigation/native-stack": "^6.9.26", + "@types/react": "~18.2.79", "babel-plugin-module-resolver": "^5.0.0", "create-react-class": "^15.7.0", "expo": "^51.0.22", @@ -5603,6 +5604,11 @@ "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==", "dev": true }, + "node_modules/@types/prop-types": { + "version": "15.7.12", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", + "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==" + }, "node_modules/@types/qs": { "version": "6.9.15", "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.15.tgz", @@ -5615,6 +5621,15 @@ "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==", "dev": true }, + "node_modules/@types/react": { + "version": "18.2.79", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.79.tgz", + "integrity": "sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==", + "dependencies": { + "@types/prop-types": "*", + "csstype": "^3.0.2" + } + }, "node_modules/@types/retry": { "version": "0.12.0", "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz", @@ -8117,6 +8132,11 @@ "node": ">=8.0.0" } }, + "node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" + }, "node_modules/dag-map": { "version": "1.0.2", "license": "MIT" diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 958722c..f07cd0c 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -52,6 +52,7 @@ "react-native-reanimated": "~3.10.1", "react-native-safe-area-context": "4.10.5", "react-native-screens": "3.31.1", - "react-native-web": "^0.19.10" + "react-native-web": "^0.19.10", + "@types/react": "~18.2.79" } } diff --git a/packages/frontend/src/main/component/helplines.cljs b/packages/frontend/src/main/component/helplines.cljs index ae24f5e..151e617 100644 --- a/packages/frontend/src/main/component/helplines.cljs +++ b/packages/frontend/src/main/component/helplines.cljs @@ -12,7 +12,7 @@ (map (fn [{name :name contact :contact operating-hours :operating-hours}] - [:> rn/Pressable {:style {:flexDirection :row + [:> rn/Pressable {:style {:flexDirection "row" :alignItems "center" :justifyContent "space-between" :padding 10} @@ -21,9 +21,9 @@ [:> rn/Text name] [:> rn/Text {:style {:color "#a5a5a5"}} contact " ยท " operating-hours]] - [:> FontAwesome5 {:name :phone + [:> FontAwesome5 {:name "phone" :size 24 - :color :black}]])) + :color "black"}]])) (into [:> rn/View]))]) (defn helplines [streamlined-svc-mode] diff --git a/packages/frontend/src/main/frontend/app.cljs b/packages/frontend/src/main/frontend/app.cljs index f3ca39b..e0ce571 100644 --- a/packages/frontend/src/main/frontend/app.cljs +++ b/packages/frontend/src/main/frontend/app.cljs @@ -25,11 +25,32 @@ [:> navigator {:initialRouteName "Home" :screenOptions {:headerShown false}} [:> screen {:name "Home" - :component (r/reactify-component home-screen)}] + :component (r/reactify-component home-screen) + :options {:headerShown false + :tabBarIcon #(let [{size :size + color :color} (js->clj % {:keywordize-keys true})] + (-> [:> FontAwesome5 {:name "home" + :color color + :size size}] + (r/as-element)))}}] [:> screen {:name "SOS" - :component (r/reactify-component sos-screen)}] + :component (r/reactify-component sos-screen) + :options {:headerShown false + :tabBarIcon #(let [{size :size + color :color} (js->clj % {:keywordize-keys true})] + (-> [:> MaterialIcons {:name "sos" + :color color + :size size}] + (r/as-element)))}}] [:> screen {:name "Resources" - :component (r/reactify-component resources-screen)}]])) + :component (r/reactify-component resources-screen) + :options {:headerShown false + :tabBarIcon #(let [{size :size + color :color} (js->clj % {:keywordize-keys true})] + (-> [:> MaterialIcons {:name "message" + :color color + :size size}] + (r/as-element)))}}]])) (defn root [] (let [user-mode @(rf/subscribe [:user-mode]) @@ -60,19 +81,19 @@ (assoc :categories {:self {:name "Self" :color "#FFF7D6" - :image (js/require "../assets/home_explore_self.svg")} + :image (js/require "../assets/home_explore_self.png")} :self-card {:name "Self-Care" :color "#DDE5FF" - :image (js/require "../assets/home_explore_self_care.svg")} + :image (js/require "../assets/home_explore_self_care.png")} :mental-health {:name "About Mental Health" :color "#DEF7E5" - :image (js/require "../assets/home_explore_mental_health.svg")} + :image (js/require "../assets/home_explore_mental_health.png")} :other {:name "About Others" :color "#FFE7E7" - :image (js/require "../assets/home_explore_others.svg")}}) + :image (js/require "../assets/home_explore_others.png")}}) (assoc :helpline-groups {:general {:displayName "General Mental Well-being"} :ns {:displayName "Service Helplines"}}) (assoc :helplines [{:name "Institute of Mental Health" @@ -90,19 +111,29 @@ :operating-hours "Weekdays 9am-5pm"}]) (assoc :mindful-pause {:audio [{:name "Breathe" - :audio-file (js/require "../assets/mindful_minutes/breathe.mp3") + ;:audio-file (js/require "../assets/mindful_minutes/breathe.mp3") + :audio-file (js/require "../assets/love_wins_all.mp3") ;since I dont have the other audios yet on 290724 :icon [:> evi/MaterialIcons {:name "air" - :size "20px" - :color "#A5A5A5"}]} + :size 20 + :color "#A5A5A5"}]} {:name "Take a sip of tea" - :audio-file (js/require "../assets/mindful_minutes/sip_tea.mp3") - :icon [:> evi/SimpleLineIcons {:name "cup" :size "20px" :color "#A5A5A5"}]} + ;:audio-file (js/require "../assets/mindful_minutes/sip_tea.mp3") + :audio-file (js/require "../assets/love_wins_all.mp3") ;since I dont have the other audios yet on 290724 + :icon [:> evi/SimpleLineIcons {:name "cup" + :size 20 + :color "#A5A5A5"}]} {:name "Take a walk" - :audio-file "../assets/mindful_minutes/sip_tea.mp3" - :icon [:> evi/MaterialIcons {:name "directions-walk" :size "20px" :color "#A5A5A5"}]} + ;:audio-file "../assets/mindful_minutes/sip_tea.mp3" + :audio-file (js/require "../assets/love_wins_all.mp3") ;since I dont have the other audios yet on 290724 + :icon [:> evi/MaterialIcons {:name "directions-walk" + :size 20 + :color "#A5A5A5"}]} {:name "Look at the sky" - :audio-file "../assets/mindful_minutes/observe_sky.mp3" - :icon [:> evi/MaterialIcons {:name "cloud" :size "20px" :color "#A5A5A5"}]}]})))) + ;:audio-file "../assets/mindful_minutes/observe_sky.mp3" + :audio-file (js/require "../assets/love_wins_all.mp3") ;since I dont have the other audios yet on 290724 + :icon [:> evi/MaterialIcons {:name "cloud" + :size 20 + :color "#A5A5A5"}]}]})))) (rf/reg-sub :user diff --git a/packages/frontend/src/main/screen/auth.cljs b/packages/frontend/src/main/screen/auth.cljs index bd419de..6237a92 100644 --- a/packages/frontend/src/main/screen/auth.cljs +++ b/packages/frontend/src/main/screen/auth.cljs @@ -11,23 +11,30 @@ :paddingRight 30 :minWidth 20 :borderRadius 8 - :border "2px solid #2A4E4C" + :borderWidth 1 + :borderColor "#2A4E4C" + :borderStyle "solid" :textAlign "center"} :btn-primary - {:background "#2A4E4C" + {:backgroundColor "#2A4E4C" :color "#FFF"} :btn-secondary - {:border "2px solid #2A4E4C"} + {;:border "2px solid #2A4E4C" + :borderRadius 8 + :borderWidth 1 + :borderStyle "solid" + :borderColor "#2A4E4C"} :auth-screen {:position "relative" :height "100%"} :auth-logo-container - {:justifyContent "center" - :alignItems "center"} + {:justifyContent "flex-end" + :alignItems "center" + :height "50%"} :auth-selection {:width "100%" diff --git a/packages/frontend/src/main/screen/explore.cljs b/packages/frontend/src/main/screen/explore.cljs index 755b0ee..5112967 100644 --- a/packages/frontend/src/main/screen/explore.cljs +++ b/packages/frontend/src/main/screen/explore.cljs @@ -47,15 +47,16 @@ (filter (fn [{article-category :category}] (= article-category category))) (map (fn [{title :title mdText :mdText :as article}] - [:> rn/Pressable {:style {:backgroundColor :white + [:> rn/Pressable {:style {:backgroundColor "white" :borderRadius 12 :overflow "hidden" - :marginBottom 10 + ;:marginBottom 10 :marginLeft 20 :marginRight 20 - :height 32 :flex 1 - :alignItems :center} + :alignItems "center" + :justifyContent "center" + :height 32} :onPress #(navigation.navigate "Article" {:article article})} [:> rn/Text {:style {:fontSize 16 :paddingLeft 10 @@ -64,5 +65,6 @@ (into [:> rn/View [:> rn/Text {:style {:fontSize 24 :marginLeft 20 - :marginRight 20}} + :marginRight 20 + :marginBottom 5}} "Articles"]]))])) diff --git a/packages/frontend/src/main/screen/home.cljs b/packages/frontend/src/main/screen/home.cljs index f21929e..9dead9e 100644 --- a/packages/frontend/src/main/screen/home.cljs +++ b/packages/frontend/src/main/screen/home.cljs @@ -9,10 +9,10 @@ ["react-native" :as rn])) (defn section [title child] - [:> rn/View {:style {:margin :10px}} - [:> rn/Text {:style {:fontWeight :bold - :color :#2A4E4C - :marginBottom :10px}} + [:> rn/View {:style {:margin 10}} + [:> rn/Text {:style {:fontWeight "bold" + :color "#2A4E4C" + :marginBottom 10}} title] child]) @@ -27,7 +27,7 @@ :padding 15 :width 160 :height 160 - :alignItems :center} + :alignItems "center"} :onPress #(nav.navigate "Explore" #js{:category category})} [:> rn/Text {:style {:textAlign "right" :fontWeight "bold" @@ -46,22 +46,21 @@ (into [:> rn/ScrollView {:horizontal true}])))) (defn activities [navigation] - [:> rn/Pressable {:style {:background "#FFE7E7" - :padding "15px" + [:> rn/Pressable {:style {:backgroundColor "#FFE7E7" + :padding 15 :borderRadius 6 :flexDirection "row" :alignItems "center" :gap 5 - :minHeight "20px"} + :minHeight 20} :onPress #(navigation.navigate "MindfulPause")} - [:> rn/Image {:style {:flex 2 - :resizeMode "contain" + [:> rn/Image {:style {:flex 3 :height "100%" - :maxHeight "50px"} - :source (js/require "../assets/home_mindful_minutes.svg")}] + :maxHeight "20vh"} + :source (js/require "../assets/home_mindful_minutes.png")}] [:> rn/View {:style {:flex 5}} [:> rn/Text {:style {:color "#2A4E4C" - :fontWeight "bold"}} + :fontWeight :bold}} "Overwhelmed and unable to focus?"] [:> rn/Text {:style {:color "#2A4E4C"}} "Take this mindful pause for a 5 minute break"]]]) @@ -69,36 +68,36 @@ (defn quote-of-the-day [] [:> rn/View {:style {:alignItems "center" :flexDirection "row" - :background "#2A4E4C" - :padding "15px" + :backgroundColor "#2A4E4C" + :padding 15 :borderRadius 6}} [:> evi/FontAwesome5 {:name "quote-right" :size 24 :color "white" - :style {:paddingRight "12px"}}] - [:> rn/Text {:style {:color :white}} + :style {:paddingRight 12}}] + [:> rn/Text {:style {:color "white"}} "Just because no one else can heal or do your inner work for you, doesn't mean you can, should, or need to do it alone."]]) (defn greeting [] (let [user-name @(rf/subscribe [:user])] [:> rn/Text {:style {:fontSize 24 :fontWeight "bold" - :paddingLeft "15px" - :paddingRight "15px" + :paddingLeft 15 + :paddingRight 15 :color "#2A4E4C"}} "Hey, " (if (= nil user-name) "Guest", user-name) "!"])) (defn daily-feeling-scale [] (let [feeling-rating @(rf/subscribe [:user-feeling-scale/rating]) feeling-ratings ["frown-open" "frown" "meh" "smile" "smile-beam"]] - [:> rn/View {:style {:padding :15px}} + [:> rn/View {:style {:padding 15}} [:> rn/Text "How are you feeling today?"] (->> feeling-ratings (map-indexed (fn [index, icon-name] [:> rn/Pressable {:onPress #(rf/dispatch [:user-feeling-scale/set-rating index]) :style {:borderRadius 8 - :padding "10px" - :background (when (= index feeling-rating) "#B7DBD9")}} + :padding 10 + :backgroundColor (when (= index feeling-rating) "#B7DBD9")}} [:> evi/FontAwesome5 {:name icon-name :size 32 :color "#000"}]])) @@ -106,16 +105,16 @@ (reverse) (into [:> rn/View {:style {:flex 1 :flexDirection "row" - :justify-content "space-around" - :padding "10px"}}]))])) + :justifyContent "space-around" + :padding 10}}]))])) (defn home-screen-inner [{navigation :navigation}] [:> rn/ScrollView [:> rn/View {:style {:flex 1 - :align-items :stretch - :paddingTop "50px" - :paddingLeft "5px" - :paddingRight "5px"}} + :alignItems "stretch" + :paddingTop 50 + :paddingLeft 5 + :paddingRight 5}} [greeting] [daily-feeling-scale] [section "Quote of the day" diff --git a/packages/frontend/src/main/screen/mindfulpause.cljs b/packages/frontend/src/main/screen/mindfulpause.cljs index 63a88a7..8ee9f05 100644 --- a/packages/frontend/src/main/screen/mindfulpause.cljs +++ b/packages/frontend/src/main/screen/mindfulpause.cljs @@ -6,7 +6,7 @@ ["expo-av" :as eav])) (defn audio-option-button [{name :name icon :icon audio-file :audio-file}] ; INPUT FOR AUDIOFILE, PLEASE SET UP ON YOUR END @RIFA - [:> rn/Pressable {:style {:marginBottom "10px" + [:> rn/Pressable {:style {:marginBottom 10 :maxWidth "50vw"} :onPress #(rf/dispatch [:play-track {:audio-file audio-file}])} [:> rn/Text {:style {:fontSize 22 @@ -14,16 +14,16 @@ :fontWeight "bold" :justifyContent "center"}} icon - [:> rn/Text {:style {:margin "5px"}}""] + [:> rn/Text {:style {:margin 5}}""] name]]) -(defn audio-player [] +(defn audio-player-system [] (let [current-audio @(rf/subscribe [:play-track]) play @(rf/subscribe [:start-play-track]) audio-player (eav/Audio.Sound.)] (if (= nil current-audio) (.unloadAsync audio-player) - (.loadAsync audio-player current-audio)) + (.loadAsync audio-player current-audio)) (if (= play true) (.playAsync audio-player) (.pauseAsync audio-player)) @@ -32,7 +32,7 @@ (defn mindfulpause-screen [{navigation :navigation}] (let [audio-list @(rf/subscribe [:mindful-pause-audio])] [:> rn/View {:style {:flex 1 - :background "#595F59"}} + :backgroundColor "#595F59"}} [:> rn/View {:style {:flex 2}} [:> rn/View {:style {:flex 1 :alignItems "center" @@ -47,7 +47,7 @@ :textAlign "center" :alignItems "center" :color "white" - :marginBottom "10px"}} + :marginBottom 10}} "Mindful Pause"] [:> rn/Text {:style {:fontSize 14 :textAlign "center" @@ -67,18 +67,20 @@ :justifyContent "center" :alignItems "center"}} [:> rn/Pressable {:style {:borderRadius 5000 - :border "10px solid #A5A5A5" + :borderStyle "solid" + :borderWidth 10 + :borderColor "#A5A5A5" :width "50vw" :height "50vw" - :maxWidth "280px" - :maxHeight "280px" + :maxWidth 280 + :maxHeight 280 :justifyContent "center" :alignItems "center"} :onPress #(rf/dispatch [:set-playing-mode true])} [:> evi/Feather {:name :play :size 128 :color "#A5A5A5" - :style {:paddingLeft "20px"}}]] + :style {:paddingLeft 20}}]] [:> rn/Text {}]] [:> rn/View {:style {:flex 5}} @@ -91,7 +93,7 @@ [:> rn/Pressable {:style {:flex 1 :justifyContent "center"} :onPress #(navigation.navigate "Explore")} - [audio-player] + [audio-player-system] [:> rn/Text {:style {:fontSize 16 :color "#A5A5A5" :textAlign "center"}} diff --git a/packages/frontend/src/main/screen/resources.cljs b/packages/frontend/src/main/screen/resources.cljs index 1dac931..73b6e65 100644 --- a/packages/frontend/src/main/screen/resources.cljs +++ b/packages/frontend/src/main/screen/resources.cljs @@ -6,7 +6,7 @@ (defn section-header [title] [:> rn/View - [:> rn/Text {:style {:fontWeight :bold + [:> rn/Text {:style {:fontWeight "bold" :color "#2A4E4C" :marginTop 10 :marginBottom 10 @@ -16,17 +16,17 @@ (defn telegram-card [title text img bg-color linkurl] [:> rn/Pressable {:style {:backgroundColor bg-color :flex 1 - :justifyContent :center - :flexDirection :row + :justifyContent "center" + :flexDirection "row" :marginBottom 10} :onPress #(rn/Linking.openURL linkurl)} [:> rn/View {:style {:margin 10 :flex 2}} [:> rn/Image {:source img}]] [:> rn/View {:style {:flex 3 - :flexDirection :column + :flexDirection "column" :margin 10 :maxHeight 137}} - [:> rn/Text {:style {:fontWeight :bold + [:> rn/Text {:style {:fontWeight "bold" :fontSize 16 :color "#2A4E4C" :marginBottom 10 @@ -36,8 +36,8 @@ [:> rn/Text ;{:style {:textAlign :justify}} text] [:> rn/View {:style {:flex 1 - :flexDirection :row-reverse - :position :relative}} + :flexDirection "row-reverse" + :position "relative"}} [:> FontAwesome5 {:name "telegram" :size 32 :style {:position "absolute" @@ -47,12 +47,12 @@ (defn resources-screen-inner [] [:> rn/ScrollView [:> rn/View {:style {:flex 1 - :alignItems :stretch + :alignItems "stretch" :marginTop "8vw" :paddingLeft 20 :paddingRight 20}} ; also modified from home.cljs [:> rn/Text {:style {:fontSize 24 - :fontWeight :bold + :fontWeight "bold" :color "#2A4E4C" :marginBottom "5vw"}} "Stay updated with us" ] diff --git a/packages/frontend/src/main/screen/sos.cljs b/packages/frontend/src/main/screen/sos.cljs index f3f4a43..b1518e9 100644 --- a/packages/frontend/src/main/screen/sos.cljs +++ b/packages/frontend/src/main/screen/sos.cljs @@ -6,9 +6,9 @@ ["@expo/vector-icons" :refer [FontAwesome5]])) (defn prominent-dialer [] - [:> rn/View {:style {:alignItems :center}} - [:> rn/View {:style {:alignItems :center - :justifyContent :center + [:> rn/View {:style {:alignItems "center"}} + [:> rn/View {:style {:alignItems "center" + :justifyContent "center" :padding 15 :maxWidth 500}} [:> rn/Text {:style {:fontSize 24}} "You are not alone."] @@ -19,9 +19,7 @@ :backgroundColor "#FCEDD0" :margin 20 :padding 15 - :width "90vw" - :height "90vw" - :maxWidth 200 + :maxWidth 300 :maxHeight 200} :onPress #(rn/Linking.openURL "tel:1767") :accessibilityRole :button @@ -36,19 +34,19 @@ :padding 10 :height "100%" :width "100%" - :justifyContent :center - :alignItems :center}} - [:> rn/Text {:style {:color :white - :textAlign :center + :justifyContent "center" + :alignItems "center"}} + [:> rn/Text {:style {:color "white" + :textAlign "center" :fontSize 30 - :fontWeight :bold}} + :fontWeight "bold"}} "SOS"] - [:> rn/Text {:style {:color :white - :textAlign :center + [:> rn/Text {:style {:color "white" + :textAlign "center" :fontSize 14}} "Samaritans of Singapore"] - [:> rn/Text {:style {:color :white - :textAlign :center + [:> rn/Text {:style {:color "white" + :textAlign "center" :fontSize 14}} "Helpline 1767"]]]] [:> rn/Text {:style {:color "#a5a5a5" diff --git a/packages/frontend/tsconfig.json b/packages/frontend/tsconfig.json new file mode 100644 index 0000000..0e6371f --- /dev/null +++ b/packages/frontend/tsconfig.json @@ -0,0 +1,4 @@ +{ + "compilerOptions": {}, + "extends": "expo/tsconfig.base" +}