jacksonbates / pair-frontend

Front end for remote pair programming board - demo. Main development of project has transferred to https://github.com/pairboard/pairboard

This project has been deprecated.

See https://github.com/pairboard/pairboard for active development.

pair-frontend's Issues

Handle the unhandled Promise rejection thrown by the App.test.js

Currently, the only test we run is one that checks whether the app renders successfully.

You can do this by running npm run test at the terminal.

However, while the test passes, this warning is given:

(node:7502) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Network request failed

This is likely because the backend only accepts requests from the pairboard.surge.sh domain, and the test is probable coming form localhost.

So the first issue to solve is to handle the promise rejection. We may also need to rethink how the tests communicate with the backend - I'd like to hear thoughts on that...

Fix CSS for contents of user-cards on mobile

The 'user-cards' text can overflow and respond poorly to the current constraints of the CSS. See screenshot. Notice the (AEDT) behind the delete button on card 2...

These should be improved.

Improve language to describe 'preferred setup'

Similar to #3.

The language used to ask users to describe their preferred set up may be unclear.

The intention of this field is to get users to describe the tools they are best able to use on their system.

E.g. Do they wish to use ScreenHero and Skype, or does TeamViewer and Google Hangouts work better for them? Are they tmux wizards?

Please discuss your proposed language improvements below, and whoever gets assigned can make the appropriate change.

The form can be found on lines 49-72 in the Modal, in App.js in the src folder.

Changes may need to occur elsewhere - please discuss first.

Possible improvements include:

Clearer wording
Tool-tips / popovers
Placeholder examples

Remove the commented out module import from index.js

Oh, how embarrassing!

We deployed some commented out cruft in our noobish enthusiasm.

Right this wrong: remove line 5 from index.js in the src folder, commit your change, open the pull request and know that you are a better person than me!

Audio ping when new card is posted

A nice touch would be to have a simple audio notification when a new card is posted.

This would allow someone to have the tab open in the background and then hear when a new potential pair partner posts something immediately.

Users should not be able to delete other users' posts

At the moment the delete button naively allows anyone to delete any post.

Ideally, only the user that created the post should be allowed to delete a post.

In the longer term, we'll restructure the app so that users must be authenticated to allow use of the app (both posting and deleting).

A short term fix could be to use cookies to identify users and only allow the person with the matching cookie to see and use the delete buttons.

If you have other solutions or want to claim this one, comment below.

Can't type in the "Other" pairing tech option

Using Chrome Version 56.0.2924.18 dev

Needs to solve shrinkage of profile photos

After chosing all pairing technologies a shrinkage occurs on profile images and the delete button is sliding to left.

Improve language used to describe 'available time'

It is not entirely clear what a user should write to in the form for 'available time'

The intention is that people write, in hours and minutes, how long they currently have available to them for pair programming.

E.g. If a user has 3 hours, they should write 3:00. (Or 03:00 ideally, but the backend is smart enough to know they are the same thing).

Please discuss your proposed language improvements below, and whoever gets assigned can make the appropriate change.

The form can be found on lines 49-72 in the Modal, in App.js in the src folder.

Changes may need to occur elsewhere - please discuss first.

Possible improvements include:

• Clearer wording
• Tool-tips / popovers
• Placeholder examples

Remove the seconds from the time string on the noticeboard cards

When a user successfully adds a card to the noticeboard, the available time is rendered as HH:mm:ss

See:

The seconds part is unnecessary, the string only needs to show the remaining HH:mm (leaving the timezone information in tact).

Ideally, this problem can be solved without relying on an external library such as moment.js, but if there is a compelling reason for adding this dependency then please share it.

The time string can be found on lines 7 and 21 in Campers.js in the src folder. The value of this.props.camper.endTime which is used to create the state in this component is a time stamp in milliseconds, passed from the backend DB.

Create npm script for running local dev without DB

Rather than have contributors write node server/server.js to fire up the lightweight server without the DB, and NPM command would be better:

npm run dev or npm run dev-lite something like that...

Change the title of the html page

The app still has the boiler plate 'React App' as its title...how embarrassing!

It should say 'Pairboard', or something.

Change line 23 of index.html in the public folder to something more appropriate, commit your changes, open the pull request and celebrate your first real PR!

User card displays 'other' setup options incorrectly

I was playing with this on surge. I have wanted to try out zoom.us, so I put that in other. The card that is displayed shows: z, o, o, m, ., u, s. No idea why that field would have a split done on it, but that's kinda my suspicion.

The form modal needs a close button

Similar to #1

The form modal can currently be closed by tapping outside of the modal or pressing the Esc key.

While this is fine, it is a little unclear, and on mobile it can be tricky to tap outside of the modal.

The form model is on lines 49-72 of App.js in the src folder. It needs a button, and this button needs to be 'wired' up in the constructor part of the component (lines 9-28 of App.js).

Contributing.md needs to tell contributors how to clone their fork on to their system

:)

Improve the favicon

Currently the app uses the React favicon.

Let's change that! We have no logo to speak of, so share your ideas below. We should make the favicon for all devices, too.

Error in camper.js when null or undefined is passed to 'setup'

#36 Introduced a bug that can crash the app under certain circumstances.

If a user submits a post with a null or undefined 'setup' value, the react app can't render the page or allow new posts to be added.

@jenovs' codepen api request is the thing currently triggering the problem (don't click this unless you know how to use Postman to clean up after yourself :) ) http://codepen.io/jenovs/pen/pNWLmy?editors=0010

This should probably be fixed on the backend, but the frontend should handle these empty values to

Did server port change?

I can not create user cards at localhost:3000

Unlimited data can be entered in textboxes

Textbox data need to be limited

Can post as other people

Steps to reproduce:

