codeforpdx / dwellingly-app Goto Github PK

Application for property managers to communicate with social workers

JavaScript 62.63% HTML 1.74% CSS 0.06% SCSS 9.97% Ruby 25.18% Shell 0.10% Sass 0.32%

hacktoberfest frontend react javascript scss bulma civictech codeforpdx civictechindex code-for-all

dwellingly-app's Introduction

Dwellingly App

Description

The nonprofit JOIN is working to help transition people out of homelessness. However, their current system for staying in touch with landlords is inadequate. Code for PDX is building the Dwellingly app in conjunction with JOIN. Dwellingly will aid property managers in communicating with social workers and will eventually aid in supporting both tenants and landlords with a more streamlined rental property process.

This app aims to replace the current system with a robust ticketing system to ensure the staff at JOIN can connect with their landlords and clients seamlessly. This will allow JOIN to provide support and improve success in transitioning people out of homelessness.

UI Preview

Dwellingly is being built from these FIGMA designs

The app is currently live at: https://dwellingly-app.herokuapp.com login: [email protected] password: asdfasdf

Contributing

Please read and abide by our Code of Conduct
Here is a guide to making contributions to this project on Github.

Prerequisite Technologies

Rails dev environment: For info on how to install go to: https://gorails.com/setup/
- Install with a postgres database, and its recommended to use Rbenv as the Ruby version manager.
- For an easier setup: You can optionally skip postgres installation and use sqlite3. Instructions to use sqllite3 are below.
Node (use node version ^14.17.0)
yarn
Git

Getting Started | Installing

Once necessary technologies are installed on your machine:

From Terminal:

Navigate to your desired directory from the command line: example:cd Desktop/CodeForPDX/
Clone Project - git clone https://github.com/codeforpdx/dwellingly-app.git
Create your own working branch: example: git checkout -b add-new-component

Installing

From terminal:

Navigate to your desired directory from the command line: example:cd Desktop/CodeForPDX/
Clone Project - git clone https://github.com/codeforpdx/dwellingly-app.git
Navigate to app's directory: cd dwellingly-app
Copy the config file: run cp config/application.yml.example config/application.yml
If using sqlite3 then uncomment sqlite3 in the config/application.yml file.
run bin/setup
- bin/setup will install dependencies, create the databases, and seed the database.
- alternatively you can run each step manually with the following commands:
  - bundle
  - yarn
  - bin/rails db:create
  - rails db:schema:load
  - rails db:seed
Start the servers
- Start the Rails server with: bin/rails s
- Start the weback server with: ./bin/webpack-dev-server
  - This will precompile javascript and reload the browser when there are javascript changes
- Alternatively: You can use bin/dev to start both servers. (May not work with Windows)
  - This will use overmind if it is installed; otherwise it uses Foreman.
View the app at localhost:3000
See the testing section on how to run the tests.

About Us

Thank you for your help and happy coding!

dwellingly-app's People

Contributors

Stargazers

Watchers

dwellingly-app's Issues

AUTH exploration / flow diagram

example:

PrivateRoute.js

desc: checks state to see if there is a user to decide whether to reroute to '/login' or to the requested routes.

Here is where the list of components and their roles will go:

Account creation does not create user once a user is authenticated

When creating a user, the authentication is successful, but the new user is never created. (It might be missing the leaseId field)

Login Flow

The following is description of the login flow concerning the frontend:

The heart of the sign-in process is defined in src/firebase/auth.js with the method doSignInWithEmailAndPassword(). This method uses the two parameters, email and password to call a function imported with the Firebase SDK firebase.auth().signInWithEmailAndPassword(email, password), the response from which is used to to mutate the state with various action creators imported into src/firebase/auth.js from src/dux/users.js.

doSignInWithEmailAndPassword() is imported into and called from src/components/loginForm.jsx and called when the "Sign In" button is clicked, taking the form values as parameters.

Suggested Modification:

Create an src/api.js that imports relevant action creators and makes a REST call to the exposed API endpoint for sign in (and registration as needed). This merely skips the call to firebase, but retains the same basic flow.

@astuteape

Administrator - Tenant Details Page

As an administrator, I need to see information about a particular tenant. This could be accessed from a variety of sources: a ticket, a tenant dashboard, or a list of tenants attached to a property manager or staff member.

This should display information about the ticket, similar to that from the staff or property manager ticket views.

Login routing issue

On the feature/login-screen After logging into with your user credentials, theres a routing issue. Here are steps to reproduce.

