Random Problem Generation

[doranmartinez]

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

[Shashank5665]

Hello there,
Can I please try to work on this issue?
I would like to contribute!

[seanprashad]

Hi @Shashank5665! Yes, please go ahead and let me know if you have any questions!

[seanprashad]

Hey @Shashank5665! 😁 I'm checking in to see how you're doing and if I can provide any help/suggestions?

[Shashank5665]

Hello @seanprashad 😃, I was able to successfully set up the project in my system. But, I was not familiar with react tables, useMemo, and a few other things in this project, and currently, my college exams are going on too😐. So, I was a bit busy with that.. but yeah I am in the process of learning react and I will definitely complete this once my exams are over, which will get over within 2 weeks or so.

[seanprashad]

Hello @seanprashad 😃, I was able to successfully set up the project in my system. But, I was not familiar with react tables, useMemo, and a few other things in this project, and currently, my college exams are going on too😐. So, I was a bit busy with that.. but yeah I am in the process of learning react and I will definitely complete this once my exams are over, which will get over within 2 weeks or so.

Okay sounds good! Don't hesitate to let me know if you need help, or if you'd like to open this up for another contributor. Good luck in your exams!

[Shashank5665]

Hello @seanprashad, My exams are over :D and I am continuing with the feature, I created a button that when clicked generates a random question, but I have made it such that it opens a new tab and takes the user to the leetcode site with the generated random question. I am finding it a bit difficult in understanding the Header and Cell cuz of which I am not getting how to render the generated question as a row.

[seanprashad]

Hello @seanprashad, My exams are over :D and I am continuing with the feature, I created a button that when clicked generates a random question, but I have made it such that it opens a new tab and takes the user to the leetcode site with the generated random question. I am finding it a bit difficult in understanding the Header and Cell cuz of which I am not getting how to render the generated question as a row.

Sounds like you're making solid progress so far! Do you have a branch that we could take a look at? Feel free to open a "Draft" Pull Request - that would make it much easier for me to concretely point you in the right direction!

As far as Header and Cell, Header is the code that will generate the "first row" of the table where we have things like dropdown menus:

I think we could place the "Random question" button inside the Header section for Questions, aka right here:

leetcode-patterns/src/components/Table/index.js

Line 235 in 8d25c76

Header: 'Questions',

Note that we'll need to add some JavaScript code to specify that "We want to customize this header with a random question button". We've actually already done this for the Hide/Show Patterns toggle - use it as a baseline for your work:

leetcode-patterns/src/components/Table/index.js

Lines 289 to 309 in 8d25c76

	Header: () => {
	return (
	// eslint-disable-next-line
	// eslint-disable-next-line jsx-a11y/label-has-associated-control
	<label htmlFor="pattern-toggle">
	<span>Show/Hide Patterns </span>
	<Toggle
	id="pattern-toggle"
	defaultChecked={showPatterns[0]}
	icons={{
	checked: null,
	unchecked: null,
	}}
	onChange={() => {
	showPatterns[0] = !showPatterns[0];
	setShowPatterns([...showPatterns]);
	}}
	/>
	</label>
	);
	},

Cell is used to refer to the contents of each row - I don't think we'll need to edit the cell in this case, since we don't want the "Randomize Question" button to show up for each and every row! Start small and try to get a button that doesn't do anything with the text "Hello World" to appear. After that, we can discuss how to random the href link that will open when clicked!

Please let me know if anything is unclear - you've got this! 😁

[seanprashad]

Fixed with #240

[Shashank5665]

Thank you so much @doranmartinez for opening this issue, I was able to implement this feature with the help of @seanprashad 🙌