opencollective/opencollective-frontend

Open Collective's Frontend. A React app powered by Next.js.

Open Collective Frontend

Foreword

If you see a step below that could be improved (or is outdated), please update the instructions. We rarely go through this process ourselves, so your fresh pair of eyes and your recent experience with it, makes you the best candidate to improve them for other users. Thank you!

Development

Prerequisite

1. Make sure you have Node.js version 20.x and NPM version >=9.0.0.

• We recommend using nvm: nvm install && nvm use.

Install

We recommend cloning the repository in a folder dedicated to opencollective projects.

git clone [email protected]:opencollective/opencollective-frontend.git opencollective/frontend
cd opencollective/frontend
npm install

Environment variables

This project requires an access to the Open Collective API.

By default, it will try to connect to the Open Collective staging API, you don't have to change anything.

In case you want to connect to the Open Collective API running locally:

• clone, install and start opencollective-api
• in this project, copy the following content to a .env file:

API_URL=http://localhost:3060
API_KEY=dvl-1510egmf4a23d80342403fb599qd

Start

npm run dev

Tests

To run the tests:

• for pages and components use npm test
• for end-to-end (e2e) tests using Cypress see our dedicated guide.

To update:

• Jest snapshots: run npm run test:update
• Translation files: run npm run langs:update
• GraphQL schema for ESLint: run npm run graphql:update

Styleguide

We use Storybook to develop and document our React components in isolation with styled-components and styled-system.

More info: docs/styleguide.md

Localization

Translating the interface doesn't require any technical skill, you can go on https://crowdin.com/project/opencollective and start translating right away!

We're currently looking for contributions for the following languages:

• French
• Spanish
• Japanese

Want to add a new language for Open Collective? Contact us, we'll be happy to help you to set it up!

Contributing

Code style? Commit convention? Please check our Contributing guidelines.

TL;DR: we use Prettier and ESLint, we do like great commit messages and clean Git history.

Bounties

This repo is part of the Open Collective bounty program. Get paid to contribute to Open Source! The Open Collective engineering team is small and we're always looking for new contributors to our Open Source codebases. Our Bounty program is an opportunity to solve issues that could be neglected otherwise. Contributors who fix these issues will be rewarded financially. Please see our docs for more information: https://docs.opencollective.com/help/contributing/development/bounties

Deployment

This project is currently deployed to staging and production with Heroku. To deploy, you need to be a core member of the Open Collective team.

More info: docs/deployment.md

Publishing components

To publish a frontend components update to NPM, you need to be a core member of the Open Collective team. Steps:

1. Check the currently published version with npm view @opencollective/frontend-components version
2. Trigger the publishing script by running npm run publish-components {NEW_VERSION}, where {NEW_VERSION} is the new version number (please follow semver).
3. Review the changes, and confirm if everything makes sense.

To add new files or dependencies to this exported package, have a look at scripts/publish-components/config.ts.

Discussion