Create a login
Use those credentials to login from main login screen
You'll notice that you're logged in once the nav bar on the left shows and you get the logout button in the nav bar.

This is where the problem comes in. After being logged in, the route gets changed but the renders the incorrect component. You just get stuck on a blue screen like this one:

Map through existing resource

Map and comment out existing resource
comment flow through the app

Frontend: Create Header Component

Should span fullwidth
Should have white 'dwellingly' logo floated left
Should have gradient background

See figma designs for details:
https://drive.google.com/file/d/1YqboQogczYm1HkyRqEtVSzeQ61T9hWU2/view

Import colors from FIGMA into CSS

import color pallet

Implement CSS Framework With React (frontend)

CSS frameworks provide a basic structure for designing consistent solutions to tackle common recurring issues across front end web development. We should think about which framework we want to implement, especially if there is no design for this app.

I did some research and found some CSS frameworks for React:

Create Staff Member sidebar

Create sidebar with appropriate links for Staff Member, displayed when user logs in under this kind of account.

Links include:

Search Property Managers
Search my tenants
Search all tenants
Preferences
Out-of-Office
Logout

Create Postman file and share

create postman file with all current valid backend calls
create both localhost and to live database

transfer assets from old project

add assets from old project

Notes from 06/27/2019 Meetup!

🎉 ❤️ PEOPLE FIRST SOFTWARE DESIGN ❤️ 🎉

Planning Todos:

Ask Bobby about the branches
if Bobby doesn't know we can look through the branches to see if it's worth merging them
if merging the branches is too complex or not worth it, start with main and spin off a new "Develop" branch

Code Todos:

isolate all the auth components
- update an issue with small descriptions
explore the branches to see if the recent ones (feature/reducer-tests and feature/staff-list) have significant value.

Important Notes and Questions

should we bring some/all of the questions below up with Hugh?

figure out first slice for the code stuff

make contact with the people the app is serving

maybe create an accessible slack channel for everyone to see/participate in discussions with Join?

questions we should answer:

should we define scaling?
who are we building this for?
- what is the deployment plan?
  - who is paying for it?
    - are we trying to stay in free-tier?
  - who is going to maintain the finished app?
  - Where are we hosting the components? AWS, Google, Digital Ocean?
- what is the end functionality/purpose?
- Why did they choose Firebase?
  - was it a security / scoping concern?
  - should we bring up the potential of staying with firebase at least Auth?
  - can we get access to the firebase account?
- security concerns
  - what are the vulnerabilities on an application level?
  - who is responsible for security vulnerabilities? (cfpdx or join?)
- how can we get better access to the visual design assets?
  - via Figma?
- can we establish contact with Join or Amplify?
  - Join
    - who is responsible for this initiative (on their side)?
    - will they maintain?
  - Amplified by Design
    - bobby
      - from Amplified by Design
      - built some of the app
        (can we get access to the firebase account?: see above)
- sydney
  - from Amplified by Design
  - designed UX / UI for the app

OTHER NOTES!

If they (?) don't have maintainers, we should rely on connecting services instead of building our own service components...
especially in terms of scaling and expense(!!)

Create Login form

Build to Figma design,
set route to load

implement front end routes(login)

implement frontend routing for login
https://reacttraining.com/react-router/web/example/auth-workflow

Backend: initialization of DB needs to be moved into the initialization function

in app.py

if name == 'main':
db.init_app(app) <--- this needs to work
app.run(port=5000, debug=True)

define testing strategy for frontend (javascript/react)

While the decision to use pytest for python was essentially unanimous, there wasn't a strong opinion on which testing framework to use for javascript/react code. Please add anything you feel might be left out or provide feedback!

Options that were mentioned:

Frameworks

jest

React Component Testing

enzyme
thoughtworks tech radar prefers react-testing-library https://www.thoughtworks.com/radar/languages-and-frameworks
react-testing-library
not a testing framework but seems popular

Integration / End to End

cypress

Reference
https://github.com/enaqx/awesome-react#react-testing

https://www.thoughtworks.com/radar/languages-and-frameworks

Trouble following README install directions.

Running npm install.

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "babel-eslint": "10.0.3"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-eslint was detected higher up in the tree:

  /Users/jeffreylonergan/dev/dwellingly-app/node_modules/babel-eslint (version: 7.2.3) 

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "babel-eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /Users/jeffreylonergan/dev/dwellingly-app/node_modules/babel-eslint is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls babel-eslint in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed babel-eslint.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jeffreylonergan/.npm/_logs/2020-01-16T04_04_07_462Z-debug.log
Jeffreys-MacBook-Pro:dwellingly jeffreylonergan$ npm install
npm WARN [email protected] requires a peer of typescript@^3.2.1 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of node-sass@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of sass@^1.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of fibers@>= 3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.

