We need a way to navigate to the Projects menu from any other page.
Adding a button to the hamburger menu seems to be most obvious solution.

This issue is open to any and all.
Improve the UI with color, layout, images, words, sounds, UX patterns...
Make things look less default.

I just noticed that only my profile's description field gets persisted in Firebase. It doesn't have a displayName, so I don't show up as a follower after I follow a project. I can't look too deep into it right now because I'm about to get into my car and drive over to Whole Foods, but maybe we can look into this tonight.

Users need a way to subscribe/follow a project.

UI

• Add an action button called 'follow/unfollow'
• List followers in the Project Details component

Backend

• Design Firebase collection for associating users with project.

This is a UI bug/issue.

Observe that the app flashes a "Sign In" control when the page is reloaded, even if logged in.

Suspect this is because no distinction is made between the initial and logged-out app states. Fix would be to discern between undefined, null, and valid session values.

Because the current state is mildly offensive to sensibilities...

We need a way to navigate to the Account menu from any other page.
Presently the user can click their name, but another alternative would be good.
Adding a button to the hamburger menu seems to be most obvious solution.

Clicking on the Hamburger opens the NavDrawer. Clicking the '❬' chevron closes the NavDrawer. Therefore, when the NavDrawer is open, the Hamburger icon is redundant. The Hamburger icon should be hidden when the NavDrawer is open, and shown only when the NavDrawer is closed.

This gif shows the current, undesirable behavior:

The repository link should be shown in the Project component.
The project owner should be able to edit the field.

The app has two render states; NavDrawer Open, and NavDrawer Closed. The state is communicated to components via a prop. Ideally this should be moved to a a context and have better inversion of control.

Currently, when 'Verify' is clicked, the UI updates to 'Verifying' - instead it should change to 'Check your email'

Background: We use two different Firebase environments: Production, and Development. The production environment is used by https://groupcollaborationtool.web.app, and the dev environment is used by http://localhost:3000. This protects production data from development mishaps.

Issue: There is no way to discern between these two environments, other that the browser URL address. It would be good if you explicitly label the dev deployment with something on the app, maybe replace the "Groopa" menu title with a different word/color/image... or any other way you think is unobtrusive but obvious. It should only be present for local development environments.

Button will allow people to automatically join open source projects and request to join private channels.

Expected: The header should be absent.
Actuality:

Suspect an error in the Project Viewer Route tag.

Almost all the other components have a "Renders Without Crashing" test, but there is none for this one. There needs to be one.

Expected: The signout page should redirect to the sign-in page if signed out.

Actual: The signout page offers you the chance to sign out, even though you are not signed out.

sessionContext is setting user to the user object instead of the value of user in App.js

Expected: No warnings in the browser console.
Actuality:

To replicate:

1. Log in
2. Navigate to /projects or /profile
3. Note the occasional flashing message "Please sign in", followed by authenticated content.

Expected behavior is to see only the authenticated content, without the spurious request to sign in.

The landing page is still using the old firebase.auth.currentUser method to check for authorization. It should be checking the Session context instead.

Industry standard is that clicking the icon goes back to the home/landing page.
Let's make it do that.

On the signin page, there should be a link for the user to reset their password.

Expected: Once signed in, the NavDrawer should display a "Sign Out" button.

Actually: The button never changes, and remains "Sign In".

The NavDrawer component has NavLinks to "/" and "/projects". These should be using the Routes constants instead, defined in src/constants/routes.js

Each project needs a place to post/share relevant messages.

With PR #75 we now have unit tests.
The README.md needs to have a section describing how to run unit tests.

It would be nice to have labels on the project viewer page to know what field a piece of text is related to.

To duplicate:

1. Log in
2. Refresh the browser page
3. Now you are no longer logged in and must re-authenticate.

Expected behavior:
Authentication should persist between reloads.

When the NavDrawer is open, it should highlight the menu item associated with the active component. For example, if the "Projects" component is active, the "Projects" menu item should be highlighted. Furthermore, ff the "Account" component is active, "Account" should be highlighted in the NavDrawer.

The linter is reporting three unused imports:
Two in NavDrawer and one in App.js

I use a code formatter, Prettier, that automatically adds and deletes spaces, among other things. These aesthetic changes obfuscate what's actually happening when we look at the diffs in pull requests and such. I propose we settle on a .prettierrc.json file that everyone will use.

TESTING

test

When you try to navigate to the Create a Project or the Edit Project pages, an error is displayed 'Cannot read property 'uid' of undefined'.

The structure of session changed recently, so instead of accessing the uid by session.user.uid we need to access it by session.uid.

The repository contains both yarn.lock and a package-lock.json. Everything is working fine for now, but for sake of sanity we'll need to standardize on one. Maybe we should hold a vote: NPM or Yarn.

Expected: If the user is logged in, they probably don't need to reset their password via email.

Actual: The ForgotPassword allows the user to reset their password via email, even if logged in.

Expected behavior: Consistent labeling of either "Login" or "Sign In" across site.

Current behavior: "Sign In" in sidebar, "Login" in header

If a project is private, then it should not be visible to the public.
The project should be listed in a view accessible only to the project owner.
This new view should be a new component, or in the Account component.
Open to debate.

When creating a new project, the user is asked to select a project type, either "Open Source" or "Private". The choices should be "Public" and "Private".

Once this issue is closed, we'll need to go to older projects and change the "Open Source" labels to "Public". That is a different issue.

Storybook documentation: https://storybook.js.org/docs/guides/guide-react/

I played around with this today. A major issue I'm encountering is that a lot of our components require context and Firebase data to render (e.g. the Projects component). I can workaround the issue by adding a storybook prop to the component and doing stuff like this:

export default function(props) {
  if (props.storybook) {
    const projects = [
      {
        description: 'This is a public project',
        name: 'Example 1',
        owner: '0',
        type: 'Public',
        id: '0'
      },
      {
        description: 'This is a private project',
        name: 'Example 2',
        owner: '0',
        type: 'Private',
        id: '0'
      }
    ];
    return (
      <div style={{ marginTop: '30px' }}>
        <div>Group Collaboration</div>
        <ProjectsTable projects={projects} />
      </div>
    );
  }

Problem is, this will pollute our components with a lot of logic like IF props.storybook load dummy data, ELSE load data normally. Ideally I'd like to keep all Storybook logic inside the src/stories directory.