Ui/redesign question list

src/components/Sidebar.jsx

@@ -13,7 +13,7 @@ import { Link } from "react-router-dom"
 
 export default function Sidebar() {
     return (
-        <>
+        <React.Fragment>
             <Flex
                 flex="1"
                 justify="center"
@@ -64,14 +64,6 @@ export default function Sidebar() {
                         </Button>
                     </Link>
                 </Flex>
-                {/* <Flex
-                    w="100%"
-                    flexDirection="row"
-                    cursor="pointer"
-                >
-                    <Icon as={MdQuestionAnswer} mr="5" />
-                    <Text>Preset Questions</Text>
-                </Flex> */}
                 <Flex w="100%" flexDirection="row" cursor="pointer">
                     <Link to="/questions">
                         <Button
@@ -136,6 +128,6 @@ export default function Sidebar() {
                     </Link>
                 </Flex>
             </Flex>
-        </>
+        </React.Fragment>
     )
 }

src/components/TableBody.jsx

@@ -1,11 +1,18 @@
-import React from "react"
-import { Box, Button, List, ListItem, Flex, Text, useToast } from "@chakra-ui/core"
 import { useMutation } from "@apollo/client"
-import { DELETE_QUESTION } from "../graphql/index"
+import {
+    Box,
+    Button,
+    Flex,
+    List,
+    ListItem,
+    Text,
+    useToast,
+} from "@chakra-ui/core"
+import React from "react"
 import { useHistory } from "react-router-dom"
+import { DELETE_QUESTION } from "../graphql/index"
 
 export default function TableBody(props) {
-
     const history = useHistory()
     const [deleteQuestion] = useMutation(DELETE_QUESTION)
     const toast = useToast()
@@ -19,12 +26,11 @@ export default function TableBody(props) {
     function deleteOnClick(param) {
         // event.preventDefault()
         deleteQuestion({
-            variables :{
+            variables: {
                 question_id: param,
-                access_token: localStorage.getItem('access_token')
-            }
-        })
-        .then(({data}) => {
+                access_token: localStorage.getItem("access_token"),
+            },
+        }).then(({ data }) => {
             toast({
                 title: data.deleteQuestion,
                 status: "success",
@@ -120,7 +126,9 @@ export default function TableBody(props) {
                                     variantColor="yellow"
                                     m="2"
                                     width="80%"
-                                    onClick={() => updateOnClick(props.question._id)}
+                                    onClick={() =>
+                                        updateOnClick(props.question._id)
+                                    }
                                 >
                                     Update
                                 </Button>
@@ -131,7 +139,9 @@ export default function TableBody(props) {
                                     variantColor="red"
                                     m="2"
                                     width="80%"
-                                    onClick={() => deleteOnClick(props.question._id)}
+                                    onClick={() =>
+                                        deleteOnClick(props.question._id)
+                                    }
                                 >
                                     Delete
                                 </Button>
@@ -141,7 +151,7 @@ export default function TableBody(props) {
                 </>
             )}
             {props.room && (
-                <>
+                <React.Fragment>
                     <Flex flex="4" direction="column">
                         <Box
                             color="gray.200"
@@ -186,7 +196,7 @@ export default function TableBody(props) {
                             Delete
                         </Button>
                     </Flex>
-                </>
+                </React.Fragment>
             )}
         </Flex>
     )

src/components/table/index.jsx

@@ -0,0 +1,77 @@
+import React from "react"
+import { Box } from "@chakra-ui/core"
+
+export const Tr = ({ children, ...rest }) => {
+    return (
+        <Box
+            as="tr"
+            w="100%"
+            display="flex"
+            justifyContent="space-between"
+            alignItems="center"
+            {...rest}
+        >
+            {children}
+        </Box>
+    )
+}
+
+export const Th = ({ children, ...rest }) => {
+    return (
+        <Box
+            as="th"
+            display="flex"
+            justifyContent="center"
+            flex="1"
+            p="2"
+            {...rest}
+        >
+            {children}
+        </Box>
+    )
+}
+
+export const Td = ({ children, ...rest }) => {
+    return (
+        <Box
+            as="td"
+            display="flex"
+            justifyContent="center"
+            alignItems="center"
+            p="3px"
+            flex="1"
+            {...rest}
+        >
+            {children}
+        </Box>
+    )
+}
+
+export const Table = ({ children, ...rest }) => {
+    return (
+        <Box
+            as="table"
+            w="100%"
+            style={{ borderCollapse: "collapse" }}
+            {...rest}
+        >
+            {children}
+        </Box>
+    )
+}
+
+export const Thead = ({ children, ...rest }) => {
+    return (
+        <Box as="thead" {...rest}>
+            {children}
+        </Box>
+    )
+}
+
+export const TBody = ({ children, ...rest }) => {
+    return (
+        <Box as="tbody" {...rest}>
+            {children}
+        </Box>
+    )
+}

src/graphql/codeSanbox.js

@@ -16,6 +16,8 @@ export const GET_QUESTION = gql`
         questions(access_token: $access_token) {
             _id
             title
+            description
+            title
         }
     }
 `

src/pages/CodeSandbox.jsx

@@ -160,11 +160,11 @@ const CodeSandbox = () => {
                     <React.Fragment>
                         <QuestionDrawer isOpen={isOpen} onClose={onClose} />
                         <Flex justify="space-between" mb="6">
-                            <Heading>{data.question.title}</Heading>
+                            <Heading>{data?.question?.title}</Heading>
                             <IconButton icon="chevron-left" onClick={onOpen} />
                         </Flex>
                         <MdView
-                            __html={parser(data.question.description).__html}
+                            __html={parser(data?.question?.description).__html}
                         />
                     </React.Fragment>
                 )}

src/pages/FormSampleSolution.jsx

@@ -3,14 +3,10 @@ import {
     Button,
     Flex,
     FormControl,
-    Input,
     FormLabel,
-    Textarea,
-    Checkbox,
-    Text,
-    FormHelperText,
     Heading,
-    Select,
+    Text,
+    Textarea,
 } from "@chakra-ui/core"
 import React, { useState } from "react"
 import { GoCheck } from "react-icons/go"

src/pages/FormSolution.jsx

@@ -3,14 +3,10 @@ import {
     Button,
     Flex,
     FormControl,
-    Input,
     FormLabel,
-    Textarea,
-    Checkbox,
-    Text,
-    FormHelperText,
     Heading,
-    Select,
+    Text,
+    Textarea,
 } from "@chakra-ui/core"
 import React, { useState } from "react"
 import { GoCheck } from "react-icons/go"
@@ -19,16 +15,16 @@ import Sidebar from "../components/Sidebar"
 import { POST_SOLUTION } from "../graphql"
 
 export default function FormSolution() {
-    const [form, setForm] = useState({
-        input: "",
-        output: "",
-    })
     const [addSolution] = useMutation(POST_SOLUTION)
 
     const { question_id } = useParams()
 
     const history = useHistory()
 
+    const [form, setForm] = useState({
+        input: "",
+        output: "",
+    })
     function handleOnChange(event) {
         let { name, value } = event.target
         if (name === "score") {