diljotsg/throne-web

A web application that lets you find, rate, and review washrooms in your vicinity.

Hello there! 👋

• I am a Software Developer looking to build cool things and work with awesome people! 🧪
• I love building software using Python (it's one of my favourite languages). 🐍
• If you're interested in working together, feel free to reach me via Email or connect with me on LinkedIn! 💻
• Fun fact: I am a huge MCU nerd. 🎥

throne-web's Issues

Display more washroom data on the 'Near Me' page

Depends on #47 (i.e. we should probably figure out what the ui looks like before we start building a bunch of stuff)

Description

Since /washrooms returns rich objects, populate the 'Near Me' list with more relevant data.

It doesn't necessarily have to be identical to iOS (since we haven't made UI mockups), but could be similar?

Maybe we should mockup what a list should look like first.

Relevant Screenshots

[MASTER] Washroom creation flow

Depends on #95

Master issue for implementing the flow to create a washroom. Please reference this issue with related PRs.

When creating a washroom, the following options need to be included:

• Gender
• Floor
• Title
• Amenities

Remove console log

Remove the console log introduced in #65

Retrieve washrooms

Retrieve the washrooms from https://api-dev.findmythrone.com/washrooms/ using an asynchronous redux action

Truncate star rating to 0.5 intervals

When displaying the Rate component, it supports .5 stars, but it doesn't automatically truncate the value, and doesn't correctly display a half star.

We need to round/truncate the rating to a multiple of 0.5.

This should be in a top level directory utils and file called RatingUtils (or something more general). This util should have no knowledge of anything. It should just take a float and convert

Anything from [0, 0.5) should be rounded to 0
Anything from [0.5, 1) should be rounded to 0.5

Fix washroomActions test

In order to get authentication merged in, we had to skip a test that was failing

Throne-Web/src/actions/__test__/washroomActions.test.js

Line 30 in de4a25a