1. click Add
2. type any active forum username in Forum username: textbox
3. fill out the rest and submit

How do we manage local development and production environments?

As a total noob, I don't know how to correctly organise this project so that it is easy for other people to work on it and test stuff locally.

If YOU know how to better organise this, comment below :)

Remove the redundant 'title' prop in index.js

As a younger man, a week younger to be precise, I foolishly left a silly title prop in my app component. Don't you hate it when your youthful indiscretions are so publicly visible in open source repos?

Please save my honour!

Remove the title prop from the app component on line 8 in index.js in the src folder, commit your change, open a pull request and let's never speak of this again.

Integrate continuous polling for DB data (Wish list!)

Possibly a way to solve #74

The app could quietly keep track of activity in the database and update the page in real time (or close enough to it).

So a user with the app open on their screen can see other users adding of deleting posts without the need to refresh.

Documentation needed for local development

The process for running and testing locally provides a couple of options for contributions.

These need to be thoroughly documented. I propose a separate file explaining the processes available, and this can be linked to in the CONTRIBUTING.md and eventually the README.md

Errors are ignored by the frontend

The backend routes send a variety of error messages. These are not handled or communicated by the frontend.

I'm thinking toasts...

If we implement that, some success toasts might be a nice touch too.

Improve the README.md

The current README.md is just the automatically generated one for all create-react-apps.

Discuss below what you think it should include, and we can start making it more relevant.

400 (Bad Request) trying to add card with "new" account?

I tried to add a card using my forum account.
It gave me a 400 in the console.
I've never made a post with the account but it is definitely on there.

enigmatic-dawn-95873.herokuapp.com/api/v1/posts:1 POST https://enigmatic-dawn-95873.herokuapp.com/api/v1/posts 400 (Bad Request)
App.js:125 Error: Request failed with status code 400
    at e.exports (http://pairboard.surge.sh/static/js/main.183da825.js:3:30962)
    at e.exports (http://pairboard.surge.sh/static/js/main.183da825.js:6:17222)
    at XMLHttpRequest.d.(anonymous function) (http://pairboard.surge.sh/static/js/main.183da825.js:3:29719)

Remove 'mock-data.json' from the repo

This is an easy fix and perfect for a first timer!

All you have to do is literally delete the mock-data.json file in the src folder, commit the change and make a pull request.

Discuss below :)

At least one pairing tech should be selected

It's odd to display a user card with no preferred pairing tech.

Remove logo.svg

Another casualty from the create-react-app genesis of this app...the logo.svg. It's gotta go.

Delete the file from the src folder, commit the change, open a pull request, and high-five the nearest sentient being. Don't let them leave you hanging - you earned it.

Update local config

Frontend:

• move server back to root;
• uncomment localhost in config.js;
• uncomment res.setHeader('Access-Control-Allow-Methods', 'GET, POST, DELETE'); in server.js.

Backend:
change port in backend config_template.json to 3001 (change it also locally in gitignored config.json);
lock down the backend server.

Remove the redundant CNAME file

To aid the deployment process via surge.sh, we have a CNAME file that remembers the URL. There also happens to be a rogue one.

Remove the CNAME file from the ROOT folder, not the public folder.

Repeat: Seek and destroy the imposter in the root folder - the public folder contains the one true CNAME file.

Succeed in your quest, commit the change, open the pull request, and dine out on this tale for the rest of your life.

Is the round trip to the backend 'Reacty' enough?!

Update

@jenovs has made some great progress with this. The delete button could use the same love as the main 'add' form (i.e. handle the change on the client side without bouncing off the pairboard domain).

Original question:

Noob React question:

The modal form users use to add their availability to the noticeboard uses the 'post' method. This posts to the backend api at https://enigmatic-dawn-95873.herokuapp.com/api/v1/add. The api handles this and sends a redirect back to the pairboard.surge.sh page. The delete button has a similar approach.

Is this the way you are supposed to do it in React, or should it use Ajax, or a different idiomatic React approach?

Discuss below, suggest fixes or volunteer to fix :)

User-cards are added incorrectly

On a desktop sized screen, cards should be presented in two columns and new cards are added from left to right.

Currently they do not do this:

Deleting post doesn't free its position

Deleting a post deletes it from the database on the server, but only hides it on the frontend. Its place stays hidden until the page is refreshed.

The Info modal needs a close button

The info modal can currently be closed by tapping outside of the modal or pressing the Esc key.

While this is fine, it is a little unclear, and on mobile it can be tricky to tap outside of the modal.

We need to change line 74 in App.js (in the src folder) from <Modal.Header> to <Modal.Header closeButton>

Can not create new user card

I tried to create new user card but the noticeboard page seems empty on localhost??

Fix CSS for 'user cards' position when below footer on mobile

On mobile, too many user cards makes it impossible to delete the lowest on screen - the delete button is obscured by the footer bar and cannot be scrolled past.

CSS issues

Some structural changes to the React components have introduced some subtle changes to the CSS.

On desktop, user-cards now appear to be horizontally connected rather than separated.

On mobile, there is some horizontal movement when swiping around (see header etc)

Contributing.md should include reference to Node and NPM

Update

Step by step instructions below! First timers only, please :)

Original post

The contributing.md needs to include Node, NPM and Mongo in the 'You will need section'

@planigan already did this in the backend repo, so you can steal his code, making this perfect for a first timer!

planigan/pair-backend@f14d5b5

Note: this should actually look the same as the backend version, so copying the other repo is required, it's not cheating!

Make the info modal text more relevant

The current info modal text was designed to merely explain the technology stack used and provide a little context for those viewing it after the challenge that inspired it.

It would be better to have clear and purposeful information about what the app is for, who it is for , and how to use it.

It should be much shorter and genuinely informative - not just conversational trivia.