brendenwest/cascade

Mobile app for Cascade Bicycle Club

cascade's Issues

Individual Ride string slicing

The individual ride api is inconsistent in the datetime field. Some rides have a clean datetime string, and others have trailing wording" Add to Google calendar, Outlook calendar" and so forth. This may be resolved on the api side or by direct string manipulation in the app.

Create 'Blog' component

Description

• Create the Blog component and add all needed UI elements, navigation paths and interactable objects.
• Using the given API for fetching the needed Data (if required).

NOTE: Visit the website for ideas on how the component can be created/would look.

Acceptance Criteria

• The component is completely functional and can be navigated to and away from.
• The approved wireframe navigation routes are followed.
• The given API from the client is use to display the needed data (if API is needed).
• The approved UI library is used for the entire component.

Project board issue touchup

Description

Clean up the Project Board ensuring consistent formatting for easily unstainable issues

NOTE:

• No PR needed

Acceptance Criteria

• All To Do and Backlog issues have correct formatting and are easily understandable

upgrade to latest gradle version

https://reactnative.dev/docs/new-architecture-app-intro

Update README with installation steps

We need to create a new issue to update our README with installation steps as well as steps of how to run the app locally.

Originally posted by @CalebMcOlin in #2 (comment)

Implement the approved UI library

Description

Once the team approves on a React Native UI library to use. Have said library implemented onto the code base.

NOTE: Dependent on #8

Acceptance Criteria

• The Approve library is added to the codebase through a PR

#4 Develop Featured Daily Rides Component

Description

This is step 4 in developing Daily Rides

Context / Additional Information

In the current state, the Daily Rides screen pulls in all of available rides in the Flatlist format. The list of Daily Rides needs to be filtered based on the current date, so that a limited number of rides is featured.

Acceptance Criteria

• Only rides with today's date are shown
• The list is scrollable (if there are more than two-three rides today)

Create 'Events Calendar' component

Description

• Create the Events Calendar component and add all needed UI elements, navigation paths and interactable objects.
• Using the given API for fetching the needed Data (if required).

NOTE: Visit the website for ideas on how the component can be created/would look.

Acceptance Criteria

• The component is completely functional and can be navigated to and away from.
• The approved wireframe navigation routes are followed.
• The given API from the client is use to display the needed data (if API is needed).
• The approved UI library is used for the entire component.

Implement Individual Ride Screen

Description

Ride Screen pulls from api and displays detailed information about the selected ride.

Context / Additional Information

At this time, the Featured Rides screen renders a list of available rides and when user clicks one of the items, they are taken to that ride's website page in a browser. Individual Ride screen needs to be implemented so that upon clicking user is taken to that screen instead of the website page.

Acceptance Criteria

