update

ios/Podfile

@@ -5,6 +5,7 @@ require_relative '../node_modules/react-native-permissions/scripts/setup'
 
 platform :ios, '13.0'
 install! 'cocoapods', :deterministic_uuids => false
+use_modular_headers!
 
 setup_permissions([
   'LocationAccuracy',

src/components/input/PickerViews.tsx

@@ -24,10 +24,10 @@ const Component = forwardRef((props: {
     function onPickerChange(e) {
         setV(e.detail.value)
         // detailValue = e.detail.value
-        // if (props.showBtns) {
-        //     return;
-        // }
-        // props.onChange(e.detail.value)
+        if (props.showBtns) {
+            return;
+        }
+        props.onChange(e.detail.value)
     }
 
     function alphaToHex(alpha) {

src/pages/clock/ChooseScenario.scss

@@ -3,6 +3,8 @@
     margin: 46px;
     padding: 40px;
     border-radius: 20px;
+    background-color: #1c1c1c;
+    color: #fff;
 }
 
 .item_sel1{
@@ -13,6 +15,8 @@
     padding: 40px;
     border-radius: 24px;
     box-sizing: border-box;
+    background-color: #1c1c1c;
+    color: #fff;
 }
 
 .target_title{
@@ -33,4 +37,13 @@
     font-size: 36px;
     line-height: 48px;
     opacity: 0.4;
+}
+
+.suggest_footer{
+    color: #fff;
+    opacity: 0.4;
+    margin-left: 46px;
+    font-size: 20px;
+    margin-top: 24px;
+    letter-spacing: 0;
 }

src/pages/clock/ChooseScenario.tsx

@@ -1,25 +1,58 @@
 import { Text, View } from "@tarojs/components";
 import './ChooseScenario.scss';
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { ChooseScenarioBtn } from "@/features/common/SpecBtns";
 import { ColorType } from "@/context/themes/color";
 import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
+import { getPlans } from "@/services/trackTimeDuration";
+import { chooseMode, initTarget, updateStep } from "@/store/set_target";
+import { useDispatch } from "react-redux";
+import { useDidShow } from "@tarojs/taro";
+import { TimeFormatter } from "@/utils/time_format";
 
 export default function ChooseScenario() {
     const [selected, setSelected] = useState(0);
+    const dispatch = useDispatch();
 
+    useEffect(() => {
+        getPlans().then(res => {
+            const data = res as { scenarios: any[] };
+            console.log(data)
+            var targets: any = {}
+            data.scenarios.forEach((item) => {
+                if (item.name == 'FAST') {
+                    targets.fast = item
+                }
+                else if (item.name == 'SLEEP') {
+                    targets.sleep = item
+                }
+            })
+            dispatch(initTarget(targets))
+            // Taro.setStorage({ key: 'scenarios', data: JSON.stringify(data.scenarios as any) })
+            // setScenarios(data.scenarios)
+        })
+    }, [])
+
+    useDidShow(() => {
+        dispatch(updateStep({ step: 0 }))
+    })
+
+    
 
     function goSuggestion() {
-        var navigation:any = null
+        var navigation: any = null
         if (process.env.TARO_ENV === 'rn') {
             var useNavigation = require("@react-navigation/native").useNavigation
             navigation = useNavigation()
         }
-        jumpPage(`/pages/clock/Suggest?isMixed=${selected==1?1:0}&isActionPlan=1&isFast=1`,'Suggest',navigation,{
-            isMixed: selected == 1?1:0,
-            isFast:1,
-            isActionPlan:1
-        })
+        dispatch(updateStep({ step: 0 }))
+        jumpPage(`/pages/clock/Suggest`, 'Suggest', navigation, {})
+    }
+
+    function chooseType(index: number) {
+        setSelected(index)
+        
+        dispatch(chooseMode({ isMixed: index == 1 }))
     }
 
     return <View style={{
@@ -28,8 +61,8 @@ export default function ChooseScenario() {
         <Text className="target_title">Choose Area of Focus For Your Circadian Health</Text>
         <Text className="target_desc">Circadian clock is key to your health. And your acts of fasting and sleep will affect your circadian health in powerful ways.</Text>
 
-        <View className={selected == 0 ? 'item_sel1' : 'item1'} onClick={() => setSelected(0)}>Fasting</View>
-        <View className={selected == 1 ? 'item_sel1' : 'item1'} onClick={() => setSelected(1)}>Fasting with Sleep</View>
+        <View className={selected == 0 ? 'item_sel1' : 'item1'} onClick={() => chooseType(0)}>Fasting</View>
+        <View className={selected == 1 ? 'item_sel1' : 'item1'} onClick={() => chooseType(1)}>Fasting with Sleep</View>
         <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
             <ChooseScenarioBtn
                 onClick={goSuggestion}

src/pages/clock/SetGoal.tsx

@@ -1,5 +1,142 @@
-import { View } from "@tarojs/components";
+import { View, Text, Image } from "@tarojs/components";
+import './ChooseScenario.scss'
+import { useRouter } from "@tarojs/taro";
+import { rpxToPx } from "@/utils/tools";
+import { ColorType } from "@/context/themes/color";
+import Footer from "@/components/layout/Footer";
+import { ChooseScenarioBtn, SetScheduleBtn } from "@/features/common/SpecBtns";
+import { useSelector } from "react-redux";
+import { useEffect, useState } from "react";
 
-export default function SetGoal(){
-    return <View></View>
+export default function SetGoal() {
+    let router
+    var navigation: any = null
+    if (process.env.TARO_ENV === 'rn') {
+        var useNavigation = require("@react-navigation/native").useNavigation
+        navigation = useNavigation()
+        const useRoute = require("@react-navigation/native").useRoute
+        router = useRoute()
+    }
+    else {
+        router = useRouter()
+    }
+    const isSelf = router.params.isSelf
+    const target = useSelector((state: any) => state.target);
+    const [fastDuration, setFastDuration] = useState<any>(0)
+    const [sleepDuration, setSleepDuration] = useState<any>(0)
+    const [fastTarget, setFastTarget] = useState(target.fast.schedule.fast)
+    const [sleepTarget, setSleepTarget] = useState(target.sleep.schedule.sleep)
+
+    useEffect(() => {
+        getFastDuration()
+        getSleepDuration()
+    }, [])
+
+    function getFastDuration() {
+        var obj = target.fast.schedule.fast
+        var duration = obj.end_time.split(':')[0] * 60 + obj.end_time.split(':')[1] * 1 - (obj.start_time.split(':')[0] * 60 + obj.start_time.split(':')[1] * 1)
+        if (duration <= 0) {
+            duration += 24 * 60
+        }
+        var hours = Math.floor(duration / 60)
+        var minutes = duration % 60
+        var str = hours + ' hours ' + minutes + ' minutes'
+        setFastDuration(str)
+    }
+
+    function getSleepDuration() {
+        var obj = target.sleep.schedule.sleep
+        var duration = obj.end_time.split(':')[0] * 60 + obj.end_time.split(':')[1] * 1 - (obj.start_time.split(':')[0] * 60 + obj.start_time.split(':')[1] * 1)
+        if (duration <= 0) {
+            duration += 24 * 60
+        }
+        var hours = Math.floor(duration / 60)
+        var minutes = duration % 60
+        var str = hours + ' hours ' + minutes + ' minutes'
+        setSleepDuration(str)
+    }
+
+    return <View style={{ display: 'flex', flexDirection: 'column' }}>
+        <Text className="target_title">{isSelf ? 'Set Action Plan' : 'Almost Done!'}</Text>
+        {
+            !isSelf && <Text className="target_desc">Review goal and action plan</Text>
+        }
+
+        <View style={{ color: '#fff', marginTop: rpxToPx(64) }}>
+            <View className="cell_bg" style={{ padding: 0 }}>
+                <View className="cell_full" style={{
+                    marginLeft: rpxToPx(46),
+                    marginRight: rpxToPx(46),
+                    paddingLeft: rpxToPx(40),
+                    paddingRight: rpxToPx(40),
+                    margin: 0
+                }} onClick={() => { }}>
+                    <Text className="cell_title">Fasting</Text>
+                    <Text className="cell_value" style={{ color: ColorType.fast }}>{fastDuration}</Text>
+                </View>
+                {
+                    target.isMixed && <View className="cell_full" style={{
+                        marginLeft: rpxToPx(46),
+                        marginRight: rpxToPx(46),
+                        paddingLeft: rpxToPx(40),
+                        paddingRight: rpxToPx(40),
+                        margin: 0
+                    }} onClick={() => { }}>
+                        <Text className="cell_title">Sleep</Text>
+                        <Text className="cell_value" style={{ color: ColorType.sleep }}>{sleepDuration}</Text>
+                    </View>
+                }
+            </View>
+
+
+            <View style={{ height: rpxToPx(60) }} />
+
+            <View className="cell_bg" style={{ padding: 0 }}>
+                <View className="cell_top" style={{ margin: 0 }} onClick={() => {
+                }}>
+                    <Text className="cell_title">Start fasting</Text>
+                    <Text className="cell_value" style={{ color: ColorType.fast }}>{fastTarget.start_time}</Text>
+                    <Image className="cell_arrow" src={require('@/assets/images/arrow3.png')} />
+                    <View className="cell_line" style={{ height: 1 }} />
+                </View>
+                {
+                    target.isMixed && <View className="cell_top" style={{ margin: 0 }} onClick={() => {
+                    }}>
+                        <Text className="cell_title">Go to bed</Text>
+                        <Text className="cell_value" style={{ color: ColorType.sleep }}>{sleepTarget.start_time}</Text>
+                        <Image className="cell_arrow" src={require('@/assets/images/arrow3.png')} />
+                        <View className="cell_line" style={{ height: 1 }} />
+                    </View>
+                }
+                {
+                    target.isMixed && <View className="cell_bottom" style={{ margin: 0 }} onClick={() => {
+                    }}>
+                        <Text className="cell_title">Wake up</Text>
+
+                        <Text className="cell_value" style={{ color: ColorType.sleep }}>{sleepTarget.end_time}</Text>
+                        <Image className="cell_arrow" src={require('@/assets/images/arrow3.png')} />
+                    </View>
+                }
+                <View className="cell_bottom" style={{ margin: 0 }} onClick={() => {
+                }}>
+                    <Text className="cell_title">End fasting</Text>
+
+                    <Text className="cell_value" style={{ color: ColorType.fast }}>{fastTarget.end_time}</Text>
+                    <Image className="cell_arrow" src={require('@/assets/images/arrow3.png')} />
+                </View>
+            </View>
+
+            <Text className="cell_footer">Feel free to modify your shedule as needed.</Text>
+        </View>
+
+        <View style={{ flex: 1 }} />
+
+        <Footer>
+            <ChooseScenarioBtn
+                onClick={() => { }}
+                title={parseInt(router.params.isActionPlan + '') == 1 ? 'Suggest Plan' : 'Next'}
+                background={ColorType.fast}
+            />
+        </Footer>
+    </View>
 }

src/pages/clock/Suggest.tsx

@@ -2,21 +2,22 @@ import { ColorType } from "@/context/themes/color";
 import { ChooseScenarioBtn } from "@/features/common/SpecBtns";
 import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
 import { View, Text, Picker } from "@tarojs/components";
-import { useRouter } from "@tarojs/taro";
-import { useEffect } from "react";
+import { useDidShow, useRouter } from "@tarojs/taro";
+import { useEffect, useState } from "react";
 import './ChooseScenario.scss';
 import PickerViews from "@/components/input/PickerViews";
-import { useSelector } from "react-redux";
-import { durationDatas } from "@/features/trackTimeDuration/hooks/Console";
+import { useDispatch, useSelector } from "react-redux";
+import { rpxToPx } from "@/utils/tools";
+import { updateFast, updateSleep, updateStep } from "@/store/set_target";
+import { TimeFormatter } from "@/utils/time_format";
+import { set } from "lodash";
 
 export default function Suggest() {
-    let router
+    let router: any = null
     var navigation: any = null
     if (process.env.TARO_ENV === 'rn') {
         var useNavigation = require("@react-navigation/native").useNavigation
         navigation = useNavigation()
-    }
-    if (process.env.TARO_ENV === 'rn') {
         const useRoute = require("@react-navigation/native").useRoute
         router = useRoute()
     }
@@ -24,123 +25,328 @@ export default function Suggest() {
         router = useRouter()
     }
 
-    const isMixed = parseInt(router.params.isMixed + '')
-    const isFast = parseInt(router.params.isFast + '')
-    const isActionPlan = parseInt(router.params.isActionPlan + '')
     const common = useSelector((state: any) => state.common);
+    const target = useSelector((state: any) => state.target);
+    const [pageStep] = useState(target.step);
+    const dispatch = useDispatch();
+
+    const [suggestIndex, setSuggestIndex] = useState(-1)
+    const [suggestItems, setSuggestItem] = useState<any>([])
 
 
     useEffect(() => {
-        console.log(router.params)
-    }, [])
+        // console.log(target.isFast)
 
-    function next() {
-        if (isMixed == 1) {
-            var url = '/pages/clock/Suggest?isMixed=1'
-            var pageName = 'Suggest'
-            var params: any = {
-                isMixed: 1
+        if (pageStep == 1) {
+            var obj = target.fast.schedule.fast
+            var duration = obj.end_time.split(':')[0] * 60 + obj.end_time.split(':')[1] * 1 - (obj.start_time.split(':')[0] * 60 + obj.start_time.split(':')[1] * 1)
+            if (duration <= 0) {
+                duration += 24 * 60
             }
-
-            if (isFast) {
-                if (isActionPlan) {
-                    url += '&isActionPlan=0&isFast=1'
-                    params.isActionPlan = 0
-                    params.isFast = 1
-                }
-                else {
-                    url += '&isActionPlan=1&isFast=0'
-                    params.isActionPlan = 1
-                    params.isFast = 0
+            var durationHours = Math.floor(duration / 60)
+            var durationMinutes = duration % 60
+            var currentIndex = -1;
+            var array: any = []
+            for (var i = 12; i <= 23; i++) {
+                if (i != 23 || durationMinutes == 0) {
+                    array.push({
+                        hours: i,
+                        minutes: durationMinutes
+                    });
                 }
             }
-            else {
-                if (isActionPlan) {
-                    url += '&isActionPlan=0&isFast=0'
-                    params.isActionPlan = 0
-                    params.isFast = 0
-                }
-                else {
-                    url = '/pages/clock/SetGoal?isMixed=1&isPlan=0'
-                    pageName = 'SetGoal'
+
+            for (var i = 0; i < array.length; i++) {
+                if (array[i].hours == durationHours && array[i].minutes == durationMinutes) {
+                    currentIndex = i
+                    break
                 }
             }
 
+            setSuggestItem(array)
+            setSuggestIndex(currentIndex)
+        }
+        else if (pageStep == 3) {
+            var obj = target.sleep.schedule.sleep
+            var sleep_cycle = obj.sleep_cycle
+            var sleep_latency = obj.sleep_latency.default_value
+            var array: any = []
+            for (var i = 0; i < sleep_cycle.numbers.length; i++) {
+                var count = sleep_cycle.numbers[i] * sleep_cycle.length + sleep_latency
+                array.push({
+                    hours: Math.floor(count / 60),
+                    minutes: count % 60
+                })
+            }
+            setSuggestItem(array)
+            setSuggestIndex(0)
+
+        }
+    }, [])
 
+    useDidShow(() => {
+        dispatch(updateStep({ step: pageStep }))
+    })
 
-            jumpPage(url, pageName, navigation, params)
-            return
+    function next() {
+        if (pageStep == 1) {
+            var item = suggestItems[suggestIndex]
+            var fast = JSON.parse(JSON.stringify(target.fast))
+            var startCount = fast.schedule.fast.end_time.split(':')[0] * 60 + fast.schedule.fast.end_time.split(':')[1] * 1 - (item.hours * 60 + item.minutes)
+            if (startCount < 0) {
+                startCount += 24 * 60
+            }
+            var start = TimeFormatter.padZero(Math.floor(startCount / 60)) + ':' + TimeFormatter.padZero(startCount % 60)
+            fast.schedule.fast.start_time = start
+            dispatch(updateFast({ fast: fast }))
         }
-        if (isActionPlan == 1) {
-            jumpPage(`/pages/clock/Suggest?isFast=${router.params.isFast}&isPlan=1&isMixed=0`, 'Suggest', navigation, {
-                isFast: router.params.isFast,
-                isPlan: 1,
-                isMixed: 0
-            })
-            return
+        else if (pageStep == 3){
+            var item = suggestItems[suggestIndex]
+            var sleep = JSON.parse(JSON.stringify(target.sleep))
+            var startCount = sleep.schedule.sleep.end_time.split(':')[0] * 60 + sleep.schedule.sleep.end_time.split(':')[1] * 1 - (item.hours * 60 + item.minutes)
+            if (startCount < 0) {
+                startCount += 24 * 60
+            }
+            var start = TimeFormatter.padZero(Math.floor(startCount / 60)) + ':' + TimeFormatter.padZero(startCount % 60)
+            sleep.schedule.sleep.start_time = start
+            dispatch(updateSleep({ sleep: sleep }))
         }
-        jumpPage(`/pages/clock/SetGoal?isFast=${router.params.isFast}&isActionPlan=0&isMixed=0`, 'SetGoal', navigation, {
-            isFast: router.params.isFast,
-            isActionPlan: 0,
-            isMixed: 0
-        })
+        var step: number = target.step + 1
+        dispatch(updateStep({ step: step }))
+
+        var url = '/pages/clock/Suggest'
+        var pageName = 'Suggest'
+        if (!target.isMixed) {
+            if (step == 2) {
+                url = '/pages/clock/SetGoal'
+                pageName = 'SetGoal'
+            }
+        }
+        else {
+            if (step == 4) {
+                url = '/pages/clock/SetGoal'
+                pageName = 'SetGoal'
+            }
+        }
+
+        jumpPage(url, pageName, navigation, {})
     }
 
     function myself() {
-        jumpPage(`/pages/clock/SetGoal?isMixed=${router.params.isMixed}&isPlan=0`, 'SetGoal', navigation, {
-            isMixed: router.params.isMixed,
-            isPlan: 0
+        jumpPage(`/pages/clock/SetGoal?isSelf=1`, 'SetGoal', navigation, {
+            isSelf: 1
         })
     }
 
     function suggestTitle() {
-        if (isFast) {
-            if (isActionPlan) {
+        switch (pageStep) {
+            case 0:
                 return 'Action Plan For Fasting'
-            }
-            return 'Choose Action Plan For Fasting'
+            case 1:
+                return 'Choose Action Plan For Fasting'
+            case 2:
+                return 'Action Plan For Sleep'
+            case 3:
+                return 'Choose Action Plan For Sleep'
+            default:
+                return ''
         }
-        if (isActionPlan) {
-            return 'Action Plan For Sleep'
-        }
-        return 'Choose Action Plan For Sleep'
     }
 
     function suggestDesc() {
-        if (isFast) {
-            if (isActionPlan) {
+        switch (pageStep) {
+            case 0:
                 return 'What time do you want to break your fast and start your breakfast?'
+            case 1:
+                return 'To benefit from overnight fasting and enjoy breakfast at 10:00 AM, start fasting at suggested time.'
+            case 2:
+                return 'What time do you want to wake up?'
+            case 3:
+                return 'To wake up refreshed at 7:00 AM, go to bed at suggested time.'
+            default:
+                return ''
+        }
+    }
+
+    function durationDatas() {
+        var min: number = 0
+        var max: number = 23
+        var step: number = 5
+
+        // if (common.duration) {
+        //     min = common.duration.min
+        //     max = common.duration.max
+        //     step = common.duration.step
+        // }
+        var minutes: string[] = []
+        for (let i = 0; i < 60; i += step) {
+            minutes.push(TimeFormatter.padZero(i))
+        }
+        var hours: string[] = []
+        for (let i = min; i <= max; i++) {
+            hours.push(TimeFormatter.padZero(i))
+        }
+        return [hours, minutes]
+    }
+
+
+
+    function durationValues() {
+
+        var eatTime = target.fast.schedule.fast.end_time
+        if (pageStep == 2) {
+            eatTime = target.sleep.schedule.sleep.end_time
+        }
+        var eatHour = eatTime.split(':')[0]
+        var eatMin = eatTime.split(':')[1]
+        var list = durationDatas()
+        var hourIndex = 0
+        var minIndex = 0
+        for (let i = 0; i < list[0].length; i++) {
+            if (list[0][i] == eatHour) {
+                hourIndex = i
+                break
             }
-            return 'To benefit from overnight fasting and enjoy breakfast at 10:00 AM, start fasting at suggested time.'
         }
-        if (isActionPlan) {
-            return 'What time do you want to wake up?'
+        for (let i = 0; i < list[1].length; i++) {
+            if (list[1][i] == eatMin) {
+                minIndex = i
+                break
+            }
         }
-        return 'To wake up refreshed at 7:00 AM, go to bed at suggested time.'
+        return [hourIndex, minIndex]
+
     }
 
-    function timePicker(){
-        return <View>
+    function sleepLatency() {
+        var obj = target.sleep.schedule.sleep.sleep_latency
+        var min: number = obj.min
+        var max: number = obj.max
+        var step: number = obj.step
+
+        var minutes: string[] = []
+        for (let i = min; i <= max; i += step) {
+            minutes.push(i + '')
+        }
+        return [minutes]
+    }
+
+    function sleepLatencyValue() {
+        var obj = target.sleep.schedule.sleep.sleep_latency
+        var value: number = obj.default_value
+        var min: number = obj.min
+        var step: number = obj.step
+        var index = (value - min) / step
+
+        return [index]
+    }
+
+    function timePickerChanged(e: any) {
+        var obj = target.fast.schedule.fast
+        if (pageStep == 2) {
+            obj = target.sleep.schedule.sleep
+        }
+
+        var duration = obj.end_time.split(':')[0] * 60 + obj.end_time.split(':')[1] * 1 - (obj.start_time.split(':')[0] * 60 + obj.start_time.split(':')[1] * 1)
+        if (duration <= 0) {
+            duration += 24 * 60
+        }
+
+        var endCount = duration - (e[0] * 60 + e[1] * 5)
+        if (endCount < 0) {
+            endCount += 24 * 60
+        }
+
+        var time = TimeFormatter.padZero(e[0]) + ':' + TimeFormatter.padZero(e[1] * 5)
+        var start = TimeFormatter.padZero(Math.floor(endCount / 60)) + ':' + TimeFormatter.padZero(endCount % 60)
+
+        if (pageStep == 0) {
+            var fast = JSON.parse(JSON.stringify(target.fast))
+            fast.schedule.fast.end_time = time
+            fast.schedule.fast.start_time = start
+            dispatch(updateFast({ fast: fast }))
+        }
+        else {
+            var sleep = JSON.parse(JSON.stringify(target.sleep))
+            sleep.schedule.sleep.end_time = time
+            fast.schedule.sleep.start_time = start
+            dispatch(updateSleep({ sleep: sleep }))
+        }
+    }
+
+    function timePicker() {
+        return <View style={{ marginTop: rpxToPx(56) }}>
             <PickerViews ref={null}
-            onChange={()=>{}}
-            items={durationDatas(common)}
-            value={[1,2]} height={200}
-            title=''
-            themeColor={isFast ? global.fastColor ? global.fastColor : ColorType.fast : global.sleepColor ? global.sleepColor : ColorType.sleep}
-            showBtns={false}
-            hideTitle={true}
-            onCancel={() => {  }} />
+                onChange={timePickerChanged}
+                items={durationDatas()}
+                value={durationValues()} height={200}
+                title=''
+                themeColor={target.isMixed ? global.fastColor ? global.fastColor : ColorType.fast : global.sleepColor ? global.sleepColor : ColorType.sleep}
+                showBtns={false}
+                hideTitle={true}
+                onCancel={() => { }} />
+            <Text className="suggest_footer">If you plan to skip breakfast, pick a time for your first meal of the day.</Text>
         </View>
     }
 
-    function durationPicker(){
-        return <View></View>
+    function fallSleepChanged(e: any) {
+        var value = target.sleep.schedule.sleep.sleep_latency
+        var time = e[0] * value.step + value.min
+        var sleep = JSON.parse(JSON.stringify(target.sleep))
+        sleep.schedule.sleep.sleep_latency.default_value = time
+        dispatch(updateSleep({ sleep: sleep }))
+    }
+
+    function fallSleepPicker() {
+        return <View style={{ marginTop: rpxToPx(56) }}>
+            <PickerViews ref={null}
+                onChange={fallSleepChanged}
+                items={sleepLatency()}
+                value={sleepLatencyValue()} height={200}
+                title=''
+                themeColor={target.isMixed ? global.fastColor ? global.fastColor : ColorType.fast : global.sleepColor ? global.sleepColor : ColorType.sleep}
+                showBtns={false}
+                hideTitle={true}
+                onCancel={() => { }} />
+            <Text className="suggest_footer">It takes 10 to 30 minutes for most people to fall asleep once they're in bed.</Text>
+        </View>
     }
 
-    function content(){
+
+
+    function suggestList() {
+        if (pageStep == 1) {
+            return <View>
+                {
+                    suggestItems.map((item: any, index: number) => {
+                        return <View onClick={() => {
+                            setSuggestIndex(index)
+                        }} key={index} className={index == suggestIndex ? 'item_sel1' : 'item1'}>{item.hours} hours {item.minutes} minutes</View>
+                    })
+                }
+            </View>
+        }
+        return <View>
+            {
+                suggestItems.map((item: any, index: number) => {
+                    return <View onClick={() => {
+                        setSuggestIndex(index)
+                    }} key={index} className={index == suggestIndex ? 'item_sel1' : 'item1'}>{item.hours} hours {item.minutes} minutes</View>
+                })
+            }
+        </View>
+    }
+
+    function content() {
         return <View >
             {
-                timePicker()
+                (pageStep == 0 || pageStep == 2) && timePicker()
+            }
+            {
+                (pageStep == 1 || pageStep == 3) && suggestList()
+            }
+            {
+                pageStep == 2 && fallSleepPicker()
             }
         </View>
     }
@@ -156,7 +362,7 @@ export default function Suggest() {
         <View style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
             <ChooseScenarioBtn
                 onClick={next}
-                title={parseInt(router.params.isActionPlan + '') == 1 ? 'Suggest Plan' : 'Next'}
+                title={pageStep == 0 || pageStep == 2 ? 'Suggest Plan' : 'Next'}
                 background={ColorType.fast}
             />
             <Text style={{ color: '#fff', opacity: 0.4 }} onClick={myself}>Set It Myself</Text>

src/store/set_target.tsx

@@ -0,0 +1,48 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+interface TargetState {
+    fast: any | null;
+    sleep: any | null;
+    isMixed: boolean | false;
+    step: number | 0;
+}
+
+
+// const initialState: UserState = await getUserDataFromLocalStorage();
+const initialState: TargetState = {
+    fast: null,
+    sleep: false,
+    isMixed: false,
+    step: 0,
+}
+
+const targetSlice = createSlice({
+    name: 'target',
+    initialState,
+    reducers: {
+        chooseMode(state, action: PayloadAction<any>) {
+            state.isMixed = action.payload.isMixed;
+        },
+        updateStep(state, action: PayloadAction<any>) {
+            state.step = action.payload.step;
+        },
+        initTarget(state, action: PayloadAction<any>) {
+            const { fast, sleep } = action.payload;
+            state.fast = fast;
+            state.sleep = sleep;
+        },
+        updateFast(state, action: PayloadAction<any>) {
+            const { fast } = action.payload;
+            state.fast = fast;
+        },
+        updateSleep(state, action: PayloadAction<any>) {
+            const { sleep } = action.payload;
+            state.sleep = sleep;
+        },
+
+    },
+});
+
+export const { chooseMode,updateStep, initTarget, updateFast, updateSleep } = targetSlice.actions;
+export default targetSlice.reducer;
+

src/store/store.tsx

@@ -11,6 +11,7 @@ import workoutReducer from './workout';
 import dayReducer from './day';
 import nightReducer from './night';
 import ringReducer from './ring';
+import targetReducer from './set_target';
 
 const store = configureStore({
   reducer: {
@@ -27,7 +28,8 @@ const store = configureStore({
     workout: workoutReducer,
     night: nightReducer,
     day: dayReducer,
-    ring: ringReducer
+    ring: ringReducer,
+    target: targetReducer,
   },
 });