The alumni-network from fcc-alumni

public / private email

As raised by @jdmedlock on the beta fccan slack chat:

So far the only question I have is is it the case that my email is viewable by others registered on the FCCAN site? If so, would it make sense to give the user the option of not sharing so the FCCAN team could use it, but not the general public. If I remove my email then I'm effectively cutting myself off from all communications - public and from FCCAN team

If I'm understanding correctly - the suggestion is to allow users to enter their email, but keep it private in case FCCAN team needs to contact them. Interesting point.

@bonham000 This was also raised by @QuincyLarson when I demoed the app to him.

Outstanding Items / Home Stretch

weird /dist/ajv.bundle.js warning: apparently being championed happily by Dan
there are some failed propTypes warnings in the console in various components
- about the lingering React PropTypes warning, it's possible this is stemming from some package we are relying on that hasn't been updated yet, so I think this is safe to ignore.
  - @bonham000 see comment below
organize codebase (ex. common components)
polyfills for ES6 string methods
- @bonham000 since our polyfill solution didn't work, I'm just replacing any instances of startsWith and endsWith with .slice() as appropriate
eliminate other trailing ES Lint warnings
switch between public + config profile views
profile page loader issue, fix z-index and explicit size on mobile screens
fix issue with case sensitivity / invalid :username url params on chat controller and public profile
chat icons/links in profile ~~and user cards~~ - (see initiatePrivateChat from ChatController)
- added link in "Contact for Mentorship and Other Requests" box, which is always shown
top margin to accommodate for stacked navbar on fcc verification page
toggling user image / skills & interests in Community view on mobile only toggles one way on iPhone: after revealing skills & interests you cannot toggle back to the avatar
fix navbar responsiveness at tablet resolutions
margins for “account” page w/ flash messages - addressed but still edge case
fix spelling in 'Access forbiden!'
update index.html title of app & favicon
change picture on passport login GH page
- @bonham000 can we change this to the logo? Right now it's your mug. Which is great... but... 😄
- @no-stack-dub-sack sure, wait, what, my picture is on GitHub passport login page?
- @bonham000 Yeah, I thought you must have changed something, it's no longer @Bigghead's avatar... hmmm...
- @no-stack-dub-sack Oh, I think it's for whatever profile the GitHub access keys are associated with. So on the production app right now that will be @bonham000. I guess you should get ready for the @no-stack-dub-sack avatar once we release it then.
- @bonham000 is there a way we can do it off of the fcc-alumni github and change the logo to our logo? Or can you not do it from an organization like that I wonder? I can research this.
linkedin API issue: probably bump this to production-issues
revisit location search since added country (Mentorship Search)
update search to display bio if not mentor (Mentorship Search)
render message box conditionally based on whether or not user has selected skills (Profile_Config)
connect mentorship search results to profile pages
see initiate private chat method in Mentorship search - is this ok?
delete my account + chat history issue
remove user from DB when user does not fully authenticate so app doesn't break
popup for info circle in fcc data table (Public_Profile)
margins for “about” page w/ flash messages
margins for “login” page w/ flash messages
margins for flash messages need to change when navbar is mobile and unstacked
take away ability to change username on login
mobile margin for stacked mentorship search fields
improve mentorship search UI
flash messages... ughhh - done, I think!

@bonham000 @Bigghead @stephenjfox Interested in implementing this so we are all on the same page and keeping things consistent. I am a very visual person, and disparities in even the way the code looks can drive me up a wall 😄 (yes, I have some issues I need to work through). Nothing has really stood out to me so far, and I've mostly made consistent whatever did, but seeing as the project is getting a bit more complex, here are some thoughts I've had as far as this goes:

JS/JSX:

Declare functional components as expressions
if more than 3 props, put each on own line
keep component closing brackets on same line as last prop
use double quotes for JSX props
use single quotes in any other JS
always declare the first argument of connect as null or mapStateToProps, and declare mapStateToProps as an expression

SCSS:

multiple selectors should each be on their own line

I think the cleaner and more consistently styled that we keep our codebase now, the more we'll be thanking and patting ourselves on the back later on when others might want to contribute and as things get even more complex.

Official Release

!!! profile page url params issue !!!

@bonham000 This is an interesting one that I just stumbled upon... if you try to type in the url of a user's profile, let's take Weezlo for example, but you ignore case, which is my general instinct when typing in URLs, we have problems. Because the component is set up to fetch the user info from the db/redux based on that parameter, if the case is not exact, the info does not get pulled. The fcc data still gets scraped, but no other user info is retrieved.

