Skip to content

New changes with randomQuestion #237

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 5 commits into from
Closed

New changes with randomQuestion #237

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9e1106a
New changes with randomQuestion
Shashank5665 Aug 20, 2022
e2abe6a
changes to randomQuestion button
Shashank5665 Aug 21, 2022
05a0559
created a seperate function to generate ramdom question Id.
Shashank5665 Aug 21, 2022
ccd724b
function name change
Shashank5665 Aug 21, 2022
8b4acdf
function name change
Shashank5665 Aug 21, 2022
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
New changes with randomQuestion
  • Loading branch information
@Shashank5665
Shashank5665 committed Aug 20, 2022
commit 9e1106a269a4f811ce3ce53c0649d2a38fad3c8a
3 changes: 2 additions & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

20 changes: 20 additions & 0 deletions src/components/Table/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -362,6 +362,26 @@ const Table = () => {
},
Filter: SelectColumnFilter,
},
// button to display a random question
Copy link
Owner

@seanprashad seanprashad Aug 20, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Nice stuff! We should take this code you've written and move it over to the existing Questions column instead of creating a new one - may you please make the following changes:

diff --git a/src/components/Table/index.js b/src/components/Table/index.js index fff57a0..83b30bb 100644 --- a/src/components/Table/index.js +++ b/src/components/Table/index.js @@ -14,7 +14,12 @@ import { import Toggle from 'react-toggle'; import ReactTooltip from 'react-tooltip'; import { useTable, useFilters, useSortBy } from 'react-table'; -import { FaLock, FaExternalLinkAlt, FaQuestionCircle } from 'react-icons/fa'; +import { + FaLock, + FaExternalLinkAlt, + FaRandom, + FaQuestionCircle, +} from 'react-icons/fa'; import { DefaultColumnFilter, SelectDifficultyColumnFilter, @@ -201,7 +206,34 @@ const Table = () => { }, }, { - Header: 'Questions', + Header: () => { + return ( + <> + <div + style={{ whiteSpace: 'nowrap', display: 'inline-block' }} + > + Questions{' '} + <Button + onClick={() => { + const random = Math.floor( + Math.random() * questions.length, + ); + const questionId = questions[random].id; + const questionSlug = questions[questionId].url; + window.open(`${questionSlug}`, '_blank'); + }} + color="dark" + id="random-question-button" + size="sm" + > + <span data-tip="Try a random question!"> + <FaRandom /> + </span> + </Button> + </div> + </> + ); + }, accessor: 'questions', disableSortBy: true, Cell: cellInfo => { @@ -362,26 +394,6 @@ const Table = () => { }, Filter: SelectColumnFilter, }, - // button to display a random question - { - randomQuestion: () => { - const random = Math.floor(Math.random() * questions.length); - const questionId = questions[random].id; - return questionId; - }, - Header: () => { - return ( - <Button - onClick={() => {}} - color="success" - id="random-question-button" - > - Random Question - </Button> - ); - }, - accessor: 'randomQuestion', - }, ], }, ],

Here's what it will look like afterwards:

Screenshot 2022-08-20 at 1 26 55 PM
Copy link
Contributor Author

@Shashank5665 Shashank5665 Aug 20, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Great, thank you,
Btw, can you please explain to me what the below two lines do, I assume they show the changes, but how do I apply those changes🤔, I am doing it manually by copying and pasting, is that how I do it?

diff --git a/src/components/Table/index.js b/src/components/Table/index.js index fff57a0..83b30bb 100644

are these two separate commands or just a single command?
Copy link
Owner

Choose a reason for hiding this comment

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

Yeah no worries! That line is output from me making the changes locally and then creating a commit so I have it just incase. I could have pushed this commit to your branch, but I'm confident you've got things under control!

As far as applying the changes, you can manually copy and paste them, or we could have done it via git format-patch: https://devconnected.com/how-to-create-and-apply-git-patch-files/. For example, I would have made the changes on my laptop and then create & uploaded the .patch for you to apply via git am.
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thank you so much, I am learning so much with this contribution 😊
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, done with all the changes :D. It works fine, but how do I modify the cellInfo function such that, it only renders the row whose Id matches with the Question Id generated by the randomQuestionId function? , I tried with many changes, but it quite didn't work :( as I wanted it to work. Or maybe I shouldn't change the cellInfo, rather I have to render the matched row from the Header's onClick function. Basically, I need to create a separate function say generateMatchedRow which will render the row which is matched with the randomId and then call it inside the onClick function.
Copy link
Owner

Choose a reason for hiding this comment

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

Ah I think there might be a misunderstanding! The code you've written right now actually solves what the original poster wanted in #170:

Would be cool to have a button that randomly selected a problem to study.

This means that we don't need to modify anything else related to cellInfo - your code is great as is!
{
randomQuestion: () => {
const random = Math.floor(Math.random() * questions.length);
const questionId = questions[random].id;
return questionId;
},
Header: () => {
return (
<Button
onClick={() => {}}
color="success"
id="random-question-button"
>
Random Question
</Button>
);
},
accessor: 'randomQuestion',
},
],
},
],
Expand Down