Feat new react-play: GitHub User Search #309

TejasShekar · 2022-06-14T11:42:03Z

First thing, PLEASE READ THIS: ReactPlay Code Review Checklist

Description

Added a new react-play for beginner ideas. Play name is GitHub User Search

Used basic hooks like useState and useEffect for managing data and error handling
Used Axios for data fetching
Added media queries for responsiveness
Added rate limit info.
Kept it as simple as possible

Fixes # (issue)

Type of change

Please delete options that are not relevant.

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How Has This Been Tested?

I have not tested my feature as I am unaware of the testing procedures at the moment.

Checklist:

I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes
Any dependent changes have been merged and published in downstream modules

- states for loading and error are managed in one single state

states to manage API response for data and rate limits have been reduced to one state.

vercel · 2022-06-14T11:42:07Z

@TejasShekar is attempting to deploy a commit to a Personal Account owned by @reactplay on Vercel.

@reactplay first needs to authorize it.

vercel · 2022-06-14T11:48:03Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
react-play	✅ Ready (Inspect)	Visit Preview	Jun 27, 2022 at 5:18AM (UTC)

atapas · 2022-06-14T12:08:42Z

The build fails with this error:

tailwind.config.js

atapas · 2022-06-14T12:18:57Z

The build fails with this error:

@TejasShekar You may want to run yarn build locally and see if you get a similar error there. It happens usually when we make a call that takes time to fetch data. Kindly do some research and proceed.

TejasShekar · 2022-06-14T12:58:54Z

The build fails with this error:

@TejasShekar You may want to run yarn build locally and see if you get a similar error there. It happens usually when we make a call that takes time to fetch data. Kindly do some research and proceed.

Neither yarn build nor npm run build seems to have issue on my local system. The build does complete and I am able to run the build folder on my localhost via live server.
But I would like to inform you about the two errors that I have been consistent when I run the build commands i.e. either yarn or npm,

Error No. 1 :

🔥  error at /plays/dynamic-routes/:menu 
Error: EINVAL: invalid argument, mkdir 'D:\Own Projects\react-play\build\plays\dynamic-routes\:menu'
    at Object.mkdirSync (node:fs:1334:3)
    at Function.sync (D:\Own Projects\react-play\node_modules\react-snap\node_modules\mkdirp\index.js:71:13)
    at saveAsHtml (D:\Own Projects\react-play\node_modules\react-snap\index.js:565:12)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async afterFetch (D:\Own Projects\react-play\node_modules\react-snap\index.js:776:9)
    at async fetchPage (D:\Own Projects\react-play\node_modules\react-snap\src\puppeteer_utils.js:244:24) {
  errno: -4071,
  syscall: 'mkdir',
  code: 'EINVAL',
  path: 'D:\\Own Projects\\react-play\\build\\plays\\dynamic-routes\\:menu'
}

Error No. 2

🔥  pageerror at /plays/simple-live-chat: FirebaseError: Firebase: Error (auth/invalid-api-key).
    at Gc (../node_modules/@firebase/auth/src/core/util/assert.ts:128:9)
    at Kc (../node_modules/@firebase/auth/src/core/util/assert.ts:153:29)
    at _assert (../node_modules/@firebase/auth/src/core/auth/register.ts:67:10)
    at app (../node_modules/@firebase/auth/src/core/auth/register.ts:90:11)
    at instanceFactory (../node_modules/@firebase/component/src/provider.ts:318:32)
    at getOrInitializeService (../node_modules/@firebase/component/src/provider.ts:242:26)
    at initialize (../node_modules/@firebase/auth/src/core/auth/initialize.ts:66:24)
    at initializeAuth (../node_modules/@firebase/auth/src/platform_browser/index.ts:44:9)
    at getAuth (plays/simple-live-chat/components/signin-button.jsx:23:15)

The only message related to my submitted play that I saw was
onsole.log at /plays: Cover image not found for the play GitHub User Search

atapas · 2022-06-14T13:12:52Z

The build fails with this error:

@TejasShekar You may want to run yarn build locally and see if you get a similar error there. It happens usually when we make a call that takes time to fetch data. Kindly do some research and proceed.

Neither yarn build nor npm run build seems to have issue on my local system. The build does complete and I am able to run the build folder on my localhost via live server. But I would like to inform you about the two errors that I have been consistent when I run the build commands i.e. either yarn or npm,