audited 905116 packages in 39.369s
found 2 moderate severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

Notes from 11/6/2019 Meetup

Tonight we looked at the router. @heaversm and @zfregin joined, and Mike was able to work through some of the routing issues. Further work on routing is in GitHub as a series of tickets. Mike pushed a PR, which has been merged to make the default route /login.

We discussed making the plan of action work on the router going forward, so we can make components function properly and connect to Flask backend.

Also, develop has been set to the default branch in GitHub. It is the most up to date branch. Please work from it going forward.

remove legacy branches

As of now, the only branches we've discussed using are master and development. The other ones need to be removed.

Fix Auth for user login

Add user login features - connect to new backend.

add .gitignore to project

Please add a project gitignore to limit noise in Pull Requests :D

standard node and python ignore files. Example set:

See GitHub help page on gitignore files: https://help.github.com/en/github/using-git/ignoring-files

.DS_STORE
node_modules
scripts/flow/*/.flowconfig
*~
*.pyc

Front End: Dashboard

Build out and style the dashboard page

Does not include any header / sidebar work

Notes for September 25th 2019

Once the remote API is callable by the javascript client, we want do the following (potentially) :

Break out tickets for constructing the Emergency Number Page (because it is the simplest page that API return data for)

someone can work on making the sidebar
someone can work on getting the logo header up
someone can work on listing the data

We should coordinate these efforts via the github project this ( overviewd by @astuteape ).

Wade this is Treasure -- we should make status reports like this one here bi-weekly FOR IMPROVED COMMUNICATION :D

Admin/Staff/Property Manager - Tenant-Detail Routing

So right now this branch feature/tenant-detail has an incorrect routing setup. Currently in src/index.jsx we have two different tenant-detail pages. One labelled TenantDetail and another named TenantDetailTwo. TenantDetailTwo is an Admin ONLY page. Other users like Staff and Property Managers shouldn't be able to see this page. Staff and Property Managers see the TenantDetail page instead which looks completely different. I'd suggest a renaming of these pages to separate concerns.

Branding: Update Logo

There is no logo in the product. We need to add the Dwellingly logo where appropriate.

Administrator - Add New Staff Account

As an administrator, I will need to create accounts that are staff members. There should also be an option to make a staff account an administrator.

NOTE: To really do this with Firebase, requires additional SDK and a little bit of extra work. Firebase assumes by default that if you create a user, you want to immediately log in as that user, not that you want to do something with that user.

Remove diagnostic login/signup panel

For testing purposes, there is a diagnostic panel that displays the user's ID, also has links to login and logout. Once #10, #11, and #12 are complete, this should be removed.

Routing

Fix the router so it is not defaulting to nonexistent reports page

Branding: Update colors

Update Sass constants and colors where appropriate

Branch Exploration!

List of branches and their relevance to our work

Administrator - Change Password

As an administrator, I may need to change my password from time to time. Need a page to do so.

Create Property Manager Sidebar

Create Property Manager sidebar for users with this role.

Sidebar includes:

Preferences link
Edit account link
Logout link

Seed Test Database

Seed data.db file either through a script or push it up.

Create Login route for Backend

rebuild backend for user authentication
check against user database
send back jwt token
pytest flask plugin
setup factory patterning

BACKEND: Oauth for Google: backend

integrate Oauth into backend

change pages -> views in frontend

https://github.com/codeforpdx/dwellingly-app/tree/development/dwellingly/src/pages

Update Readme

update readme to include:

Setting up project locally

include setting up venv
1.1 Libraries being used
2.Active endpoints

JSON formats
How to contribute

Development branch

Administrator - Change account settings

As an administrator, I need to edit certain aspects of my account or report a problem.

Frontend: Create Navigation Menu Component

Should use appropriate Bulma Menu component
Should be justified to left
Should use .bg-blue for background (helpers.scss)
Should use bulma's built-in font-awesome styling to implement icons, 9 icons total
Should include a Log Out button
Should import react router's useHistory (or useLocation) to determine the active page and highlight page titles and section headers as appropriate
- Stubs for each page will need to be created in the Router+Switch construct at the App level.
All of the above items -> Should pass all unit tests