App.js

import React, { useState } from "react";

import * as Font from "expo-font";
import { AppLoading } from "expo";
import { HomeStack } from "./routes/homeStack";
import { TimerSession } from "./screens/TimerSession/TimerSession";
import { WorkoutProvider } from "./Context/WorkoutContext";

const getFonts = () => {
  return Font.loadAsync({
    "nunito-regular": require("./assets/fonts/NunitoSans-Regular.ttf"),
    "nunito-semibold": require("./assets/fonts/NunitoSans-SemiBold.ttf"),
    "nunito-black": require("./assets/fonts/NunitoSans-Black.ttf"),
    "playfair-regular": require("./assets/fonts/PlayfairDisplay-Regular.ttf"),
    "playfair-semibold": require("./assets/fonts/PlayfairDisplay-SemiBold.ttf"),
    "playfair-black": require("./assets/fonts/PlayfairDisplay-Black.ttf"),
  });
};

export default function App() {
  // this waits for the font to be loaded before the components
  const [fontsLoaded, setFontsLoaded] = useState(false);
  const [workoutSettings, setWorkoutSettings] = useState([
    {
      key: "1",
      name: "Yoga Stretch",
      metadata: "Streak 15",
      duration: "5:30",
      exercise: "0:20",
      rest: "0:05",
      repeat: "10",
    },
    {
      key: "2",
      name: "HIIT Workout",
      metadata: "Streak 15",
      duration: "7:00",
      exercise: "0:20",
      rest: "0:05",
      repeat: "10",
    },
  ]);

  if (fontsLoaded) {
    return (
      <WorkoutProvider value={{ workoutSettings, setWorkoutSettings }}>
        <HomeStack />
      </WorkoutProvider>
    );
  } else {
    return (
      <AppLoading startAsync={getFonts} onFinish={() => setFontsLoaded(true)} />
    );
  }
}

ExcercisePicker.js

import React, { useState } from "react";
import { Text } from "react-native";
import NumberPlease from "react-native-number-please";
import moment from "moment";
import Tokens from "../Global/Tokens";
import styled from "styled-components";

const PickerContainer = styled.View`
  background-color: ${Tokens.color.snowWhite100};
  font-size: 20px;
`;

export default function ExcercisePicker(addWorkout) {
  // TODO - PASS SAVED SETTINGS TO UPDATE WORKOUT CONTEXT

  // INITIAL VALUES FOR EACH DROPDOWN
  const initialExcercise = [
    { id: "hr", value: 0 },
    { id: "min", value: 0 },
    { id: "sec", value: 0 },
  ];

  // WORKOUT STATE
  const [excerciseDetails, setExcerciseDetails] = useState(initialExcercise);

  // WORKOUT CONFIG FOR PICKER
  const excerciseConfig = [
    { id: "hr", label: "hr", min: 0, max: 23 },
    { id: "min", label: "min", min: 0, max: 59 },
    { id: "sec", label: "sec", min: 0, max: 59 },
  ];

  const onChange = (values) => {
    setExcerciseDetails(values);
  };

  // moment({}) IS BEING SET AS AN EMPTY OBJECT FOR A RESET OF THE CURRENT TIME.
  // https://stackoverflow.com/questions/32813903/convert-thousands-of-seconds-to-hmmss-in-moment-js
  const hour = excerciseDetails[0].value;
  const minute = excerciseDetails[1].value;
  const second = excerciseDetails[2].value;
  const momentHour = moment({}).hour(hour).format("HH");
  const momentMinute = moment({}).minute(minute).format("mm");
  const momentSecond = moment({}).seconds(second).format("ss");
  const momentDuration = `${momentHour}:${momentMinute}:${momentSecond}`;

  return (
    <PickerContainer addWorkout={() => addWorkout(momentDuration)}>
      <Text>
        {/* NOTE - REMOVE ONCE PICKER IS COMPLETED. ONLY USED TO DISPLAY VALUES */}
        Workout {momentDuration}
      </Text>
      <NumberPlease
        digits={excerciseConfig}
        values={excerciseDetails}
        onChange={onChange}
      />
    </PickerContainer>
  );
}

