Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add timer settings #47

Merged
merged 7 commits into from
Jan 24, 2024
Merged

Add timer settings #47

merged 7 commits into from
Jan 24, 2024

Conversation

Evomatic
Copy link
Contributor

@Evomatic Evomatic commented Jan 23, 2024

Goal

Related issue: #23

We want users to have the ability to change the length of their designated pomodoro, short break, and long break timed sessions. This PR adds a module in the settings menu for doing just that.

How to test

  • Change the different time sessions and make sure the time updates and the circle properly ticks down according to the selected time.
  • Check the styling against the figma file. Make sure the layouts work for desktop and mobile.

Screenshots

mobile:
image

desktop:
image

Copy link

vercel bot commented Jan 23, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
pomodoro-app ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 24, 2024 8:26am

@Evomatic Evomatic marked this pull request as ready for review January 23, 2024 14:03
@Evomatic Evomatic requested a review from blue2wo January 23, 2024 14:05
Comment on lines 63 to 109

// import React, { useState } from 'react';

// interface PomodoroTimerData {
// minutes: number;
// seconds: number;
// }

// interface PomodoroTimerSettingsProps {
// onTimerChange: (updatedTimerData: PomodoroTimerData) => void;
// }

// const PomodoroTimerSettings: React.FC<PomodoroTimerSettingsProps> = ({ onTimerChange }) => {
// const [timerData, setTimerData] = useState<PomodoroTimerData>({ minutes: 25, seconds: 0 });

// const handleTimerChange = (callback: (prevSelectedTime: PomodoroTimerData) => Partial<PomodoroTimerData>) => {
// const updatedProperties = callback(timerData);
// setTimerData(prevTimerData => ({ ...prevTimerData, ...updatedProperties }));
// onTimerChange({ ...timerData, ...updatedProperties });
// };

// const handleMinutesChange = (event: React.ChangeEvent<HTMLInputElement>) => {
// const minutes = parseInt(event.target.value, 10) || 0;
// handleTimerChange(prevSelectedTime => ({ minutes }));
// };

// const handleSecondsChange = (event: React.ChangeEvent<HTMLInputElement>) => {
// const seconds = parseInt(event.target.value, 10) || 0;
// handleTimerChange(prevSelectedTime => ({ seconds }));
// };

// return (
// <div>
// <label>
// Minutes:
// <input type="number" value={timerData.minutes} onChange={handleMinutesChange} />
// </label>
// <br />
// <label>
// Seconds:
// <input type="number" value={timerData.seconds} onChange={handleSecondsChange} />
// </label>
// </div>
// );
// };

// export default PomodoroTimerSettings;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we needing this anymore?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@blue2wo oh nope! I will remove that

Copy link
Contributor

@blue2wo blue2wo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🌮 🦖

@Evomatic Evomatic merged commit 831a190 into main Jan 24, 2024
2 checks passed
@Evomatic Evomatic deleted the add-timer-settings branch January 24, 2024 09:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants