A repo for issues and discussions for CommunityFocus
CommunityFocus is a sharable time tracking app for teams.
TypeScript, React, Web Sockets, MongoDB, Node.js, Express.js
npm install on each to install dependenciesnpm run dev on each to run the server
Describe the bug
The timestamp state on the client side needs to be type number instead of string so we can run any math as needed.
When pasting a link on discord/slack/other services, the preview that shows up needs to be customized
Example: https://vulture.nmpereira.com/
Apps to add meta tags to:
On the homepage "/", create a button to route the user to a room. A room would be "/:room".
When the user clicks on the "Start a timer" button, they get re-routed to a room. The room name (string) is generated on the server when sending a request to "/randomid" (this route does not exist yet). On the server, "/randomid" generates a random string (this will be improved in #18)
Jest 28+ requires dependency jest-environment-jsdom to be installed separately in order to use testEnvironment: "jsdom". The frontend is missing this dependency.
Add a input box on the Landing page so that the user can input their own custom timer name.
There should be a button next to the input box that redirects the user to that room.
For example: User inputs abc, clicking the button should redirect the user to https://url/abc
Backend currently contains two issue templates:
Should we also include these templates (or similar ones) in the frontend as well?
The header component (which will be created in #45) needs a component to display the message "Hi, NAME!", where NAME is the user's name. Since we do not have username functionality implemented yet, you can use a placeholder of "NAME" for the user's name.
Please reference the Figma design at https://www.figma.com/file/aOxY6JeMesN7fq72tZsbD9/Untitled?type=design&t=ojy9KXiE1A3V8cHZ-0 for an idea of how this component will look (design subject to change). This component is located in the upper-right corner in the green header bar.
<WelcomeMessage />
// result
<span>Hello, NAME!</span>When user adds a custom timer name (and username), check that the input supports only valid strings. Unsupported/non strings/weird chars should not be allowed.
Blocker: #32
Create a parent component that will encase the timestamp, controls etc in the center of the screen. Make sure the timestamp/controls are centered at all breakpoints.
TailwindCSS - 🎉
React Styled components - 🚀
This will be the footer component that will contain the MembersUsingMessage component (#46). This issue depends on the MembersUsingMessage comopnent being completed first, so this cannot be done until that issue is complete.
Please reference the Figma design at https://www.figma.com/file/aOxY6JeMesN7fq72tZsbD9/Untitled?type=design&t=ojy9KXiE1A3V8cHZ-0 for an idea of how this component will look (design subject to change). This component is located at the bottom of the screen.
<Footer/>
// result
<footer>
<MembersUsingMessage />
</footer>Create the styled component(s) and styling for the footer component (#47) and its child components (MembersUsingMessage). This issue depends on #47 being finished, so this cannot be done until that issue is complete.
Please reference the Figma design at https://www.figma.com/file/aOxY6JeMesN7fq72tZsbD9/Untitled?type=design&t=ojy9KXiE1A3V8cHZ-0 for an idea of how this component will look (design subject to change). This component is located at bottom top of the screen.
Chrome puts tabs to sleep when inactive for a while. Since this is a timer app, we should make sure the tab doesnt go inactive after a while of inactivity.
Look into how this works and if its possible to whitelist our app/add instructions on how to
When a user clicks on the share timer button, it creates multiple span tags that are appended. When a user clicks it multiple times quickly, multiple spans show up.
Expected: It should show only once
Add a jest unit test if possible
Add background color to the app. The design has a green color https://www.figma.com/file/aOxY6JeMesN7fq72tZsbD9/Untitled?type=design&node-id=0-1
The connect code has the connection manager buttons ('connect', 'disconnect'). These buttons and any related code needs to be removed
NOTE: do not remove the ability for the browser to open and connect to the websocket connection. Only remove the buttons and any related unneeded code
Home Page text should be centered and should say "Community Focus" with the join room button under it.
We use https://styled-components.com/ for CSS. You can create a styled component in a file with file name <FILE_NAME>.styled.tsx and then import that component into the <FILE_NAME>.tsx.
Add some basic functionality to the timer as follows
When the timer hits 00:00:00, play an audio file (end timer sound) on all connected clients
Add ability to pause/unpause timer.
There will be only 1 button that toggled between pause and resume.
When a user clicks pause, the UI and the timer changes for all connected clients. When a user clicks pause, more options are shown (resume, reset, stop)
The server ticks down but doesnt send a timestamps every second. The client emits a timerRequest when user joins the room or on connection, to which the server responds to the client with the timerResponse with the secondsRemaining, which the client uses to start a local timer.
When pausing, both the client and the server need to pause.
pauseCountdown event,pauseCountdown event to pause the timer on the servertimerResponse to all clients so they can all pausetimerResponse event, it will pause the countdown locallyAdd one more test of 'Should not run setTimeout' in shareRoom.test.ts
When running the repos locally, make it so that the frontend can run without having the backend connected
One of the issues currently is that the join room button needs a server response in order to run.
Add tsconfig.development.json which will extend tsconfig.json and enable source maps. Source maps should stay disabled in production (default setting), but be enabled in development. This will also change the package.json so that npm run dev will call tsc with the flag --project tsconfig.development.json.
Note: This is only needed for the backend. Frontend debugging attaches to the browser and does not require source maps.
Source maps needs to be enabled to enable debugging features such as setting breakpoints. It creates a .map.js file for every .js file inside of the dist folder and makes it possible to debug Typescript files. Since it creates a .map.js file for ever .ts file, we don't want this enabled during production, only during development.
While we could just use console.log, eventually the project will become large and complicated enough that it would be better to use IDE debugging features to efficiently debug issues. And by enabling source maps, this will allow us to use debugging features in VSCode / nvim / whatever environment you use that supports debugging.
Add a share timer button that adds the entire URL to the user's clipboard
Currently, the socket sends the updateTimer message every second and the client updates the timestamp based on the socket message.
One of the problems with this approach is that if a user gets timed out (lost internet connection) but doesn't close the browser, the app doesn't run the timer, and the user isn't notified of the end of the timer.
Instead, we can use the server as the source of truth, but run a timer on the client instead. The server still updates the client from time to time, on pause, on resume, on stop etc
Add a reset timer button.
If the user clicked on a countdown of 60 seconds [60,59,58,57...], when ticking down [54,53,52,51,50,49....], if a user clicks on 'reset', the timer will be reset to 60 seconds [60,59,58,57...]
The server ticks down but doesn't send a timestamps every second. The client emits a timerRequest when user joins the room or on connection, to which the server responds to the client with the timerResponse with the secondsRemaining, which the client uses to start a local timer.
The restartCountdown event will be very similar to startCountdown but it will restart the timer that was originally picked
When resetting the timer, both the client and the server need to reset.
restartCountdown event,restartCountdown event to restart the timer on the server based on the originally picked timetimerResponse to all clients so they can all start/restarttimerResponse event, it will start the timer locallyThought it was a cool idea to add a clock that's set to the local regional time on the main page to view along with the timer as you work together in a group with other individuals!
The frontend code has a major bug that causes timers to continue past 0 and count down into negative values.
Add functionality for a user to add their name on to the timer. This will be reflected on the top right as "Hi, Mario!" and also on the update logs like "Mario changed the timer", "Mario Paused the timer" etc.
This also includes the user input like the modal, adding and reading the name from local storage.
This issue will not involve anything on the backend. This will be purely frontend. There will be another ticket for backend functionality.
Convert the timestamp from seconds to HH:MM:SS
Create a reusable function that converts seconds into HH:MM:SS.
Cases:
When creating a new timer, user can do one of 2 things for the name of the timer (eg: www.timer.com/love-item-poppy). Pick/Type a custom name of their choosing OR use a generated one. This issue aims to generate random names based on the params below.
How this would would is, when the home page loads, the user will be given a prefilled textbox with a generated name. If they choose to overwrite the generated name, they can retype a custom name.
When a timer is created, the timerStore object on the server stores the roomName, timer instance (setTimeout), list of connected users, and the destroyTimer instance (setTimeout).
The destroyTimer acts as a way to purge the roomName and all its related properties when no one is using a timer. For example, when a user creates and uses room /test123, and leaves it after using it, the timer instance will continue to tick down, until the destroyTimer deletes the roomName. This is done so that memory, computing power etc dont get added up by ununsed timers.
Currently, the destroyTimer count is set to 10 seconds. We can update this value to 2 mins, to allow users to join if disconnected unintentionally.
The backend code (https://github.com/CommunityFocus/cf-backend) is currently written in JS. It uses Express and Socketio as some of the major components.
For the sake of better code quality, we should convert the JS to TypeScript and add types to the existing code.
This will be the header component that will contain the Logo (#44) and WelcomeMessage (#43) components along the top of the page. This issue depends on those two issues being finished, so this cannot be done until those issues are complete.
Please reference the Figma design at https://www.figma.com/file/aOxY6JeMesN7fq72tZsbD9/Untitled?type=design&t=ojy9KXiE1A3V8cHZ-0 for an idea of how this component will look (design subject to change). This component is located at the top of the screen.
<Header />
// result
<div>
<Logo />
<WelcomeMessage />
</div>The header component (which will be created in #45) needs a component to display the CommunityFocus logo.
Please reference the Figma design at https://www.figma.com/file/aOxY6JeMesN7fq72tZsbD9/Untitled?type=design&t=ojy9KXiE1A3V8cHZ-0 for an idea of how this component will look (design subject to change). This component is located in the upper-left corner in the green header bar.
<Logo />
// result
<img src="..." alt="CommunityFocus Logo" />Create the styled component(s) and styling for the header component (#45) and its child components (Logo and WelcomeMessage). This issue depends on #45 being finished, so this cannot be done until that issue is complete.
Please reference the Figma design at https://www.figma.com/file/aOxY6JeMesN7fq72tZsbD9/Untitled?type=design&t=ojy9KXiE1A3V8cHZ-0 for an idea of how this component will look (design subject to change). This component is located at the top of the screen.
The code that says state: true /false needs to be removed, along with any related unnecessary code
Instead of removing the state, we can rename it to 'Connected: 
' or 'Lost connection: 
'
When the timer is running, the title should show the timestamp, like '00:00' or '03:59' or '02:59:59'
When a timer is not running, the title should say 'CommunityFocus' (Home page)
Create a button component that will contain preset timer values such as 5, 10, 15, 20 ... up to 55. The purpose of this component will be to populate the timer with a preset value, rather than having to enter a number in a text box.
// Creates a button element that shows the value "20"
<TimerButton amount={20} />
// result
<button type="button" value="20">20</button>The footer component (which will be created in #47) needs a component to display how many members are currently using the app. Since we do not have user functionality implemented yet, you can use a placeholder number for the number of members using the app.
Please reference the Figma design at https://www.figma.com/file/aOxY6JeMesN7fq72tZsbD9/Untitled?type=design&t=ojy9KXiE1A3V8cHZ-0 for an idea of how this component will look (design subject to change). This component is located in the bottom of the page (see the pages on the right-most side of the Figma file).
<MembersUsingMessage />
// result
<span>125 members use the Community Focus app</span>On the homepage /, it should say "x users are using the app right now!" or some similar wording.
In a room /test123, it should say "Users connected to this timer: x" (this should already have been done, it just needs a text change)
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.