changes to randomQuestion button

Author: Shashank5665

package-lock.json

@@ -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',
-          },
         ],
       },
     ],