What this also means, is that you can visit the profile page of anyone - even someone that does not exist - and the page will still render with the basic shell...

same goes for dashboard/char/:username routes

So this is really a 2 part issue:

case sensitivity for /:username routes - should be able to get around this fairly easily
triggering 404s when user tries to visit invalid /:username routes

Any thoughts as how to get around the second one?

EDIT: I have the first part solved, at least for profile page.

EDIT 2: Both issues solved for ChatController as well now. It looks like you may have already thought of this partly? I just implemented what I thought would fix only the first of the two issues, but it seems to fix both. Not typing in /dashboard/chat/peter or some other name that does not exist as a user, it just goes to main mess hall, looks to be because of the if/else in mapStateToProps

Just when we thought we were almost done...

Mock User Community for Development

Create some way / API endpoint to pull in more GitHub user profiles to populate a demo community when developing locally in order to improve development of community/mentorship features.

(GitHub has public API we should be able to get profile data from, and we can manually populate their certificates)

Consider This

At some point, obviously, we will be unable to load the entire community when the app loads. At some point (theoretically) it would be too much data.

...

Let's hope we don't reach that point.

Refactor Server Routes

Maybe move getCerts, gitlabRoute, and userRoute all into a user routes file since they are all related, change passportLogin to just passport, and create a new routes file, api, for all future CRUD requests will we make related to application data.❓

XSS Sanitation / Protection?

@bonham000 @Bigghead any thoughts?

CONTRIBUTING.md

Starting a draft of the file here...

following / bookmark feature?

Just thought of this... we should allow users to "follow" one another I think. Seems like a useful feature for something like this.

With a community that encourages collaboration and "leveling up" by seeing where others are at in their careers, once you find someone, you should be able to follow or "bookmark" them so you can easily return to that person... Even if it's not public, so it can't become a bragging right for whoever has the most, it's just so you can find people you're interested in easily.

There would be no "feed" involved or anything like that, no need for updates.

Thoughts?

Official Release

The Big One 💥 💥 💥 🚀

[1] Post-Production Features

Suggestion: don't link coding profile skills to wikipedia

Currently clicking on the skill buttons in the Coding Profile section of someone's profiles links you to the wikipedia page which isn't very helpful. Especially things for "React-Router" as the wiki page doesn't even exist.

My suggestion would be to link you to the mentor page within the FCCAN with that particular skill selected in the filter, so you can quickly find other users that also have that same skill

Issue: Can't add core skill that isn't predefined

There's no option to select "other" or type in my own skill.

Specifically, I wanted to add Webpack as a skill, but couldn't

Delete User

I guess we need a delete user feature?

dashboard/account ?
api/delete-user 💀

If a user deletes their account, we probably should clear their chat history...

mentorship search function does not behave as expected

searching for "as" on the mentorship tab just removes one user from the search results for no apparent reason, except from one profile no one has a substring containing "as" in the profile, as you can see from the sceenshot.

Flash Messages Stacked

If user events create multiple flash messages in UI, they all get stacked. Should probably auto-clear old messages.

Tracking Bugs...

Running list to track any bugs we need to pin down:

clickable user cards in community

As raised by @Kornil in the FCCAN slack channel:

Community User Cards should be clickable, at least in desktop mode. Meaning the whole card, not just the lower part.

feature request: project collaboration tab/filter/search

The whole point of FCCAN is to be able to find meaningful collaborative relationships. I.e. mentors/mentee and to work on projects together.

The mentor/mentee part has been done well with a separate tab that allows me to search all users. However, no functionality exists to let me have that same search for projects other members are working on.

To make it easier/better to collaborate on projects, I would like to see a similar tab like there is for mentors, but for projects that users have assigned in their Collaboration section of their profile.

Would be awesome to be able to filter on projects based on tech stack, number of collaborators, number of commits, latest commit.

Inactive users (mentors/mentees)

This definitely isn't an issue for right now, but when filtering on mentors/mentees, I'd like to be able to filter based on how active they are or when they last logged in.

Or at least be able to view this information

changes to profile page do not immediately persist

@bonham000 we should discuss this tonight - now that this is getting more complex we're running into all sorts of fun new issues. For instance - when the profile page is edited by user and saved, then refreshed, changes do not persist. But when you log back out and log back in, then we see the changes. This is maybe because of the way I set it up? Not sure - the changes go to the server / db first, then come back to redux (as you know), but they still come back to redux, so not sure why they wouldn't be there. Realized this just as I was demoing the app to Stef before bed last night, so didn't look into it at all yet.