• Individual Ride screen is implemented
• The screen renders data from the api (mapping available through the external link on the bottom
• click on the list item loads the screen, and user can come back to the list by clicking on the Rides bottom tab icon

Create 'Classes' screen

Description

Objective:

• let users find bike classes through the mobile app

Acceptance Criteria

• App has screen showing list of bike classes corresponding to https://cascade.org/node/6783
• List should show class categories as sub-heading
• for each class, show image, title, and description
• User can navigate to classes from the drawer navigation menu

Dependencies

• api to retrieve list of classes - https://cascade-api.herokuapp.com/classes
• Icons?

Open Questions

• Should class list link to details on web?

Add list of libraries used to the README

Description

List all the Libraries use in the README under the Built With

Acceptance Criteria

• All main npm libraries are listed in the README

Add IOS folder back into the repo

Description

For future use and flexibility, having the IOS folder/build in the repo during the development process is good practice.

Acceptance Criteria

• The IOS folder is removed from the .gitIgnore and in the repo

Create Wireframe for the app's layout

Description

As a team we need to have a wireframe for the layout of the app. This will help us know which components navigate to other components. This will also help in knowing how data will be shared between pages.

Use the website to figure out how they have it laid out and use this as a starting point.

Once the wireframe is completed (or at least started) it can be shared with the team for review, feedback and assistance.

NOTE:

• No PR is needed for this.
• Even though a current iteration of wireframe is approved that doesn't mean changes can't be made later on and work continuers. This outlie will follow the agile work flow of this project and will adapt when needed. However, changes to the wireframe structure MUST be discussed and approved by the team before they are made to ensure no confusion when developing.

Acceptance Criteria

• All team members agree on the current version of the wireframe
• The final version of the approved wireframe is added to our teams Drive document for easy reference

Make App Experience Cohesive

A lot of the screens in the app have different looks and designs, they don't look like they belong in the same app.
Some things to address with this issue:

• Make loading icon the same across screens.
• Make color schemes match
• Consistent design themes across screens

Replace ScrollView with FlatList in BlogScreen

Implement FlatList component instead of ScrollView to show the Loading icon when the data is loaded and to make the code consistent with other screens

update Android SDK versions

Update Android app to target current SDK versions:

    buildToolsVersion = "33"
    minSdkVersion = 26
    compileSdkVersion = 33
    targetSdkVersion = 32

Fully Implement Featured Daily Rides' component

Description

• Create the Featured Daily Rides component and add all needed UI elements, navigation paths and interactable objects.
• Using the given API for fetching the needed Data (if required).

NOTE: Visit the website for ideas on how the component can be created/would look.

Acceptance Criteria

• The component is completely functional and can be navigated to and away from.
• The approved wireframe navigation routes are followed.
• The given API from the client is use to display the needed data (if API is needed).
• The approved UI library is used for the entire component.

Trim/Clean up code

Description

There appears to be a lot of unnecessary comments on these some of the files.
We need to trim/clean up our code at some point.
Also any template starting code can be removed so it doesn't clutter the codebase

Context / Additional Information

See the comments on closed PR #2 for more information

Acceptance Criteria

• Unnecessary comments are removed
• Unneeded starting template code is removed
• The codebase is cleaned and orginized

Create 'Resources' screen

Description

• Create a resources screen based on information at https://cascade.org/explore
• Screen can be linked from the drawer navigation
• Use same UI design as other 'list' screeens

Dependencies

• https://cascade-api.herokuapp.com/explore

NOTE: Visit the website for ideas on how the component can be created/would look.

React Native navigation with different screens

Description

Implement React Native navigation, assign the main window of the app as the main screen

https://reactnavigation.org/docs/bottom-tab-navigator/

Acceptance Criteria

• React Navigation package is implemented
• Main window of the app is defined as the main screen

Set up and push an operating React Native app skeleton

Starter app that deploys on the actual device or an Android emulator

Cancelled Rides Visual Enhancements

Description

Update daily rides screen to visually identify cancelled rides in red or orange.

Context / Additional Information

At this time, fetched api data renders in the same visual format. Cancelled rides are distinguished by CANCELLED title and not by color.
Note: this is a lower priority issue

Acceptance Criteria

• Rides that were cancelled are in orange

Repository rename

Description

Rename the repo to be more specific and fix the typo in the repo's "About" section.

NOTE: These actions require 'Repository Owner' status.

Acceptance Criteria

• The "About" section in the GitHub repo contains no typos
• The name of the repo is changed from cascade to cascade-mobile-app

Enhance Daily Rides Feature

Description

further enhancement ideas from PR #49

Context / Additional Information

1. Spaced between ride leader names
   This is not on your end but on the backend with our API.
   Currently, when there are more than one Ride Leaders the names don't have proper spacing. No change is needed on your side, however, you'll need to communicate with Brenden to make sure the API is updated with spaces after each name.
   Screenshot 2021-11-14 225853

2. No rides for the day?
   This is more thinking forward to what happens with this screen if there are no rides for the day. The 22nd, 24th, and 25th of this month currently have no rides scheduled in the calendar. What should show on the screen for those days?

Acceptance Criteria

• tbd

Implement InAppBrowser async function in BlogScreen

Implement InAppBrowser async function to extend functionality and customize design when opening links

Set up repo security and defaults

Description

Set branch security and issue templets for the repo.

NOTE: Repo admin access is required for this.

Acceptance Criteria

• The Main branch has merge security so that branch/PR cannot be merged without 2 review.
• There is a template issue for tasks, bugs and features.
• Custom labels created to use in the repo

Research UI Library for Reach Native

Description

Research the best UI libraries for React Native.
Find alternatives and prepare a very small presentation/explanation for your teammates.
Try to have done by Sunday's meeting on the 10th.

NOTE:

• No PR will be needed, just a meeting/approval from team

Acceptance Criteria

• Library is approved by team

Create 'Contact Us' component

Description

• Create the Contact Us component and add all needed UI elements, navigation paths and interactable objects.
• Using the given API for fetching the needed Data (if required).

NOTE: Visit the website for ideas on how the component can be created/would look.

Acceptance Criteria

• The component is completely functional and can be navigated to and away from.
• The approved wireframe navigation routes are followed.
• The given API from the client is use to display the needed data (if API is needed).
• The approved UI library is used for the entire component.

Update README with API information

Description

Mention where API source in the Readme (https://github.com/brendenwest/cascade-api)

Acceptance Criteria

• The API repository is linked in the Readme

verify app works for node v. 18

Let's make sure the Cascade app works with NodeJS 18.x, which is now the current version.

• verify app works properly when node modules are installed with node 18.x
• set the engine value in package.json accordingly:
  https://docs.npmjs.com/cli/v8/configuring-npm/package-json#engines

Implement Featured Daily Rides and Touchable UI for featured rides

Description
Create the Featured Daily Rides component and add all needed UI elements, navigation paths and interactable objects.
Using the given API for fetching the needed Data (if required).
NOTE: Visit the website for ideas on how the component can be created/would look.

Acceptance Criteria
The component is completely functional and can be navigated to and away from.

Description

Create the Featured Daily Rides component, develop UI, test with hardcoded data

Context / Additional Information

This is step 1 in implementation of Issue #31

Acceptance Criteria

The component loads with no errors or warnings, is visible, clearly displays information and rides buttons are touchable

upgrade to current version of react-native dependencies

https://react-native-community.github.io/upgrade-helper/?from=0.66.0&to=0.70.2

App bundle name should be 'org.cascade'

Android bundle name should match the website domain - https://cascade.org/

For IOS and Android

Create 'Rides' component

Description

• Create the Rides component and add all needed UI elements, navigation paths and interactable objects.
• Using the given API for fetching the needed Data (if required).

NOTE: Visit the website for ideas on how the component can be created/would look.

Acceptance Criteria

• The component is completely functional and can be navigated to and away from.
• The approved wireframe navigation routes are followed.
• The given API from the client is use to display the needed data (if API is needed).
• The approved UI library is used for the entire component.

Create 'Cascade Advocacy' component

Description

• Create the Cascade Advocacy component and add all needed UI elements, navigation paths and interactable objects.
• Link to Advocacy screen from Drawer navigation
• Using the given API for fetching the needed Data (if required).

NOTE: Visit the website for ideas on how the component can be created/would look.

update readme

• fix typo - 'React Vative CLI'
• update required node.js version
• remove 'download app' wording
• update link to project board

Create 'Main Menu' component

Description

• Create the Main Menu' component and add all needed UI elements, navigation paths and interactable objects.
• Using the given API for fetching the needed Data (if required).

**NOTE:**This will be the component/page the user first sees when opening the app.

Acceptance Criteria

• The component is completely functional and can be navigated to and away from.
• The approved wireframe navigation routes are followed.
• The given API from the client is use to display the needed data (if API is needed).
• The approved UI library is used for the entire component.

#3 Develop Featured Daily Rides Component

Description

This is step 3 in completing #13

Context / Additional Information

Daily Rides Screen to be implemented as part of Home stack

Acceptance Criteria

• Featured Daily Rides and the Home page are implemented in one stack
• Only the featured rides for the current date show up on the screen
• "Select" mode highlight is removed from the first ride when the rides list first loads

Create 'About' component

Description

• Create the About Screen component and add all needed UI elements, navigation paths, and interactable objects.
• Using the given API for fetching the needed Data (if required).

Acceptance Criteria

• The component is completely functional and can be navigated to and away from.
• The approved wireframe navigation routes are followed.
• The given API from the client is used to display the needed data (if API is needed).
• The approved UI library is used for the entire component

#2 Develop Featured Daily Rides Component

Description

Add features to built out the component functionality:
Replace hardcoded test data with an active API fetch.
Have the rides buttons link to their website using Linking.

Context / Additional Information

This is step two in addressing issue #13

Acceptance Criteria

• active API fetch is implemented with state management
• ride buttons render continuously as the list is being pulled down
• ride buttons link to the cascade.org website