it('creates FAILURE event when request fails', () => {

Since a 'failed' washroom request (code 401) causes the API handler (src/api/throneApi.js) to refresh the tokens, for some reason the refresh tokens API call is causing this test to fail.

Maybe find a way to mock the refresh tokens API call in the test, or modify it in such a way that it passes.

Add user washroom terminology

From the Settings page, allow a signed in user to set their washroom terminology preferences from a list as preferredTerm.

We can store this in local storage by doing something like this:

localStorage.setItem('preferredTerm', <term>)

List of washroom terminology to include:

john
crapper
latrine
washroom
bathroom
toilet
restroom
lavatory
powder room
comfort station
water closet
privy
loo
can

Change Web UI to Emphasize Building Title/Gender/Floor

Currently the Web UI when displaying washrooms emphasizes the Washroom Comment (AKA Additional Title). This should be changed to be more inline with the iOS App. The iOS App emphasizes the building title, the gender of the washroom and the floor before displaying the comment. This comment descriptor is intended to be used as an "additional explanation" to where the washroom is located.

Relevant screenshots:

UI Mockup for Washroom Detail View

Overview

Plan our UI for the washroom detail view (relevant iOS screenshot below)

Relevant Screenshots

List Buildings on the ‘NearMe’ page

Map should fill full screen

On mobile (and desktop too) there is lots of wasted space surrounding the map.

We should adjust the sizing of the map so it fills more of the screen.

Note: the map component gets drawn initially with width and height props, however remains at this size even when the page is resized.

i.e. width: 100% implies 100% width when the page loads, so the map size remains static, even if page resizes.

On mobile this shouldn’t be an issue, but we should have some sort of callback when the window is resized to redraw the map

Map does not resize with the browser

When resizing the browser the Map doesn’t scale automatically and requires a page refresh.

UI Mockup for 'Near Me' Page

Overview

We should plan what the 'Near Me' page will look like before we start building it.

For reference, iOS has already started with some information being displayed.

Relevant Screenshots

Washroom detail view

Depends on #48

Overview

When a user clicks on a washroom, they should be brought to a more detailed view of the washroom.

This might make sense to break into PRs to keep them small and manageable

• Handle clicking washrooms and navigating to a new page specific to a washroom
• Nice UI/component to display washroom

Login page background cut off

Background for the Login page is cut off and doesn't extend to the bottom of the browser window

Authentication Tokens don't automatically refresh

Issue

Sometimes when visiting the page for the first time after a while, the token needs to be refreshed. There's a button that does it manually, but it should be done automatically.

Where to look

API handler

This is where the API should refresh the tokens if it gets an 'unauthorized' response (i.e. expired tokens)

Throne-Web/src/api/throneApi.js

Lines 4 to 14 in 7a805ac

	static async getEndpoint(url) {
	const accessToken = localStorage.getItem('accessToken');
	let response = await this.getRequest(url, accessToken);
	if (response.status === 401) {
	await Auth.refreshLogin();
	response = await this.getRequest(url, accessToken);
	}
	return response;
	}

Auth service

The Auth service might have to be edited/looked at as well (src/services/Auth.js),

Throne-Web/src/services/Auth.js

Lines 38 to 52 in 7a805ac

	static async refreshLogin() {
	if (Auth.refreshAttempted) {
	Auth.logout();
	return;
	}
	const response = await Auth.refreshTokens();
	if (response.ok) {
	Auth.refreshAttempted = false;
	} else {
	Auth.refreshAttempted = false;
	Auth.logout();
	}
	}

Relevant screenshots

Before refreshing the tokens (we should never see 401 error)

After refreshing tokens

Add user authentication

Since all API requests must be made using a per-user auth token, implement a user system.

Each API call will have to include the user's auth token in the headers. Maybe there's a way to set the headers for all calls to fetch globally? Look into this

Washroom Details page does not load when directly linked

• When loading the washroom details page directly, you get a blank page.

Move ‘Settings’ and ‘Logout’ Nav items

‘settings’ and ‘logout’ should be a pop-over on the ‘profile’ Nav item

Display current location inside Map view

List User favourites in Profile view

Write API handler

Right now, we have a primitive handler in src/api called washroomApi to abstract away API calls for the reducers.

This could be a more generic api object......

Initial 'Map' page

The 'Map' page should display at least a placeholder map

• This will involve research to find the best map service and include it

Display washroom pins on the Map page

Initial functionality should place the pins on the map and some display information when clicking a pin.

Get real washroom/building distance data

Add map to washroom detail

Should be a little map on the washroom details page

Fetch a single building from the API

This will be similar to the flow created for fetching a single washroom (#76).

In order to keep the PR small and manageable, implement only the redux actions/reducer cases for fetching. (i.e. no front end) – similar to #87.

Display user information on Profile page

In the Profile component, lost some user information (Name, profile picture, list of preferences) for the currently signed in user.

Note: this issue does not encompass creating preferences/uploading profile pictures, simply to display the information in some way.

Incorrect tab in NearMe when navigating back from washroom details

When navigating back from WashroomDetailView the tab gets reset on the NearMe page.

When navigating back from a washroom, the washroom tab should be selected, and when navigating from a building, the building tab should be selected.

Web API Wrapper for ThroneAPI

Add building fetch from the API

Fix 404 on Page Refresh

Steps to Reproduce:

1. Visit https://dev.findmythrone.com/
2. Click on Map or Profile
3. Refresh the page

The problem is when we are in the midst of our react app and we refresh the page, we lose the context, so the browser is trying to fetch the contents at the URL: /profile but that isn't a file hosted by our web server.

Add copyright notice to every source file

See iOS project.

Create Login/sign up page

Currently, when an unauthenticated user views the app, they see this launch screen.

We should create a more visually appealing screen for this.

Right now, this content is conditionally rendered inside App.js, however could (and probably should) be housed in a separate component.

Review a washroom flow

Add the ability to leave a review on a washroom

Reviews should include

• a star rating ⭐️ for
  • cleanliness
  • privacy
  • paper quality
  • smell
• a general text comment

Change Cognito login to match new login page

Add Amenity Emojis to the DisplayUtils file

Copy and paste the emojis from the iOS repo.

Favourite a Washroom

Add functionality to favourite a washroom within the washroom detail view

Display building pins on the Map page

Initial functionality should include pins for the buildings and some level of information when clicking on the pin

Fix padding on mobile

Currently on mobile the padding is too high on the entire app.

We should fix the CSS selectors to make this fit better on mobile. Likely using a mixture of padding and max-width

Implement redux

Implement react-redux to better manage application state and events

Add washroom filter ability

Create tests for Login page

Fix keyError inside StarRating component

Currently getting an error when rendering the StarRating component - this should be fixed.

Building Detail Page

Build a component to display a building.

This should include

• the washrooms contained within building
• a map displaying building location

Create tests for Map Component

Map height doesn't adjust

#112 went in to fix map sizing on window resize, however it appears that the height of the map is not scaling with the window.

The bug is likely in this code:

Throne-Web/src/containers/Map.js

Lines 33 to 38 in 660297c

	handleResize = () => {
	let { viewport } = { ...this.state };
	viewport = { ...viewport, ...mapDimensions };
	this.setState({ viewport });
	}

As the width is getting updated in the resizeHandler, but the height is only being set on component mount.

Move inline CSS to individual files across project

Map page should display a user's current location

Description

On the 'Map' page, it should default to a user's current location.

Note: Safari will not allow current location to work over an insecure connection (HTTP) such as localhost:3000.

You can hack a way to force https:// locally, or use a different browser to test this functionality.

Create UI Mockups of the Web/iOS Applications