mjamry/plan-your-trip

plan-your-trip's Issues

Add logs in azure service

Prepare readme file

Show only one view icon on the list settings

At the moment user see both display list and display grid icons.
There should be only one (with options possible) e.g when there is a list view there should be only grid icon.

Edit/Add new item with user data

Form to enter/edit location data.

Extend share options

For now it is only possible to download GPX file.
It should be extended to also provide:

• printeble (PDF?) file
• and sharable link

Use absolute paths in the app

Here is a more detailed description. It avoid issues with moving files and refactoring.

https://github.com/alan2207/bulletproof-react/blob/master/docs/project-configuration.md#absolute-imports

Collapsible panel

Create a new component which can be collapsed.

It should be configurable:

• collapsed size
• collapse/extend icon
• right/left collapse direction

Make use of this: https://mui.com/api/collapse/#main-content

Make identity server clients configurable

Add clients from the config file (appsetings.json) instead of hardcoded values.

Search for duplicates

When uses adds a new item app should look through the list of existing items for duplicates and informs (with a modal) that a similar item already exists.

Add property to List - items count

In the table displaying list details, add a new column with a number of locations assigned to that list.

Use class componnets only where it is really required

Get rid off some class components and use functional instead.

Add UI for multiple list

New list can have a name (probably some suggestions basing on the current items locations).

Modify "add new location"

Modify the way of adding new item to the list.

Now there are two steps, first one is to chose between search and manual add. Second step shows popup with all fields required to add new item.

First step is redundant and have to be removed.
When user press button to add new item will see a popup with empty fields.
Search will be connected to the Name field. When user starts entering name, drop down will apear with possible items to select.

Introduce material design into app

https://material.io/design/

there are a lot of components that can be used in the app - to speed up the development.
Lists/tables/grid views etc

Cleanup styles

At the moment there are two ways of styling components. Css-in-js and CSS files. It should be more consistent.
So there is a need to move all styles from CSS files directly to components.
All CSS files are imported in app.tsx file.

Last updated date not refreshed

When playlist has been edited last update time should be updated also
When new item has been added/removed from playlist it should also be updated

Refactor http requests types

For now all the requests on the backend controllers are using HttpPost.

It should be refactored to use more relevant opitons as HttpPut/HttpDelete

Refactor the way of connecting to the API (backend)

There is a multiple endpoint that are making requests to the backend API.
It should be refactored.

List and Location services should use gateways to connect to API.
Gateway should use some kind of http client to unify requests mechanism.

Use react hook form for forms

Use https://react-hook-form.com/ as a better way of handling forms and validation in the app.

Remove usage of fontawesome

Add location type

Each location should be described by its type (POI):

• food

• sleep

• tourist attraction

• general (not defined)

• etc

• Types should be stored in database, and displayed as an icon.

• Each POI should have a different icon on the map.

• It should be editable and added to the form of the location creator.

Get rid of bootstrap library

There are linkt to the bootstrap js and css files - it should be removed from the project.

Rename items to locations

Map component is too small

Map component's height should be 100% from top to the bottom of the page

Its height should change along with window size

Share plans between users

As a user
I want to be able to share my plan with other users
To easily allow others to view and/or collaborate in plans

Add scrollbar for the locations list not for whole page

It should be a SPA so it shouldnd be shrollable as a whole page. Shrollbar should visible only for a locations.

Introduce plan creator

New feature that gives a possibility to create a plan of the trip.

• - It should base on the locations defined in the lists.
• - It should give a possibility to move locations (drag&drop)
• - It should render a route on the map.
• - It should allow to select transport type for each node and corresponds this choice on the map.
• - It should show a distance and time required to move from one point to another.

Add marker by click on the map

Add new item - search wiki using geoSearch

Hide playlist drop down when click outside

UI improvements

Take a look at the airbnb site for some ideas.

Expand/colapse map

New UI element to expand map to full screen (window). It could be a part of map OSD if possible.
New UI element to hide/show map.

Filter/search and sort

Add these new functionalities to the list view.

It should be possible to sort a list (by name/by attractiveness).

it should be possible to search items on the list.

Add notifications log

There will be a new feature that will log user notifications - when user added/modified/removed locations/lists

Wrap react app with net core project

It is one of method to be able to get access to azure environment configuration.
Introducing that change, would be the best moment to also make react app configurable.
It will get configuration values regarding api and identity server addresses, and possibly some other configs.

Improve userService

Improve flow of user login/logout in the app. Make use of redirectSilent

Add git hooks

Add pre commit and pre push hooks to the git to ensure that code is ins good shape and avoid silly mistakes.

Here is a tool for that
https://typicode.github.io/husky/#/?id=usage

Add possibility to share/open list with ID

Add application routing to be able to open/share list

Introduce TypeScript in the app

Update existing files to use typescript
Start using typescript for new files

Use react query

One of examples to use this library is to update data. At the moment frontend sends data to backend and refreshes UI after reviewing answer. It could be annoying for a user to wait so long for UI update.

It can be used for all API calls

Refactor state management

use one context for whole app - one state object with partials inside
use one global reducer (inside can be more of them)
use global actions lists
use selectors to get required parts of state

Validation for a new location

Disable save button until all required fields (name, coordinates) are correct

Update material UI

A while ago, material ui has changed its name to mui and probably done some useful upgrades.
It can be updated in the app.

Improve snackbar/toaster to use MaterialUI

This componenst should base on paper for consistency. Material UI has its own snackbar that can also be used

User Authentication

Use dotnet core identity server to provide trhis functionality.

Here are some usefull links:

https://docs.microsoft.com/en-us/aspnet/core/security/authentication/identity?view=aspnetcore-3.1&tabs=visual-studio
http://docs.identityserver.io/en/3.1.0/quickstarts/1_client_credentials.html
https://medium.com/@piotrkarpaa/using-spa-react-angular-ui-with-identity-server-4-dc1f57e90b2c

Add aplication loading screen with data loading in the background

There should be a separate service to monitor progress of data loading
There should be a gateway for connections with backend

Clean up package.json file

Now all dependencies are added as it is, need to separate it for development and production dependencies

Add database support

Store list of items in the database.

Store data in the browser

Store data loaded from backend in the browser cache, so the next run will be instant and will only take updates from the remote.

It probably will allow to make app offline.

Improve UI

take a look at https://wanderlog.com/ and get some ideas how to improve the app UI

Add language change support for wiki search

It should be possible detect user's language settings and setup correct language for wiki search.

Additional: Another option should be to add UI setting to set up it manually by user.