Complete working frontend template

src/App.test.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { render, screen } from '@testing-library/react'
 import App from './App'
 
-test('renders learn react link', () => {
+test('renders leetcode stats title', () => {
   render(<App />)
-  const linkElement = screen.getByText(/learn react/i)
-  expect(linkElement).toBeInTheDocument()
+  const titleElement = screen.getByText(/leetcode stats/i)
+  expect(titleElement).toBeInTheDocument()
 })

src/App.tsx

@@ -10,10 +10,10 @@ import './App.css'
 const mainTheme = createMuiTheme({
   palette: {
     primary: {
-      main: '#ff1744',
+      main: '#33eb91',
     },
     secondary: {
-      main: '#673ab7',
+      main: '#33eb91',
     },
     // Background colors
     info: {

src/components/Content.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useRef } from 'react'
-import axios from 'axios'
 import { makeStyles } from '@material-ui/core/styles'
 import { Grid, Paper, TextField, MenuItem, Typography } from '@material-ui/core'
 import GitHubIcon from '@material-ui/icons/GitHub'
@@ -8,6 +7,7 @@ import ImageIcon from '@material-ui/icons/Image'
 import BorderColorIcon from '@material-ui/icons/BorderColor'
 import IconButton from './IconButton'
 import { ThemeType, defaultTheme, themes } from '../static/themes'
+import getStatsReq from '../utils/getStats'
 
 const useStyles = makeStyles((theme) => ({
   paper: {
@@ -22,8 +22,21 @@ const useStyles = makeStyles((theme) => ({
   text: {
     fontSize: theme.spacing(5),
   },
-  section: {
+  colSection: {
     padding: theme.spacing(2),
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  rowSection: {
+    padding: theme.spacing(2),
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  textFieldLabel: {
+    color: theme.palette.primary.main,
+  },
+  textInput: {
+    color: 'white',
   },
 }))
 
@@ -58,6 +71,7 @@ function Content(): JSX.Element {
   // onClick function for generate button
   const genOnClick = () => {
     setGenerated(true)
+    getStatsReq()
   }
 
   // onClick function for copy image button
@@ -73,7 +87,7 @@ function Content(): JSX.Element {
   return (
     <Grid item>
       <Paper elevation={12} className={classes.paper}>
-        <div className={classes.section}>
+        <div className={classes.colSection}>
           <Typography
             color="secondary"
             align="center"
@@ -88,48 +102,64 @@ function Content(): JSX.Element {
             onClick={gitOnClick}
           />
         </div>
-        <div className={classes.section}>
+        <div className={classes.rowSection}>
           <TextField
             fullWidth
             autoComplete="off"
             label="Username"
+            placeholder="Username"
             inputRef={nameRef}
+            InputLabelProps={{
+              shrink: true,
+              className: classes.textFieldLabel,
+            }}
+            InputProps={{
+              className: classes.textInput,
+            }}
           />
           <TextField
             fullWidth
             select
             label="Theme"
             value={theme.value}
-            onChange={handleThemeChange}>
+            onChange={handleThemeChange}
+            InputLabelProps={{
+              className: classes.textFieldLabel,
+            }}
+            InputProps={{
+              className: classes.textInput,
+            }}>
             {themes.map((themeX) => (
               <MenuItem key={themeX.value} value={themeX.value}>
                 {themeX.value}
               </MenuItem>
             ))}
           </TextField>
         </div>
-        <div className={classes.section}>
+        <div className={classes.rowSection}>
           <IconButton
-            text={generated ? 'Generated' : 'Generate'}
+            text={generated ? 'Successfully Generated' : 'Generate'}
             icon={<BubbleChartIcon />}
-            color="secondary"
+            color="primary"
             onClick={genOnClick}
           />
         </div>
-        <div className={classes.section}>
-          <IconButton
-            text={imgCopied ? 'Copied' : 'Copy Image URL'}
-            icon={<ImageIcon />}
-            color="secondary"
-            onClick={imgCopyOnClick}
-          />
-          <IconButton
-            text={mdCopied ? 'Copied' : 'Copy Markdown'}
-            icon={<BorderColorIcon />}
-            color="secondary"
-            onClick={mdCopyOnClick}
-          />
-        </div>
+        {generated && (
+          <div className={classes.rowSection}>
+            <IconButton
+              text={imgCopied ? 'Copied' : 'Copy Image URL'}
+              icon={<ImageIcon />}
+              color="primary"
+              onClick={imgCopyOnClick}
+            />
+            <IconButton
+              text={mdCopied ? 'Copied' : 'Copy Markdown'}
+              icon={<BorderColorIcon />}
+              color="primary"
+              onClick={mdCopyOnClick}
+            />
+          </div>
+        )}
       </Paper>
     </Grid>
   )

src/utils/getStats.tsx

@@ -0,0 +1,32 @@
+import axios from 'axios'
+
+const ENDPOINT = ''
+
+interface StatsResponse {
+  status: string
+  totalSolved?: number
+  easySolved?: number
+  totalEasy?: number
+  mediumSolved?: number
+  totalMedium?: number
+  hardSolved?: number
+  totalHard?: number
+  acceptanceRate?: number
+  ranking?: number
+  contributionPoints?: number
+  reputation?: number
+}
+
+const getStatsReq = (): StatsResponse => {
+  axios
+    .get(ENDPOINT)
+    .then((response) => {
+      return response
+    })
+    .catch(() => {
+      return { status: 'error' }
+    })
+  return { status: 'error' }
+}
+
+export default getStatsReq