Daily Calendar View (frontend)

[owenchen04]

branch name: daily-calendar-view

Hi Brandon and Tanvi! On this ticket, we're going to start putting together some of our previously completed components and implement the frontend for the daily calendar view (for now, only focus on the daily view. Do not worry about monthly or weekly). Here is the design from the Figma page:

Task:

• As a reminder, make sure you switch to master and pull from origin master before making your new branch and starting your work. This is especially important as you'll need the latest implementation of the meeting blocks (described below) for your task.
• Open up frontend/app/components/atoms/BoxText/index.tsx. Use this implementation for the colorful blocks you see displayed on the dashboard. You should be able to utilize this atom for both types of blocks you see: the simple blocks on the left to indicate the room/zoom account, and the more complex blocks that represent the individual meetings themselves. The simple blocks should always be there (hardcode them into the component), while the individual meeting blocks will be dynamically rendered.
• Create two files: /frontend/app/components/molecules/DailyViewRow/index.tsx and /frontend/app/components/organisms/DailyView/index.tsx.
• Inside of DailyView/index.tsx, you'll want to create the layout for the overall view, including the background grid with all of the horizontal/vertical lines and the time labels along the top. This shouldn't require any complex props. After implementing DailyViewRow/index.tsx (described below), you'll want to render every row of the dashboard inside of this component (one for each room/zoom account).
• Inside of DailyViewRow/index.tsx, you'll want to implement a generic row of the component (for example, the row for the "Serenity Room"). This will be a bit trickier, and require some clever positioning in CSS. For example, you might want to decide on a constant pixel-width that one hour or minute should take up. Then, depending on the time prop that is passed into your meeting block, you can have a function that calculates the exact offset in pixels that the block should be positioned at in order to line up properly with the time labels at the top. Below is an example implementation from ChatGPT to show what I'm talking about; you can use this as inspiration, but please do not copy and paste this directly into your code (it won't work, as it's just a generic example). Note that you might have to create some kind of "wrapper" component for the meeting blocks in order to have the dynamic styling/positioning work.
• Within DailyView/index.tsx, you should also implement the vertical magenta-colored line which indicates the current time. You should retrieve the user's machine's time and utilize a similar offset-calculator function to determine where the vertical line should go.

import React from 'react';

function TimeBasedComponent({ time, children }) {
  // Define a constant for pixels per unit of "time" (customize as needed)
  const pixelsPerTimeUnit = 10;
  // Calculate the offset based on the "time" prop
  const offset = time * pixelsPerTimeUnit;

  return (
    <div
      style={{
        transform: `translateX(${offset}px)`,
        transition: 'transform 0.3s ease', // Optional: smooth transition when time changes
      }}
    >
      {children}
    </div>
  );
}

export default function App() {
  return (
    <div style={{ display: 'flex', overflow: 'hidden' }}> {/* Horizontal row */}
      <TimeBasedComponent time={1}>Component 1</TimeBasedComponent>
      <TimeBasedComponent time={2}>Component 2</TimeBasedComponent>
      <TimeBasedComponent time={3}>Component 3</TimeBasedComponent>
    </div>
  );
}

Testing:

• Testing is very important on this component, as we want all the meetings to be displayed/positioned properly.
• Inside of app/test/page.tsx, render your daily calendar view and populate it with some dummy meeting blocks. Experiment with different start/end times and make sure they all line-up properly. Keep this inside your commit when you make your PR.
• Attach a screenshot to your PR.