If you have any questions, ping us on Slack (https://slack.opencollective.com) or on Twitter (@opencollect).

Thanks

Thanks to Lost Pixel for providing the visual testing platform that helps us review UI changes and catch visual regressions.

opencollective-frontend's Issues

Replace 'slug' dependency

1. It's generating a security warning that had not been fixed for months.
2. It's requiring 'unicode' as dependency, leading to a huge footprint in client bundle

favicon broken

Just noticed that your favicon is broken:

Frontend /api should not answer with CF headers

When retrieving from:
https://staging.opencollective.com/api/groups/railsgirlsatl/backers?cacheBurst=75395

We get back a Cloudflare error:

It's likely because "Cloudflare detects a cyclic loop - e.g. Cloudflare proxying back to Cloudflare. This is detected when your origin responds with a "cf-ray" header."

When doing this proxy request in the Frontend app, we should skip the Cloudflare network. Maybe in the future, we should consider doing this proxying differently.

Update spanish string translations

@eatskolnikov brough up in Slack that the spanish translations are out of date. (Thanks! 🎉)

The file handling this localization is here: https://github.com/opencollective/frontend/blob/master/src/lang/es.json

Localization docs are here, and could perhaps do with an update if they don't cover a case like this? Dunno! whatever seems right :)
https://developer.opencollective.com/#/frontend/localize
https://github.com/opencollective/opencollective/blob/master/docs/frontend/localize.md

You want to run with this, @eatskolnikov?

Flash of unstyled content (FOUC)

Happening since the upgrade to Next.js 5.1.

It's because initial styles are empty while rendering the page server side.

The root cause is that 2 instances of the styled-jsx stylesheet-registry are existing at the same time, one used to register the styles from our React Components. The other used by Next.js, document.js when getting the cssRules to be injected in the page.

It's not supposed to happen, because node should normally only require styled-jsx/style once, the root cause still needs to be determinated.

Add svgo in the build process

Alternatively, I can optimize all the images, but this isn't automated so when one adds new images they'll need to be manually optimized.

Update react-mde to latest upstream

We're currently using a fork of react-mde, which is based on version 2.3.3.

Would be great to switch back to the upstream version, which is currently 5.5.1.

Alternatively, on the short term, we could just update the fork from the latest upstream version.

Unable to update payment method

Subscriptions page->Update payment method:

Choose another payment method, "Save" button becomes active. Clicking save button throws Uncaught (in promise) TypeError: this.update is not a function in subscriptions.js:

Duplicate Section title

https://opencollective.com/sustainoss/events/sustainuk-2018-442ev#budget

ed

Upgrade svg-to-png

Our svg-to-png library is not actively maintained and its dependencies are generating security warnings.

warning svg-to-png > imagemin > vinyl-fs > [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
warning svg-to-png > imagemin > vinyl-fs > glob-stream > [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
warning svg-to-png > imagemin > vinyl-fs > glob-stream > glob > [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
warning svg-to-png > imagemin > vinyl-fs > glob-watcher > gaze > globule > [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
warning svg-to-png > imagemin > vinyl-fs > glob-watcher > gaze > globule > glob > [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
warning svg-to-png > imagemin > vinyl-fs > glob-watcher > gaze > globule > glob > [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
warning svg-to-png > imagemin > imagemin-gifsicle > gifsicle > bin-build > download > gulp-decompress > [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

Also, svg-to-png is relying on PhantomJS which will not be maintained in the future, the community is now moving to Headless Chrome.

Website links not working on mobile if already visited

I noticed an issue tonight while browsing the site on my phone. In the top right corner I can tap to visit other collectives I have history with. If I select one, it brings me to their page, but if I go to another one, and then use the menu to try to go back to the first one (that I visited before) it does nothing when I tap. It stays highlighted in the list of collectives. After a lot of browsing, I'll eventually be stuck. I won't be able to go anywhere else. Refreshing the browser solves this, but it's definitely.not working as an SPA as it was designed to.

This is kind of hard to demonstrate with a screenshot but here's one showing what my screen looks like after I tap on the collective I want to go to:

Open collective example https://imgur.com/gallery/daseC

Remove any base64 PNGs from SVG assets

The SVGs should be pure vectors.

GraphQL errors in docker environment

Hi there! I'm attempting to use the docker container development environment so that I can set up a demo of how OpenCollective can be used to support a local community.

I'm currently running into a few errors. I mitigated one with opencollective/opencollective-api#1311, but I'm now running into a GraphQL error when I visit a collective page.

Screenshot

Logs

frontend_1  | info: GET /opensource 200 61ms
frontend_1  | error: >>> Error calling API http://localhost:13060/graphql?api_key=dvl-1510egmf4a23d80342403fb599qd {"meta":{"code":"ECONNREFUSED","errno":"ECONNREFUSED","syscall":"connect","address":"127.0.0.1","port":13060}}
frontend_1  | info: POST /api/graphql 500 12ms

Any thoughts? Thanks again!

Duplicate 'stylesheet' for every InputField

Each time, an InputField is displayed the stylesheet from styles/react-datetime.css is also copied. Would be great to avoid these duplicate styles in the pages.

https://github.com/opencollective/frontend/blob/master/src/components/InputField.js#L440

Mixed content warning in homepage

Loading mixed (insecure) display content “http://res.cloudinary.com/opencollective/image/upload/v1508519428/S9gk78AS_400x400_fulq2l.jpg” on a secure page

I haven't checked all the pages so I don't know if there are other such cases.

Links in About section are white on white

Duplicate JSX classes

As mentioned in #315, there are duplicate classes all over our rendered pages.

The issue is mentioned here vercel/styled-jsx#407, but no fix proposed yet.

Eg:

<div class="jsx-3812884289 jsx-3812884289 Member undefined large USER viewMode-USER">
  <div class="jsx-3812884289 jsx-3812884289">
    <a title="Frank Paczynski" href="/frankpaczynski">
...
    </a>
  </div>
</div>

Separate `npm install` from `npm build`

Right now, we have a postinstall npm hook which is automatically triggering a build after we run npm install. I think we should remove that and clearly separate these tasks.

My understanding is that we're doing that mainly for the Heroku setup. We'll need to have that in mind if we proceed to change something.

https://devcenter.heroku.com/articles/nodejs-support#heroku-specific-build-steps

Upgrade Heroku stack (prod)

The footer is in the wrong position

On any page except the home page, like: project, profile, etc,...

URLs for error reference:
https://opencollective.com/webpack
https://opencollective.com/tobiaskoppers

Prevent indexing of staging by search engines

Adding a simple robots.txt based on the environment should do the job.

BootstrapCDN not working "graphql error"

Just went to visit them from the marketing email I got. Looks like this:

Use local API proxy for frontend requests

Currently, requests are going to the API servers (API_URL) directly.

In the past, we did setup a proxy (/api/) for that purpose, we need to make sure it's used.

Webpack configuration is out of date

Our Webpack configuration is currently managed through Next.js:
https://github.com/opencollective/frontend/blob/master/src/next.config.js

We should:

• check and simplify the configuration
  • remove sass/scss support
  • remove emit-file-loader (seems not used)
• remove the unused 'loader' dependencies from our package.json
  • sass-loader
  • file-loader
  • image-webpack-loader
• removed webpack itself from our dependencies (we're only using it through next.js)

[UX] Color and hover color of URL

It's still nice at content of article or description of projects.

(https://opencollective.com/wwcodetwincities)

But, at the banner, it's a bad case.

hover:

(https://opencollective.com/pierreneter)

SVG images not scaling properly in IE & Edge

Issue can be seen by viewing https://reactiveui.net/ in Microsoft IE or Edge

In Edge, the SVG icons scale infinitely, filling the entire view area.
In IE, the SVG icons have infinite width, causing them to be in their own row.

I believe this issue can be resolved by adding the width attribute to the SVG.
Attaching a PR. New to GitHub so please let me know if I'm doing something incorrectly. :)

Search, Sort, Filter, Pagination features

Can we expect that you add these essential features?

Thanks

min-width:NaN in Logo component

Might happen when height is expressed as a non-integer value (eg: 10rem). See, CollectiveCover component for example.

In Logo component, minWidth is then computed with Math.max(0, parseInt(height)/2) which is a problem.

Broken expense category links

On a collective page like https://opencollective.com/yeoman, expense categories links are invalid.

It should be /yeoman/expenses/categories/Web%20services not /yeoman/expenses/Web%20services.

Also, the slug should be properly encoded: Web%20services not Web services

Remove Google Analytics support from codebase

We're proud of not using Google Analytics or similar in production.

We should remove the related code from our codebase to avoid any confusion.

Delete 'public' assets folder

It was copied from the website repository and is not needed from now on.

Improve currency formatting on Homepage active collectives

• fix "00 monthly spending"
• add currency (likely dollar $) when displaying a value

'null' background image

When browsing https://opencollective.com/yeoman

A null background image is loaded resulting in a bogus request to https://opencollective.com/null. That is in the end a performance issue because a full web page is loaded in place of a static image.

<div class="jsx-3812884289 jsx-3812884289 Member undefined large USER viewMode-USER">
  <div class="jsx-3812884289 jsx-3812884289">
    <a title="Frank Paczynski" href="/frankpaczynski">
      <div style="width:45px;height:45px;background-image:url(/static/images/avatar-01.svg)" class="jsx-179226476 jsx-179226476 Avatar undefined">
        <div style="background-image:url(null);width:45px;height:45px" class="jsx-179226476 jsx-179226476 image"></div>
      </div>
      <div class="jsx-3812884289 jsx-3812884289 bubble">
        <div class="jsx-3812884289 jsx-3812884289 name">Frank Paczynski</div>
        <div style="color:#797D7F" class="jsx-3812884289 jsx-3812884289 description"></div>
        <div style="color:#797D7F" class="jsx-3812884289 jsx-3812884289 meta since">Backer since October 2017</div>
        <div style="color:#797D7F" class="jsx-3812884289 jsx-3812884289 meta totalDonations">Total amount contributed: $3</div>
      </div>
    </a>
  </div>
</div>

In this snippet, there is also:

• some `undefined' classes that could be removed.
• a duplicate jsx class that could also be investigated.

Grammatically incorrect ui regarding contributor counts

Just a nit pick here, but even when there are no sponsors at all, it displays "organizations and x people are supporting us."

See screenshot for example:

Open collective ui bug https://imgur.com/gallery/uzbdP

Replace isomorphic-fetch

isomorphic-fetch is not actively maintained and is using old versions of node-fetch and whatwg-fetch:

"dependencies": {
    "node-fetch": "^1.0.1",
    "whatwg-fetch": ">=0.10.0"
  },

Potential maintained replacements are:

• cross-fetch: https://github.com/lquixada/cross-fetch
• isomorphic-unfetch: https://github.com/developit/unfetch/tree/master/packages/isomorphic-unfetch

Also, with cross-fetch and isomorphic-unfetch the 'polyfilling' is optional., which is a better approach.

We should also replace our calls from node-fetch to cross-fetch/isomorphic-unfetch and remove node-fetch as a dependency.

Make tests less verbose

Currently, when running npm test, there is a lot of data and errors output, even when the tests are properly passing.

Would be great to make it quieter:

• fix every warning
• silent console.log

API output was already taken care of by @clarete in:
opencollective/opencollective-api#1280

Convert to CircleCI 2.0

CircleCI 1.0 will be deprecated on August 31, 2018.

Let's do the migration.

Ensure staging can run with NODE_ENV=production

We need to run staging with NODE_ENV=production because we want the build process to be exactly the same as production one.

However, we need to ensure there is no undesirable side effects to it.

Issues with LoggedInUser cache

We currently cache LoggedInUser in localStorage for 1 hour, without invalidation strategy.

This can lead to data consistency issues, such as:

• when creating an Organization, the organization will not appear in the OrderForm for up to 1 hour

This could be mitigated with a lower TTL.

Warning in search test

When running npm run test:src. In src/pages/__tests__/search.test.js, we get:

Warning: Failed prop type: Link: unknown props found: title

Let's fix this warning.

This might be due that in TopBar.js, we use:

<Link href="/" title={intl.formatMessage(this.messages['menu.homepage'])}>

While the API for the Link component (coming from https://github.com/fridays/next-routes) is only exposing route, params and options.

Sign Up: Both Email and Password

Hi

Looks like the system asks for Email only during the Sign Up. In this scenario, a user needs to open her Email Inbox and click on the Login link every time she wants to visit the website.

If I am right, can you add/store the Password field in the db itself and let the user simply remember it.

Thanks

Icons seem to be placed incorrectly

See below image. The icons of the companies seem to be placed on a different card.

Markdown formatting not visible on rendered page

On edit page, I have :

But the final render is more like :

---

Browser: Firefox 60.0.1
OS: Ubuntu 16.04

GraphiQL peer dependencies warning

npm WARN [email protected] requires a peer of graphql@^0.6.0 || ^0.7.0 || ^0.8.0 but none was installed.
npm WARN [email protected] requires a peer of graphql@^0.6.0 || ^0.7.0 || ^0.8.0-b but none was installed.

Let's update to the latest version of GraphiQL.

GraphQL error / Page not Found when trying to reach collective

When trying to reach https://opencollective.com/paris this morning I get a Not Found error

Preview

Console output

main-9bb7b75b93ab8f42ab5f.js:1 Unhandled (in react-apollo) Error: GraphQL error: The loader.load() function must be called with a value,but got: null.
    at new t (https://opencollective.com/_next/static/commons/main-9bb7b75b93ab8f42ab5f.js:1:1253405)
    at t.currentResult (https://opencollective.com/_next/static/commons/main-9bb7b75b93ab8f42ab5f.js:1:1255668)
    at s.dataForChild (https://opencollective.com/_next/static/commons/main-9bb7b75b93ab8f42ab5f.js:1:50448)
    at s.render (https://opencollective.com/_next/static/commons/main-9bb7b75b93ab8f42ab5f.js:1:51324)
    at Ba (https://opencollective.com/_next/static/commons/main-9bb7b75b93ab8f42ab5f.js:1:364438)
    at Ua (https://opencollective.com/_next/static/commons/main-9bb7b75b93ab8f42ab5f.js:1:370058)
    at _i (https://opencollective.com/_next/static/commons/main-9bb7b75b93ab8f42ab5f.js:1:379211)
    at Ii (https://opencollective.com/_next/static/commons/main-9bb7b75b93ab8f42ab5f.js:1:379521)
    at is (https://opencollective.com/_next/static/commons/main-9bb7b75b93ab8f42ab5f.js:1:383073)
    at ns (https://opencollective.com/_next/static/commons/main-9bb7b75b93ab8f42ab5f.js:1:382575)

Stop Base64 encoding SVGs

It results in much bigger files.

Replace `styled-jsx` usage with `styled-components`

In conjunction with #434, we will be removing styled-jsx (and the postcss integration) with styled-components. See the RFC for more details about the change.

TODO:

• replace the global styles in src/pages/_document.js and src/components/Header.js with a single injectGlobal declaration in src/pages/_document.js
• create a Theme with common colors and sizing values (?)
• create media templates for consistent responsive settings
• update all pages (src/pages/) to use styled-components
• update all components (src/components/) to use styled-components

Upgrade react-apollo to the latest version

We're currently running react-apollo 1.4.16. This version is not maintained anymore and it starts to be difficult to find the documentation for it. The best I could find: https://s3.amazonaws.com/apollo-docs-1.x/api.html

The latest stable version is 2.1.4 but unfortunately the API is different and upgrading would need a lot of attention.

We might actually skip version 2, because version 3 is coming (3.0.0-alpha.2 is already available https://www.npmjs.com/package/react-apollo/v/3.0.0-alpha.2).

Also, important to note, we're keeping right now graphql to 0.12.3 and graphql-tag to 2.6.1 to keep the versions consistent with react-apollo.

Progress > 100% on Homepage active collectives