Same issue seems to be causing a lag in the update to community page? For instance, the meta under username on the card will reflect either "member" or "mentor" depending on the state of the slider in the profile page, so when you change this and click right over to community, change is not reflected, but on refresh it is. I didn't test the double refresh on profile page, that may have caused the changes to show up, it may be like a 1-load lag, and may not require signing out and back in to see the changes. Either way we need to address! Talk to you tonight.

Can't unlike mess-hall comment or private chat

Site looks and works awesome !

This is a small issue, re-clicking the heart won't revoke (I'm tired, revoke works here right? lol) the original like.

User Profile Route

A route specifically for viewing a user's profile, that really highlights their profile and is less of a preview (i.e. in Community page now).

e.g. /dashboard/users/:no-stack-dub-sack

Could link to this from community, mentorship, and chat, to give users a nice way of seeing details about another user.

Thoughts? Can discuss.

Feature request: retract a like

Many services allow a like to be retracted by clicking it again.

Unfinished user verification processes break community

If someone starts the verification process - i.e. signs in with github, but does not continue by hitting the "verify fcc data" button - the app will break. This will probably be pretty common - if someone reads our message and knows they won't get in because they don't have certs, why hit the button? They would just navigate away.

Problem being - their user document won't get deleted from the DB though unless they hit the button and fail verification. We need to ammend this ASAP. Someone who gets distracted or who is just curious as to what the app is all about might also break the app just by getting to the verification page and not continuing.

@bonham000

NavLink (react-router) components in nav bar do not stay active

Now that the <NavBar /> component is connect to Redux, the activeClassName props no longer work. When the element is inspected, you can see that the class attribute no longer changes on click. I've looked into this, and it seems like this has been a known issue for other React-Router versions, with the activeClassName prop, not specifically with this component, when nested inside the component that is created when a component is connected to Redux.

This is very annoying, because it is very nice to have those active class names. Not sure if there is currently a way around this. I've tried connecting <NavBar />'s parent and making the decision on which nav bar (user or guest) to render there, or passing down the needed info as a prop and still deciding in the nav component, but both of these approaches actually work less and result in a non-working nav bar.

So I'm a bit stumped. Our only choice may just be to write some custom logic and CSS to show the right color when a link is active. 😭

Post-Production Features

Android Firefox input/select/text area issues

Specifically Android 4.4.4, Firefox app ver 53.0.1

Profile > Preferences

I cannot select mentor skills from the drop-down skill picker
I cannot input text into the Bio text area
The Bio text area has no overflow / scroll bar, and the place holder text gets cut off.

Firefox:

Chrome works:

What It Means To Be a Mentor

Should probably have a separate route dedicated to this which provides some basic pointers and guidance, code of conduct, etc. on what it means to be a mentor in our community. Just to set some baseline expectations and what not.

Can be simple and to the point for now - but Chance is really the one who made me think of this becuase he offered to put some questions in the next cohort placement survey pertaining to this. So maybe we'll get some useful data / insights from that which can help us build this out further.

Updates in Profile Config are still slow

@no-stack-dub-sack this is definitely apparent on mobile, but you can see it on a normal computer if you just type very quickly in any of the text inputs in the profile preferences. I don't think this has to do with the page being in mobile view, I think it's because we are basically updating the entire user object gets every time any field is updated, even if it is just one key press. So everything re-renders (instead of just the input box that was typed in, which is what we want). Finally, I think because this component is fairly complicated and is rendering so much UI, this degree of re-rendering creates a perceptible lag, especially on weaker devices (mobile).

We should try to devise some solution for this. Perhaps we could separate all the inputs into isolated pieces of state and then merge them back into the user object before passing it off to Redux to save. Or, if each of the child components were React classes, they could check with shouldComponentUpdate to check manually if their props have changed and see if they should re-render. Becasue we reassign the entire user in state, right now the answer is always yes since the props are different, even though for almost all of them the actual values of the props haven't changed. Since I assume the actual DOM rendering is the slow step here, preventing that with shouldComponentUpdate may save us. That might be more fun to implement too.

I'm speculating on solutions though I don't know what the best move here is. Maybe if we rewrite in Vue.js we'll see huge performance gains — @Bigghead, I hear it's faster than React. ✌️

Github sign-in button

The sign-in with Github button takes multiple clicks sometimes for it to register and redirects to Github for logging in

Save profile preferences before linking social media

This issue is for tracking anything that comes up in the soft release.

Beta Users: Please report any bugs or issues you may uncover, ideas for improvements, or feedback on the app as a whole here.

Thank you!!! — the FCCAN team

Add a better Readme