TimerDetails.js

import React, { useContext, useState } from "react";
import styled from "styled-components/native";

import { H1 } from "../../components/Global/Primitives";
import { StyledInput } from "../../components/Input/Input";
import { StyledRoundButton } from "../../components/RoundButton/RoundButton";
import { Feather, Entypo } from "@expo/vector-icons";
import Tokens from "../../components/Global/Tokens";
import { StyledDropdownButton } from "../../components/DropdownButton/DropdownButton";
import { StyledButton } from "../../components/Button/Button";
import { WorkoutContext } from "../../Context/WorkoutContext";
import ExcercisePicker from "../../components/Picker/ExcercisePicker";
import RestPicker from "../../components/Picker/RestPicker";
import RepeatPicker from "../../components/Picker/RepeatPicker";

const TimerDetailsContainer = styled.View`
  display: flex;
  flex: 1;
  background-color: ${Tokens.color.summerTime200};
  padding: 40px 20px 0;
`;

const DropdownContainer = styled.View`
  background-color: ${Tokens.color.blueMoon200};
  display: flex;
  justify-content: space-between;
  height: 30%;
`;

export const TimerDetails = ({ navigation, route }) => {
  // NAVIGATION PROPS
  const { name, duration, rest, exercise, repeat } = route.params;

  // GLOBAL WORKOUTSETTINGS STATE
  const { workoutSettings, setWorkoutSettings } = useContext(WorkoutContext);

  // TEXT INPUT STATE
  const [workoutName, setWorkoutName] = useState("");

  // GRABS TEXT VALUES FROM INPUT FIELD
  const changeHandler = (val) => {
    setWorkoutName(val);
  };

  // TODO - ADD LOCAL STORAGE

  // ADDS THE TEXT VALUE AND APPENDS THEM TO THE GLOBAL STATE
  const addWorkout = (momentDuration) => {
    setWorkoutSettings((prevWorkoutSettings) => {
      // console.log(momentDuration);
      return [
        { name: workoutName, duration: momentDuration },
        ...prevWorkoutSettings,
      ];
    });
  };

  return (
    <TimerDetailsContainer>
      <StyledRoundButton onPress={() => navigation.goBack()}>
        <Feather
          name="arrow-left"
          size={24}
          color={`${Tokens.color.blueMoon200}`}
        />
      </StyledRoundButton>
      <StyledButton
        primaryTextColor
        text="Save"
        size="small"
        onPress={addWorkout}
      />
      {/* TODO: DURATION NEEDS TO BE A CALCULATION OF EXCERCISE, REST, AND REPEAT SETTINGS */}
      <H1>{duration}</H1>
      <StyledInput
        addWorkout={addWorkout}
        changeHandler={changeHandler}
        workoutName={workoutName}
      />
      <StyledRoundButton
        primary
        tall
        wide
        onPress={() =>
          navigation.navigate("TimerSession", {
            duration: duration,
            name: name,
          })
        }
        // TODO - CREATE BUTTON MORPHING SVG ANIMATION
        // TODO - CREATE FUNCTION TO START TIMER
      >
        <Entypo
          name="controller-play"
          size={64}
          color={`${Tokens.color.snowWhite100}`}
          borderRadius={5}
        />
      </StyledRoundButton>
      <DropdownContainer>
        <StyledDropdownButton title="Excercise" value={exercise} />
        <StyledDropdownButton title="Rest" value={rest} />
        <StyledDropdownButton title="Repeat" value={`${repeat}x`} />
      </DropdownContainer>
      <ExcercisePicker addWorkout={addWorkout} />
      {/* <RestPicker /> */}
      {/* <RepeatPicker /> */}
    </TimerDetailsContainer>
  );
};