Skip to content

Commit

Permalink
Convert to Next.js (#876)
Browse files Browse the repository at this point in the history
* NextJS Migration WIP

* wip

* Convert API module to a service

* wip

* Get mentors and Links working

* another round

* nextjs 7 deprecated the use of process.browser :lolsob:

* use proper link imports

* typscript fixes

* allow implicit any

* Factor out mentor filtering (#883)

* fix tawk ssr + ignore lint (for now) (#884)

* fix(login): require refresh after login (#885)

* Fix TS Build Errors (#880)

* fix build

* Force authentication for "me" routes (#887)

* Update README (#881)

* fix: css vars not working (#889)

* Remove react-router completely (#886)

* Remove react-router completely

* Update src/Me/Me.tsx

Co-authored-by: Mosh Feu <[email protected]>

* remove comment

* A bit more polish on the auth redirect flow

Co-authored-by: Mosh Feu <[email protected]>

* fix: icons, body style and GA (#891)

* fix: mentor avatar click (#888)

* fix: mentors loader & /me menu styles (#892)

* fix: double redirection to auth0 (#894)

* ci: stop pr previews (#893)

* Persist Filters on Navigation (#896)

* Use new routes for Me menu links (#897)

* Use new routes for Me menu links

* add root url

* Use custom 404 page (#898)

* Prevent User Not Found toast on user profile page load (#903)

* Enforce code styles in ci (#904)

* get prettier working

* add golden script

* use correct golden command

* use prebuild hook

* Remove react-helmet in favor of next/head (#908)

* Remove react-helmet in favor of next/head

* Fix typo

* Next.js :: Add Vercel sponsorship banner (#907)

* pushing to the correct

* Update src/components/Sidebar/Sidebar.tsx

Co-authored-by: Brent Clark <[email protected]>

* Update src/components/Sidebar/Sidebar.tsx

Co-authored-by: Mosh Feu <[email protected]>

* Update src/components/Sidebar/Sidebar.tsx

Co-authored-by: Brent Clark <[email protected]>

* imported svg

* fixed bugs and repositioned the svg icon

* Update src/components/Sidebar/Sidebar.tsx

Co-authored-by: Brent Clark <[email protected]>

* Update src/components/Sidebar/Sidebar.tsx

Co-authored-by: Brent Clark <[email protected]>

* Update src/components/Sidebar/Sidebar.tsx

Co-authored-by: Brent Clark <[email protected]>

* Update src/components/MobileNavigation/MobileNavigation.js

Co-authored-by: Brent Clark <[email protected]>

* Update src/components/Sidebar/Sidebar.tsx

Co-authored-by: Brent Clark <[email protected]>

Co-authored-by: Murial Anindo <[email protected]>
Co-authored-by: Brent Clark <[email protected]>
Co-authored-by: Mosh Feu <[email protected]>

* feat: make user profile ssr (#909)

* fix: svgs and styles (#910)

fix svg files from cra format as image to a component. Also fixed some styles around them and modals

* vercel banner

* vercel banner placement

* disable tests for launch

* ignore a few places

* fix: mentors cache (#913)

Co-authored-by: Brent Clark <[email protected]>
Co-authored-by: Mosh Feu <[email protected]>
Co-authored-by: Steve <[email protected]>
Co-authored-by: Murial <[email protected]>
Co-authored-by: Murial Anindo <[email protected]>
  • Loading branch information
6 people authored Apr 1, 2022
1 parent 79ed424 commit 895d60f
Show file tree
Hide file tree
Showing 103 changed files with 4,836 additions and 6,942 deletions.
7 changes: 7 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"presets": ["next/babel"],
"plugins": [
"babel-plugin-macros",
["babel-plugin-styled-components", { "ssr": true, "displayName": true, "preprocess": false }]
]
}
11 changes: 6 additions & 5 deletions .env
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
REACT_APP_API_ENDPOINT=https://api.codingcoach.io
REACT_APP_AUTH_DOMAIN=codingcoach.eu.auth0.com
REACT_APP_AUTH_CLIENT_ID=IxICRc28Q2waSi00bUBp294pAt0RmcRa
REACT_APP_AUTH_CALLBACK=https://mentors.codingcoach.io
REACT_APP_EXPERIMENTS=newBackoffice
NEXT_PUBLIC_API_ENDPOINT=https://api.codingcoach.io
NEXT_PUBLIC_AUTH_DOMAIN=codingcoach.eu.auth0.com
NEXT_PUBLIC_AUTH_CLIENT_ID=IxICRc28Q2waSi00bUBp294pAt0RmcRa
NEXT_PUBLIC_AUTH_CALLBACK=https://mentors.codingcoach.io
NEXT_PUBLIC_EXPERIMENTS=newBackoffice
NEXT_PUBLIC_PUBLIC_URL=https://mentors.codingcoach.io
11 changes: 6 additions & 5 deletions .env.development
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
REACT_APP_API_ENDPOINT=https://api-staging.codingcoach.io
REACT_APP_AUTH_DOMAIN=codingcoach.eu.auth0.com
REACT_APP_AUTH_CLIENT_ID=v6QIkx65SRzIUN91JuTRQ0nC4t1veOLQ
REACT_APP_AUTH_CALLBACK=http://localhost:3000
REACT_APP_MAINTENANCE_MESSAGE=""
NEXT_PUBLIC_API_ENDPOINT=https://api-staging.codingcoach.io
NEXT_PUBLIC_AUTH_DOMAIN=codingcoach.eu.auth0.com
NEXT_PUBLIC_AUTH_CLIENT_ID=v6QIkx65SRzIUN91JuTRQ0nC4t1veOLQ
NEXT_PUBLIC_AUTH_CALLBACK=http://localhost:3000
NEXT_PUBLIC_MAINTENANCE_MESSAGE=""
NEXT_PUBLIC_PUBLIC_URL=http://localhost:3000
2 changes: 1 addition & 1 deletion .github/workflows/main.yml
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,4 @@ jobs:
node-version: ${{ matrix.node-version }}
- run: yarn
- run: npm run build --if-present
- run: npm test
# - run: npm test TODO: Enable tests again
5 changes: 4 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -37,4 +37,7 @@ cypress/screenshots
.eslintcache

#debug
debug.log
debug.log

# Next.js
.next
3 changes: 3 additions & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.next
build
tsconfig.json
11 changes: 6 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
[![Netlify Status](https://api.netlify.com/api/v1/badges/a3969a16-d0ad-4485-b205-d2b297f99051/deploy-status)](https://app.netlify.com/sites/codingcoach-io/deploys)
[![Tests](https://github.com/Coding-Coach/find-a-mentor/actions/workflows/main.yml/badge.svg)](https://github.com/Coding-Coach/find-a-mentor/actions/workflows/main.yml)
[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/Coding-Coach/find-a-mentor/issues)
![create-react-app supported](https://img.shields.io/badge/CRA-supported-green.svg)
Expand All @@ -7,6 +6,9 @@
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)


[![Powered By Vercel](https://github.com/Coding-Coach/find-a-mentor/blob/3390fb723a8148c06ea88a7fdb972fd81b5a6064/src/assets/powered-by-vercel.svg)](https://vercel.com/codingcoach?utm_source=coding-coach&utm_campaign=oss)


## Support Us

CodingCoach is a FREE platform that is built and managed entirely by volunteers. As always, there are ongoing costs to run this site such as servers, domains, email, and more. Please consider becoming a patron so we can continue our mission of being accessible and free ❤️
Expand Down Expand Up @@ -124,13 +126,13 @@ Coding Coach is on Slack! [Click here](https://join.slack.com/t/coding-coach/sha

---

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
This project was created with [Next.js](https://nextjs.org/)

## Available Scripts

In the project directory, you can run:

### `yarn start`
### `yarn dev`

Runs the app in the development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
Expand All @@ -140,8 +142,7 @@ You will also see any lint errors in the console.

### `yarn test`

Launches the test runner in the interactive watch mode.<br>
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
Launches the test runner.

### `yarn test:e2e`

Expand Down
4 changes: 1 addition & 3 deletions cypress/integration/login.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,7 @@ describe('login', () => {
fixture: 'favorites/get',
});
cy.visit('/');
cy.getByTestId('user-avatar')
.getByAltText('[email protected]')
.click();
cy.getByTestId('user-avatar').getByAltText('[email protected]').click();
cy.getByText('Logout').should('have.length', 1);
});
});
42 changes: 10 additions & 32 deletions cypress/integration/mentors.js
Original file line number Diff line number Diff line change
Expand Up @@ -61,20 +61,14 @@ describe('Mentor Filtering', () => {
cy.getByTestId('technology-filter-autocomplete')
.type('reactjs')
.type('{enter}');
cy.getAllByTestId('mentor-card')
.first()
.get('.tag')
.contains('reactjs');
cy.getAllByTestId('mentor-card').first().get('.tag').contains('reactjs');
});

it('verify filtered country label on mentors card', () => {
cy.getByTestId('country-filter-autocomplete')
.type('United States')
.type('{enter}');
cy.getAllByTestId('mentor-card')
.first()
.get('.country')
.contains('US');
cy.getAllByTestId('mentor-card').first().get('.country').contains('US');
});

it(`user can't approach non available mentor`, () => {
Expand All @@ -86,42 +80,26 @@ describe('Mentor Filtering', () => {

it(`user navigates to mentor profile`, () => {
cy.filterByName('B');
cy.get('.tags')
.children()
.filter('button')
.should('have.length', 5);
cy.get('.tags').children().filter('button').should('have.length', 5);
// user has 6 tags and 5 are shown +1
cy.getByText('+1');
cy.getByTestId('mentor-card')
.get('div.channels')
.click();
cy.getByTestId('mentor-card').get('div.channels').click();

cy.location().should(loc => {
cy.location().should((loc) => {
expect(loc.pathname).to.eq('/u/1');
});

cy.get('.tags')
.children()
.filter('button')
.should('have.length', 6);
cy.get('.tags').children().filter('button').should('have.length', 6);
cy.getByText('github');
});

it.skip('user can like mentor', () => {
cy.get('button.like-button')
.first()
.click();
cy.get('button.like-button i')
.first()
.should('have.class', 'liked');
cy.get('button.like-button').first().click();
cy.get('button.like-button i').first().should('have.class', 'liked');
});

it.skip('user can unlike mentor', () => {
cy.get('button.like-button')
.first()
.click();
cy.get('button.like-button i')
.first()
.should('have.class', 'fa-heart-o');
cy.get('button.like-button').first().click();
cy.get('button.like-button i').first().should('have.class', 'fa-heart-o');
});
});
6 changes: 6 additions & 0 deletions next-env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
43 changes: 43 additions & 0 deletions next.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/**
* @type {import('next').NextConfig}
*/
const nextConfig = {
typescript: {
// !! WARN !!
// Dangerously allow production builds to successfully complete even if
// your project has type errors.
// !! WARN !!
ignoreBuildErrors: true,
tsconfigPath: './tsconfig.json',
},
eslint: {
// Warning: This allows production builds to successfully complete even if
// your project has ESLint errors.
ignoreDuringBuilds: true,
},
webpack5: true,
webpack: (config) => {
config.resolve.fallback = {
fs: false,
path: false,
os: false,
module: false,
};

config.module.rules.push({
test: /\.svg$/,
use: [
{
loader: '@svgr/webpack',
options: {
svgo: false,
},
},
],
});

return config;
},
};

module.exports = nextConfig;
13 changes: 7 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,24 +8,24 @@
"dependencies": {
"@sentry/browser": "^5.6.3",
"auth0-js": "^9.13.2",
"babel-plugin-styled-components": "^2.0.1",
"classnames": "^2.3.1",
"express": "^4.17.1",
"inquirer-autocomplete-prompt": "^1.0.1",
"inquirer-checkbox-plus-prompt": "^1.0.1",
"iso-639-1": "^2.1.3",
"lodash": "^4.17.21",
"next": "^12.0.4",
"prop-types": "^15.7.2",
"react": "^16.9.0",
"react-aria-offcanvas": "^1.3.4",
"react-autocomplete": "^1.8.1",
"react-dom": "^16.9.0",
"react-helmet": "^6.1.0",
"react-infinite-scroll-component": "^4.5.3",
"react-infinite-scroller": "^1.2.4",
"react-modal-hook": "^3.0.0",
"react-obfuscate": "^3.6.2",
"react-onclickoutside": "^6.9.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.1",
"react-select": "^3.0.4",
"react-tippy": "^1.2.3",
Expand All @@ -35,12 +35,14 @@
"svg-country-flags": "^1.2.6"
},
"scripts": {
"start": "react-scripts start",
"build": "node scripts/pre-build.mjs && react-scripts build",
"dev": "next dev",
"prebuild": "yarn golden",
"build": "next build",
"start": "next start",
"test": "yarn test:unit && yarn test:e2e:run",
"test:unit": "react-scripts test",
"test:unit:update-snapshot": "react-scripts test -u",
"eject": "react-scripts eject",
"golden": "yarn prettier",
"predeploy": "yarn run build",
"deploy": "gh-pages -d build",
"prettier": "prettier \"**/*.{json,js}\" --check --loglevel log",
Expand Down Expand Up @@ -83,7 +85,6 @@
"@types/react": "^17.0.11",
"@types/react-dom": "^17.0.7",
"@types/react-helmet": "^6.1.2",
"@types/react-router-dom": "^5.1.8",
"@types/react-select": "^4.0.15",
"@types/styled-components": "^5.1.0",
"ajv": "^6.10.2",
Expand Down
9 changes: 9 additions & 0 deletions pages/404.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import PageNotFound from '../src/PageNotFound';

function FourOhFour() {
return (
<PageNotFound />
)
}

export default FourOhFour
59 changes: 59 additions & 0 deletions pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
// Global CSS imports
import '../src/components/layouts/App/App.css';
import 'react-toastify/dist/ReactToastify.css';
import 'react-tippy/dist/tippy.css';
import '../src/components/MemberArea/EditProfile.css';
import '../src/components/AutoComplete/AutoComplete.css';
import '../src/components/Content/Content.css';
import '../src/components/Filter/Filter.css';
import '../src/components/FilterClear/FilterClear.css';
import '../src/components/Input/Input.css';
import '../src/components/MentorsList/MentorList.css';
import '../src/components/Modal/Modal.css';
import '../src/components/SocialLinks/SocialLinks.css';
import '../src/index.css';

// import App from 'next/app'

import Head from './head';
import { ApiProvider } from '../src/context/apiContext/ApiContext';
import { AuthProvider } from '../src/context/authContext/AuthContext';
import { UserProvider } from '../src/context/userContext/UserContext';
import { FiltersProvider } from '../src/context/filtersContext/FiltersContext';
import { ModalHookProvider } from '../src/context/modalContext/ModalContext';
import { MentorsProvider } from '../src/context/mentorsContext/MentorsContext';

function MyApp({ Component, pageProps }) {
return (
<>
<Head />
<AuthProvider>
<ApiProvider>
<UserProvider>
<ModalHookProvider>
<FiltersProvider>
<MentorsProvider>
<Component {...pageProps} />
</MentorsProvider>
</FiltersProvider>
</ModalHookProvider>
</UserProvider>
</ApiProvider>
</AuthProvider>
</>
);
}

// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.
//
// MyApp.getInitialProps = async (appContext) => {
// // calls page's `getInitialProps` and fills `appProps.pageProps`
// const appProps = await App.getInitialProps(appContext);
//
// return { ...appProps }
// }

export default MyApp;
30 changes: 30 additions & 0 deletions pages/_document.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import Document from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const sheet = new ServerStyleSheet()
const originalRenderPage = ctx.renderPage

try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) => (props) =>
sheet.collectStyles(<App {...props} />),
})

const initialProps = await Document.getInitialProps(ctx)
return {
...initialProps,
styles: (
<>
{initialProps.styles}
{sheet.getStyleElement()}
</>
),
}
} finally {
sheet.seal()
}
}
}
Loading

1 comment on commit 895d60f

@vercel
Copy link

@vercel vercel bot commented on 895d60f Apr 1, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deployment failed with the following error:

The most recent charge for your active payment method has failed. Please update it here: https://vercel.com/teams/coding-coach/settings/billing.

Please sign in to comment.