The Readme is the first thing someone reads when visiting the page and its currently too bare and with no helpful information like app features, screenshots. Also some links are wrong for example the contributing guideline points to the edit page.

We need a presentable Readme with links to FCC resources and a plan to give directions on how to install and use the app.

Any other improvements should be noted here in this ticket

Deleting a private chat message doesn't remove the associated notification

If you are private chatting someone and you message them and then delete the message, they will still have a notification for that message. Basically, we want to decrement the notifications if a message is deleted.

The flow could operate the same as with the other chat operations which handle deleting a message. We simply want to additionally decrement the notifications (if they exist) when we update the database in step 1, and then update them for the actual user (for the real-time update) in step 2.

Lists for Skills and Interests Sections

We need fully built out lists for both Core Skills and Coding Interests sections. This is what I have so far, feel free to edit this list, but whatever you add, please make bold, so we know what has not been hard coded into the program. As of now, all of these have. Thanks!

Core Skills:

Angular
Backbone
C
C++
CSS
D3
Ember
HTML
Java
JavaScript
jQuery
Less
Meteor
MongoDB
Vue
NodeJS
PHP
Python
Rails
React
React-Router
Redux
Ruby
SASS
SQL
ThreeJS
PostgreSQL
Redis
Web Sockets
Express
Go
R
MatLab
Groovy
CoffeeScript
TypeScript
Scala
C
Lua
Objective-C
Swift

Coding Interest:

Behavior Driven Development
Big Data
Blockchain / Bitcoin / Digital Currency
Data Science
DevOps
Game Development
Internet of Things (IoT)
Machine Learning / Artificial Intelligence
QA / Testing
Test Driven Development
UI Design
User Experience
Virtual / Augmented Reality
Data Structures
Algorithms
Databases
Distributed Systems
Scaling
AWS
Mobile Dev
OOP / OOD

alphabetize imports, props, prop-types, etc. throughout codebase

@bonham000 I think that as this project gets bigger and gains more contributors, this could be valuable.

I've created a branch to get started on this, but am making slow progress and this is low priority.

I've tried to configure ESLint to catch these errors, but have only managed to do it per file with config comments. In order to do this globally, I believe we'd need to eject from CRA. Which clearly, is not worth it.

The larger point is that I think we need to enforce something across the board so things aren't just willy-nilly, and the codebase maintains some kind of consistency (especially if people actually start contributing). But I think asking people to "pyramid" their imports and such somehow seems silly and less professional.

