shizuko-akamoto / trecipe Goto Github PK

Story Points: 2

There is flash of unstyled content on the Trecipe logo. To be addressed in the future

Steps to reproduce:

1. Go to My Trecipe page
2. Give all your attention to the Trecipe logo/font on the top left
3. Refresh the page

Result: The logo has a different font-family for a brief moment.
Expected: The font family of the logo should remain the same

The gif is slowed down to make it more obvious:

Scrum Update for Project Progress 3

• k7y0b
• c8y0b
• o1u1b
• z8c1b

• Full Report in #67

Story Point: 1

• Trecipe Card
• popup window
• add button
• context filters
• nav bar
• edit menu

Story Point: 3

Listing down some items that I didn't have time to address ¯\(ツ)/¯

To do list

1. (Bug) Refreshing the page on the Map or the Trecipe page will wipe all the destinations. To restore them, users will have to go back to My Trecipe page and reenter. Fixed in #94

2. (Bug) After adding a destination on the Trecipe page, the result drop down will close. No longer an issue

3. (Bug) On the map page, search for any place and click on them to add them to the destination cards list (there will be a tick to indicate that it has been added). Now click 'delete' on the destination card's menu. The result drop down on the search bar will still show the tick even though the destination is removed from the list Fixed by Shizuko

4. Long name and location do not bode well for the destination cards on the map page (rating bar shifted, checkmark is gone). Fixed, long name will not be truncated, rating bar will remain at the same location and checkmark is always displayed.
   

5. Update the static map's marker icon to match the markers on the map page Not possible :( Static map can contain up to 5 unique icons and we have 10 icons (5 categories and 2 colors), so we can either display completion status or categories. Currently displaying completion status

6. Update the search bar on header to use autocomplete service (check out the search bar on the map page) Addressed in search PR

7. check if google is initialized before using them. example: if(google) let map = new google.maps.map()

8. It is possible to add duplicate destination for now, might have to change this Fixed by Shizuko

9. Adding location bias on map search might be a good idea

10. scrollIntoView() is not smooth on google chrome

11. Add a legend for marker colors #87 Done

12. scrollIntoView() on destination add is not working because it is using place id while destination card is using uuid

Optionals

1. Check if there is any unnecessary re-render on map, and see if using pure component improve performance. If pure component is used, ensure markers on the map is updated when a destination is added/updated

2. Responsive design. Currently, when the user resizes the window, the map will shrink until destination cards are left. On mobile, only destinations cards are visible. Maybe we could create a mobile UI where the map is always located on the top and the bottom half are the destination cards.

3. Use async and await to improve readability.

4. Improve the way we load google map script. <LoadScript> is used to do lazy loading when we need any google map service. At the moment, we load the script once before loading any pages in between the header and footer. One improvement might be wrapping any elements that require google map service in <LoadScript>, but this requires multiple api keys. Since our header has search bar (it always requires google autocomplete service), another good idea might be loading the script in index.html, though this might slow down the page on the first load. Components that require map service:

   • Map & Search bar on the map page
   • Search bar popup on the Trecipe page
   • Search bar on the header

Story Point: 1

Story point: 4

• [ ]: Display generic map
• (Stretch) [ ]: Add markers for a random destination

Story Point: 1

• Adequate HTML
• CSS styling
• Make it React component

UX mockup:
TC_card.pdf

Full Scrum Report

Story Point: 1

• create an interactive map

• zoom in/out functionalities

• hover over each destination to see destination digest.

• click to bring up the destination page

Story Points: 1

UX mockup:
(last updated on 5/28)
context_filters.pdf

Story Points: 2

The styling on enlarged cover photo popup needs to be fixed. And ideally it should use the Model component and showModel dispatch for consistency instead of keeping track of open/closed state internally.

Story Point: 1

• edit
• delete
• duplicate

UX mockup:
(Updated on 6/3/2020-slight change to shape of edit menu and its shadow)
TC_edit_menu.pdf

Story Point: 1

Story Points: 3

• install react-redux, @typescript as well
• set up reducers, actions, boilerplate code
• TC
• Dialog open/closed

Story Point: 1

• Create React component for button

UX mockup:
create_new_trecipe_button.pdf

• Reuse Trecipe Cards and Destination Cards
• Create User cards

Search results page will show all three sets of result categories (Trecipe, Destinations, User)

Story Point: 2

• Implement "Show More" in destination list

Story Point: 1

Implement #57

• set up the backend for receiving queries [keywords from clients]
• make api calls from backed
• conversion from search result to destination model
• send result back to display

Story Point: 1

• create react component for pop-ups

UX mockup:
add_trecipe_popup.pdf
add_trecipe_popup2.pdf (contains mockup for disabled create button)

Story Points: 2

MyTrecipe, Trecipe, Map all needs user login first. So redirect if needed.

Consider creating redux store for user state.

Story Points: 2

• Name
• Date of create (timestamp)
• Last modified
• Picture
• Owner
• (Collaborators)
• privacy setting
• Card ID [CardID + Destination (separate table)]

Implement component for owner icon, and add collaborator button

Story Points: 2

• make nav bar a react component

The font size css property at the root element will be scaled using a percentage (1rem = 10px). The advantage of this approach is that it will still respect the user's browser default font setting and we no longer need to use a calculator to convert px into rem.

• Change the css property at root element
• Update the current css files

Story Points: 1

• Able to insert upon additions
• Fetch data when loading

Story Point: 1

• part of trecipe card component #4

Related to #61

• Find a library that supports user authentication

• create a destination side bar
• include map from #63
• add search bar

Story Points: 1 week :D

• create user
• show trecipe according to the user
• authenticate user (library)

Story Point: 1

User is able to perform Delete and Duplicate Trecipe from the Map page. When the request for those action has been successfully completed, the user should be redirected to corresponding pages.
For delete => back to MyTrecipes page
For duplicate => to Map page of the newly created duplicate

• component for a destination
  Story Point: 2

Story Points: 3

• [ ]: Store image src locally
• [ ]: Edit photo for each TC

Story Point: 2

• make it responsive

Story Points: 2

Right now, out project has two major groups, tsx files and stylesheets. As we add more files and components, this kind of structure will be hard to maintain. A better approach would be something described in here: https://medium.com/@alexmngn/how-to-better-organize-your-react-applications-2fd3ea1920f1

Story Point: 0.5

If we can reuse the existing Button component, no need for this issue.

Story Point: 1

All the user specific trecipe routes require authentication,