glimpse-GM-Timeline5

[JasonMun7]

Created Timeline component that displays the days of the week in a horizontal row, highlighting the current day.

Key Features:

• Displays days of the week in a horizontal timeline.
• Highlights the current day with a black background and white text.
• Uses current date integer as to calculate the index of the day within the week

Accessibility enhancements.

• Customization options for styles and days.
• View Previous Day Prompts

There was a slight change in the gitignore in order to prevent envs from being pushed.

[AndrewCheung360]

Awesome work Jason, the timeline component looks amazing!

I think the main thing that we might want to change is replacing the index number displayed in the circles with the actual date of the month which I think should be easily achievable with javascript's Date object.

Other than that, there's some minor CSS/design changes I highlighted in some other comments that you can choose to change or not.

Something to consider possibly in the future is to allow users to view previous prompts and responses of the week using the timeline by selecting the circle of a previous day in the week.

[AndrewCheung360]

Not sure if this will affect anything, but I think it's better to be safe than sorry: I see that the env file does not appear to be in the files changed which is good, but is it possible for you to delete the .env file from the commit history of this branch? I don't know if people might be able to see the contents of the env file by looking into the commit history of this branch.

[brandonysli]

Looks good!

[JasonMun7]

Ok I was able to go in and adjust those minor changes!

[AndrewCheung360]

Hi Jason, I see that you have made those changes with the actual dates being shown instead of the indices, which is great! I didn't check for the other days, but there might be an edge case for Sunday which causes the component logic to skip to the next week. eg. today is 7/14 but the component shows the dates of next week.

[AndrewCheung360]

The issue may potentially lie in todayIndex being -1 on Sunday, so firstDayOfWeek would result in today.getDate + 1

[AndrewCheung360]

const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const today = new Date();
const todayIndex = today.getDay()

This is a potential fix that would result in Sunday being the first day of the week, so it depends on which day we want to display as the first day of the week between Sunday or Monday

[AndrewCheung360]

// *Imports
import React from "react";
import { Text, View, StyleSheet } from "react-native";
import { LinearGradient } from 'expo-linear-gradient';
import MaskedView from "@react-native-masked-view/masked-view";

// *Constants
const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
const today = new Date();
const todayIndex = today.getDay();

// *Start of the Timeline Function
export default function Timeline() {
  const firstDayOfWeek = new Date(today);
  firstDayOfWeek.setDate(today.getDate() - todayIndex);

  return (
    <View style={styles.container}>
      {days.map((day, index) => {
        const dayDate = new Date(firstDayOfWeek);
        dayDate.setDate(firstDayOfWeek.getDate() + index);
        const dateNumber = dayDate.getDate();

        return (
          <View key={index} style={styles.dayContainer}>
            <Text style={styles.dayText}>{day}</Text>
            <View
              style={[
                styles.circle,
                todayIndex === index && styles.activeBorder,
              ]}
            >
              {todayIndex === index ? (
                <MaskedView
                  style={styles.maskedView}
                  maskElement={
                    <View style={styles.centerText}>
                      <Text style={styles.maskedText}>{dateNumber}</Text>
                    </View>
                  }
                >
                  <LinearGradient
                    colors={["#D372E5", "#5731D6"]}
                    start={{ x: 0, y: 0 }}
                    end={{ x: 1, y: 1 }}
                    style={styles.gradient}
                  />
                </MaskedView>
              ) : (
                <Text style={styles.defaultText}>{dateNumber}</Text>
              )}
            </View>
          </View>
        );
      })}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: "center",
    gap: 12,
    // justifyContent: "space-around",
  },
  dayContainer: {
    flexDirection: "column",
    alignItems: "center",
  },
  dayText: {
    marginBottom: 8,
    fontWeight: "600",
  },
  circle: {
    width: 40,
    height: 40,
    borderRadius: 20,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "white",
    shadowColor: "#gray",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 2,
  },
  activeBorder: {
    borderWidth: 2,
    borderColor: "#5731D6",
  },
  maskedView: {
    width: "100%",
    height: "100%",
    alignItems: "center",
    justifyContent: "center",
  },
  gradient: {
    width: 40,
    height: 40,
  },
  centerText: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  maskedText: {
    fontSize: 16,
    fontWeight: "bold",
    textAlign: "center",
    color: "black",
  },
  defaultText: {
    fontSize: 16,
    fontWeight: "bold",
    textAlign: "center",
    color: "black",
  },
});

I found something called MaskedView, which would allow us to have gradient text. For the border, you could probably just add a linear gradient circle behind the selected circle. Here's some example code for the timeline with just the text change. Not sure if you still want to pursue gradient colored text, but it might be worth looking into if we ever have gradient text components/UI in the future.

[AndrewCheung360]

I just noticed that there does seem to be some sort of thing where the circle becomes transparent for the selected day in the little code snippet I pasted, but hopefully when actually used, we could try to fix that

[AndrewCheung360]

Not sure if this is included in the component feature, but thinking ahead, we could potentially have a selected state and onSelectedStateChange being passed with the default state being that which corresponds to the current date, but when the user clicks into a previous bubble, they would select a new day which would allow them to view the previous feeds.

[AndrewCheung360]

The component looks and works great! I didn't have anything I saw that needed fixing, but I just placed some comments about some things we could think about in the future.