Also, when I was working on the refactor of Preferences the other day, I had alphabetized the imports and it was a big help when I was looking for specific packages in the list, so I see the practicality as being more valuable than the aesthetics of our current convention (even though I can't reiterate enough how much I like the way it looks).

User authentication issue

When user is logged in, on Dashboard page, and they attempt to reload, app redirects to login via the HOC even though they should still be logged in, state from redux store does not persist on reload. I think we need to reset the redux state on componentDidMount() in Dashboard.js or something? Any ideas?

Indication for honorary members

It's confusing to other users when they see someone joined why they know has no certs... we should consider some kind of modification to the user schema that would indicate honorary member

Public Profile Page

https://github.com/FCC-Alumni/alumni-network/projects/1#card-2287024

What should we include here? There are some rather big decisions to be made (or at least 1), that will affect how folks interact with the app, and how they interact with each other.

i.e. Should this page be "read only", and each user should only be able to change what shows here based on their "preferences" page (old profile page)?

...OR, are we going to allow some sort of "feed" - other users would not get notifications of new posts by others or anything, but do we want to give people that "extra reason" to come back? So they can share that cool ML article they just found, or so they can see how someone else is doing with a project?

...OR simple status updates, or anything?

It might be nice to get people engaging on another level, but sure, it adds another level of complexity...

Thoughts @bonham000?

Readme & Contributing

Eventually, we'll need these before official release. 📜 📜 📜

replace mess hall and private chat with Gitter embed

I don’t really understand the need/want for the Mess Hall.

There are already many technologies that focus exclusively on chat and therefore do the chat better. (slack/gitter/messenger etc)

I think FCCAN should stick to the collaboration aspect, and utilise the pre-existing technologies like slack for live chatting instead of trying to re-create the wheel.

Able to go "back" to protected routes using browser nav after logging out

see short screen cast. This is reproducible from any protected route. Have not looked into yet, but I'm guessing that even though we've logged out, the session is still active?

http://g.recordit.co/Ua1ZC52vfr.gif

Server Sessions

Sometime go through and figure out how sessions are being maintained and if this is what we want.

add 'swearjar.js' package for profanity filtering / blocking

this package will not prevent users from adding profanity to sections like "bio" and "mentorship bio", but it will blank them out just in case we get a user in production who is not the best apple and tries spamming.

EDIT 2: found a different package - swearjar.js offers all the same features as bad-words.js and more, including what I was really looking for - a method to return true or false if a string contains/does not contain profanity. This way it can also be used from keeping curses out of the skills and interests dropdowns as discussed in #163

Could also consider adding this in public chat only, and only blacklisting the worst of words to help us protect against people getting harassed while we have no "terms of use" or "flag user" features in place.

EDIT 1: I was wondering if we could be held legally liable if someone was harassed in our chat room (thinking ahead here!) but, at a quick glance, it looks like, no, we could not be. Still something to consider, and perhaps wise to implement a basic "terms of use" at some point forcing users to take ownership of any content they post. Again, doubt this would be a major issue anyway, but the gitter rooms are often fraught with harassment, so if this ever got big enough, it would be something to consider. https://www.stoel.com/online-forums-chat-rooms-and-hosted-content-risks.

limit chat message length

During beta, someone tested this by plopping in an egregiously long message. Seems like something we should put some kind of reasonable limit on. Open to suggestions. Should be easy enough to implement.

Site crashes after filling in Preferences

I don't know if it's a coincident, but i get the heroku error anytime i try filling up preferences, ???

Chat Features & Enhancements

collect historical gifs

PR	Link	Subject
#10	http://recordit.co/MMoCSmErM9	first registration demo
#12	http://recordit.co/idlWNDLY2M	first profile page
#14	http://recordit.co/VmpjOrINhD	second profile page
#21	http://g.recordit.co/uBHXeRypz1.gif	refactored client-side routes
#23	http://g.recordit.co/9drxo0xaW1.gif	profile page animations
#29	http://recordit.co/VfHgc4v8Db	first chat implementation
#30	http://recordit.co/mihqkMYe8z	chat: likes/edits demo
#37	http://recordit.co/ujO4g64m5Q	save user profile
#39	http://recordit.co/x8WQA8Ylti	community cards
#40	http://g.recordit.co/1qYaj0vjEr.gif	second chat demo
#45	http://recordit.co/KLQjROG64J	save section feature
#48	http://recordit.co/8AI0MlG9x3	user card reveal feature
#49	http://recordit.co/YmDabx6UW5	private chat v1
#52	http://recordit.co/xfviQrtqjU	private chat v1.2
#54	http://recordit.co/OV9SXKEPF6	mentorship search v1
#114	http://recordit.co/UX14sOYo9z	flash messages issue
#117	http://recordit.co/efQN2MvKF8	mentorship responsiveness
#170	http://recordit.co/1aWETBPkYD	profanity filer
#171	http://recordit.co/uxucHq0ffD	skills/interests labels demo

Issue with Fetching FCC Stats in App

This is the result when someone navigates away from a Public Profile before some of the axios calls return. Of course React catches and suppresses these errors nicely and merely provides warnings for us in the console, but there are still several issues here.

First, we should be properly handling the case where these requests return but the component is unmounted. There are a few solutions which would work for this, but a more important consideration is the following: Currently, this component makes 5 ajax calls to the same freeCodeCamp url and we don't persist the results in any way. Furthermore, this will happen separately for any users viewed or even the same user viewed repeatedly — it's easy to imagine how this could escalate to a high amount of request traffic to freeCodeCamp which doesn't represent legitimate users: a problem for them.

I think this is the real issue here. Minimally, the best solution I can see is:

Either store the stats in the user database schema and persist them, only fetching once per lifetime of the user.
Or table that idea in favor of triggering 1 action from this component when it mounts which fetches from the FCC endpoint once and then parses the response data among all these pieces we're looking for. Throw the results in an independent Redux store to persist for the lifetime of that user's app session (this also solves the component unmounting issue: we still save the data). I think this would be a decent intermediate solution because the risk of high traffic to FCC is really only a risk as long as we have a high volume of users, which we won't at initial release (and modifying the user schema is a bigger lift right now: in my view a good post-production feature challenge).

@no-stack-dub-sack ^^^

fcc-alumni / alumni-network Goto Github PK

alumni-network's Introduction

Fun while it lasted...

The official home of the freeCodeCamp Alumni Network Repo

alumni-network's People

Contributors

Stargazers

Watchers

Forkers

alumni-network's Issues

JS/JSX:

SCSS:

Core Skills:

Coding Interest:

Recommend Projects

Recommend Topics

Recommend Org