Error No. 1 :

🔥  error at /plays/dynamic-routes/:menu 
Error: EINVAL: invalid argument, mkdir 'D:\Own Projects\react-play\build\plays\dynamic-routes\:menu'
    at Object.mkdirSync (node:fs:1334:3)
    at Function.sync (D:\Own Projects\react-play\node_modules\react-snap\node_modules\mkdirp\index.js:71:13)
    at saveAsHtml (D:\Own Projects\react-play\node_modules\react-snap\index.js:565:12)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async afterFetch (D:\Own Projects\react-play\node_modules\react-snap\index.js:776:9)
    at async fetchPage (D:\Own Projects\react-play\node_modules\react-snap\src\puppeteer_utils.js:244:24) {
  errno: -4071,
  syscall: 'mkdir',
  code: 'EINVAL',
  path: 'D:\\Own Projects\\react-play\\build\\plays\\dynamic-routes\\:menu'
}

Error No. 2

🔥  pageerror at /plays/simple-live-chat: FirebaseError: Firebase: Error (auth/invalid-api-key).
    at Gc (../node_modules/@firebase/auth/src/core/util/assert.ts:128:9)
    at Kc (../node_modules/@firebase/auth/src/core/util/assert.ts:153:29)
    at _assert (../node_modules/@firebase/auth/src/core/auth/register.ts:67:10)
    at app (../node_modules/@firebase/auth/src/core/auth/register.ts:90:11)
    at instanceFactory (../node_modules/@firebase/component/src/provider.ts:318:32)
    at getOrInitializeService (../node_modules/@firebase/component/src/provider.ts:242:26)
    at initialize (../node_modules/@firebase/auth/src/core/auth/initialize.ts:66:24)
    at initializeAuth (../node_modules/@firebase/auth/src/platform_browser/index.ts:44:9)
    at getAuth (plays/simple-live-chat/components/signin-button.jsx:23:15)

The only message related to my submitted play that I saw was onsole.log at /plays: Cover image not found for the play GitHub User Search

@erayalkis I was wondering if you know about the Timeout error we see on preview build.

@TejasShekar Ignore the other two. They are harmless.

TejasShekar · 2022-06-14T13:42:01Z

@atapas You might want to look into this. Seems like an issue with puppeteer.
https://ourcodeworld.com/articles/read/1106/how-to-solve-puppeteer-timeouterror-navigation-timeout-of-30000-ms-exceeded

atapas · 2022-06-14T15:05:15Z

@atapas You might want to look into this. Seems like an issue with puppeteer. https://ourcodeworld.com/articles/read/1106/how-to-solve-puppeteer-timeouterror-navigation-timeout-of-30000-ms-exceeded

We use Puppeteer from the react-snap. Do you want to check from that side? It is in package.json file. May be we need to set some flag there.

For this reference: puppeteer/puppeteer#782 (comment)

If you want to check it out, can do changes in your branch and see if that fixes the issue. I'll also check it out tomorrow.

@TejasShekar

erayalkis · 2022-06-14T23:07:41Z

Hi @atapas! I'd love to help out! 😄
I've looked into this error a while ago and it seems like the only available options were either downgrading react-snap or puppeteer. I believe we downgraded puppeteer a while ago, so I'm going to assume that didn't work. We could maybe try downgrading react-snap?

atapas · 2022-06-15T00:59:04Z

Hi @atapas! I'd love to help out! 😄
I've looked into this error a while ago and it seems like the only available options were either downgrading react-snap or puppeteer. I believe we downgraded puppeteer a while ago, so I'm going to assume that didn't work. We could maybe try downgrading react-snap?

Thanks! Give it a shot. You can use this same branch where the error is reproduced everytime.

TejasShekar · 2022-06-17T12:39:35Z

I have been trying to find out the error due to which the build is failing on vercel. My recent commits before the deployment started failing was just merging the commits from upstream repo to my origin repo and remove the empty stylesheet and its import.
yarn build now fails locally as well only when the firebase: invalid key error comes from the live chat play. I comment out the related code in meta.js and run the build command and it is successful.
Is that issue not fixable ? @atapas

atapas · 2022-06-17T13:32:16Z

I have been trying to find out the error due to which the build is failing on vercel. My recent commits before the deployment started failing was just merging the commits from upstream repo to my origin repo and remove the empty stylesheet and its import. yarn build now fails locally as well only when the firebase: invalid key error comes from the live chat play. I comment out the related code in meta.js and run the build command and it is successful. Is that issue not fixable ? @atapas

