codeforpdx / dwellingly-app Goto Github PK
View Code? Open in Web Editor NEWApplication for property managers to communicate with social workers
Application for property managers to communicate with social workers
Fix the router so it is not defaulting to nonexistent reports page
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.
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.
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.
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:
Add user login features - connect to new backend.
Consensus so far has been to use pytest. Also, there is interest in the coverage tool that works alongside pytest
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.
isolate all the auth components
explore the branches to see if the recent ones (feature/reducer-tests and feature/staff-list) have significant value.
should we define scaling?
who are we building this for?
what is the deployment plan?
who is paying for it?
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?
security concerns
how can we get better access to the visual design assets?
can we establish contact with Join or Amplify?
Join
Amplified by Design
sydney
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(!!)
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.
Build to Figma design,
set route to load
Frontend integration for Oauth
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
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
Reference
https://github.com/enaqx/awesome-react#react-testing
in app.py
if name == 'main':
db.init_app(app) <--- this needs to work
app.run(port=5000, debug=True)
On the feature/login-screen After logging into with your user credentials, theres a routing issue. Here are steps to reproduce.
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:
When creating a user, the authentication is successful, but the new user is never created. (It might be missing the leaseId field)
create postman file with all current valid backend calls
create both localhost and to live database
There is no logo in the product. We need to add the Dwellingly logo where appropriate.
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)
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
Create Property Manager sidebar for users with this role.
Sidebar includes:
implement frontend routing for login
https://reacttraining.com/react-router/web/example/auth-workflow
It looks like the readme for getting the project started needs to reviewed and adjusted.
Build out and style the dashboard page
Does not include any header / sidebar work
After a user is authenticated with Firebase, we look up their information in Firestore. This returns information, including a user.
Need to use this information for the Authorization function in the page, instead of looking at the dummy user from data.js
Page view for signing up. See branch: terms-view
See figma designs for details:
https://drive.google.com/file/d/1YqboQogczYm1HkyRqEtVSzeQ61T9hWU2/view
Create sidebar with appropriate links for Staff Member, displayed when user logs in under this kind of account.
Links include:
Update Sass constants and colors where appropriate
As a developer, I would love to test that my redux files and other programmatic elements are working as intended.
Create unit tests for dux files and components so we can see if they do what they say.
.bg-blue
for background (helpers.scss)See figma designs for details:
https://drive.google.com/file/d/1YqboQogczYm1HkyRqEtVSzeQ61T9hWU2/view
See figma designs for details:
https://drive.google.com/file/d/1YqboQogczYm1HkyRqEtVSzeQ61T9hWU2/view
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
Please set the default branch to https://github.com/codeforpdx/dwellingly-app/tree/development
On GitHub, navigate to the main page of the repository:
Under your repository name, click Settings.
In the left menu, click Branches.
In the default branch sidebar, choose the new default branch.
As a user, the sidebar/hamburger menu/whatever you call it contains information and/or links that I need to use the site. However, at the moment it defaults to the Administrator's content and does not have links for Staff nor Property Manager.
Only show Administrator sidebar once a user has logged in with Administrator role
As of now, the only branches we've discussed using are master and development. The other ones need to be removed.
connect to backend api
create, updated, destroy
rebuild backend for user authentication
check against user database
send back jwt token
pytest flask plugin
setup factory patterning
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
integrate Oauth into backend
update readme to include:
Seed data.db file either through a script or push it up.
add assets from old project
import color pallet
At one point in the design process, it was thought we might want to have multiple cities/locales using the product. There isn't really a way to theme the product at the moment, so rebranding, adding a new city might be slightly difficult.
Map and comment out existing resource
comment flow through the app
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.