@TejasShekar It is not an issue with your code. I think it is the problem with vercel. I'll look into it.

Regarding build failing locally, you need create an .env file and add following keys to it with valid firebase values. You can get these from your firebase profiles.

REACT_APP_FIREBASE_API_KEY,
REACT_APP_FIREBASE_AUTH_DOMAIN,
REACT_APP_FIREBASE_DATABASE_URL,
REACT_APP_FIREBASE_PROJECT_ID,
REACT_APP_FIREBASE_STORAGE_BUCKET,
REACT_APP_MESSAGING_SENDERID,
REACT_APP_FIREBASE_APP_ID,

TejasShekar · 2022-06-17T13:39:33Z

I have been trying to find out the error due to which the build is failing on vercel. My recent commits before the deployment started failing was just merging the commits from upstream repo to my origin repo and remove the empty stylesheet and its import. yarn build now fails locally as well only when the firebase: invalid key error comes from the live chat play. I comment out the related code in meta.js and run the build command and it is successful. Is that issue not fixable ? @atapas

@TejasShekar It is not an issue with your code. I think it is the problem with vercel. I'll look into it.

Regarding build failing locally, you need create an .env file and add following keys to it with valid firebase values. You can get these from your firebase profiles.

REACT_APP_FIREBASE_API_KEY,
REACT_APP_FIREBASE_AUTH_DOMAIN,
REACT_APP_FIREBASE_DATABASE_URL,
REACT_APP_FIREBASE_PROJECT_ID,
REACT_APP_FIREBASE_STORAGE_BUCKET,
REACT_APP_MESSAGING_SENDERID,
REACT_APP_FIREBASE_APP_ID,

Yes sir, I understood I don't have the .env file as it was not me who built the chat app and we should never push them to GitHub and only include them in deployment tools like vercel, netlify so that build does not fail.

atapas · 2022-06-19T14:52:46Z

@TejasShekar Please pull the branch from main.. the React snap issue is avoided for the preview build.

- added type attr for form button - prettier did its work on the other file.

atapas

My Review is done, looks good.

@koustov could you please finish too?

atapas · 2022-06-26T17:46:47Z

Hi @TejasShekar

We have some massive changes in the data store and we are changing how the play gets created for a better usability. As this play is interim, we need to make sure it migrates correctly. Could you please ping me on Discord so that I make sure everything is placed?

https://discord.gg/YbmXwU5f

TejasShekar · 2022-06-27T04:32:50Z

Hi @TejasShekar

We have some massive changes in the data store and we are changing how the play gets created for a better usability. As this play is interim, we need to make sure it migrates correctly. Could you please ping me on Discord so that I make sure everything is placed?

https://discord.gg/YbmXwU5f

Sure, sir.

-redundant code

TejasShekar · 2022-06-27T05:13:05Z

@atapas All changes as requested has been made. Awaiting reviews and merging.

koustov

lgtm

atapas · 2022-06-28T14:15:05Z

@all-contributors please add @TejasShekar for Code

allcontributors · 2022-06-28T14:15:15Z

@atapas

I've put up a pull request to add @TejasShekar! 🎉

TejasShekar added 11 commits June 14, 2022 15:42

build: added axios as dependency

c50a738

initial commit

47e0d37

feat: add user card component

05c2857

feat: add full GitHub user search functionality

76b4d36

styles: add media queries for smaller screen

8e42548

fix: add loader and error handling

9df0796

styles: update styles for media queries

d122db0

refactor: merged two states into one

71fcd96

- states for loading and error are managed in one single state

refactor: reduced the data states

9718a05

states to manage API response for data and rate limits have been reduced to one state.

refactor: minor refactor

d2c59c9

Update GitHubUserSearch.jsx

6438dff

TejasShekar requested review from atapas and koustov as code owners June 14, 2022 11:42

vercel bot had a problem deploying to Preview June 14, 2022 11:51 Failure

TejasShekar mentioned this pull request Jun 14, 2022

[Add a Play]: GitHub User Search #310

Closed

atapas linked an issue Jun 14, 2022 that may be closed by this pull request

[Add a Play]: GitHub User Search #310

Closed

atapas assigned TejasShekar Jun 14, 2022

atapas reviewed Jun 14, 2022

View reviewed changes

tailwind.config.js Show resolved Hide resolved

TejasShekar requested a review from atapas June 14, 2022 13:09

atapas requested a review from erayalkis June 14, 2022 13:16

TejasShekar added 2 commits June 17, 2022 11:59

Merge branch 'main' of https://github.com/reactplay/react-play

bc23eac

remove stylesheet

308b541

TejasShekar dismissed koustov’s stale review via 308b541 June 17, 2022 06:32

vercel bot had a problem deploying to Preview June 17, 2022 06:53 Failure

fix: import error

b70763c

vercel bot had a problem deploying to Preview June 17, 2022 09:47 Failure

TejasShekar added 2 commits June 20, 2022 12:56

Merge branch 'main' of https://github.com/reactplay/react-play

5b94372

refactor: negligible changes

086aea0

- added type attr for form button - prettier did its work on the other file.

vercel bot deployed to Preview June 20, 2022 08:06 View deployment

atapas added the waiting for reviewers label Jun 22, 2022

atapas previously approved these changes Jun 22, 2022

View reviewed changes

Merge branch 'main' of https://github.com/reactplay/react-play

aabf449

vercel bot deployed to Preview June 24, 2022 09:20 View deployment

Merge branch 'main' of https://github.com/reactplay/react-play

735334b

TejasShekar dismissed atapas’s stale review via 735334b June 27, 2022 05:10

fix: remove id and getPlayById

4fb5beb

-redundant code

vercel bot deployed to Preview June 27, 2022 05:18 View deployment

atapas approved these changes Jun 28, 2022

View reviewed changes

koustov approved these changes Jun 28, 2022

View reviewed changes

koustov merged commit 9a47972 into reactplay:main Jun 28, 2022

allcontributors bot mentioned this pull request Jun 28, 2022

docs: add TejasShekar as a contributor for code #359

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat new react-play: GitHub User Search #309

Feat new react-play: GitHub User Search #309

TejasShekar commented Jun 14, 2022 •

edited

vercel bot commented Jun 14, 2022

vercel bot commented Jun 14, 2022 •

edited

atapas commented Jun 14, 2022

atapas commented Jun 14, 2022

TejasShekar commented Jun 14, 2022 •

edited

atapas commented Jun 14, 2022

Error No. 1 :

Error No. 2

TejasShekar commented Jun 14, 2022

atapas commented Jun 14, 2022

erayalkis commented Jun 14, 2022

atapas commented Jun 15, 2022

TejasShekar commented Jun 17, 2022 •

edited

atapas commented Jun 17, 2022

TejasShekar commented Jun 17, 2022

atapas commented Jun 19, 2022

atapas left a comment

atapas commented Jun 26, 2022

TejasShekar commented Jun 27, 2022

TejasShekar commented Jun 27, 2022

koustov left a comment

atapas commented Jun 28, 2022

allcontributors bot commented Jun 28, 2022

Feat new react-play: GitHub User Search #309

Feat new react-play: GitHub User Search #309

Conversation

TejasShekar commented Jun 14, 2022 • edited

Description

Type of change

How Has This Been Tested?

Checklist:

vercel bot commented Jun 14, 2022

vercel bot commented Jun 14, 2022 • edited

atapas commented Jun 14, 2022

atapas commented Jun 14, 2022

TejasShekar commented Jun 14, 2022 • edited

Error No. 1 :

Error No. 2

atapas commented Jun 14, 2022

Error No. 1 :

Error No. 2

TejasShekar commented Jun 14, 2022

atapas commented Jun 14, 2022

erayalkis commented Jun 14, 2022

atapas commented Jun 15, 2022

TejasShekar commented Jun 17, 2022 • edited

atapas commented Jun 17, 2022

TejasShekar commented Jun 17, 2022

atapas commented Jun 19, 2022

atapas left a comment

Choose a reason for hiding this comment

atapas commented Jun 26, 2022

TejasShekar commented Jun 27, 2022

TejasShekar commented Jun 27, 2022

koustov left a comment

Choose a reason for hiding this comment

atapas commented Jun 28, 2022

allcontributors bot commented Jun 28, 2022

TejasShekar commented Jun 14, 2022 •

edited

vercel bot commented Jun 14, 2022 •

edited

TejasShekar commented Jun 14, 2022 •

edited

TejasShekar commented Jun 17, 2022 •

edited