Fixed some styling errors, updated home page content and styles, added some changes into data fetching

public/index.css

@@ -10,13 +10,30 @@
 * {
   margin: 0;
   padding: 0;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
   box-sizing: border-box;
+  outline: none;
+}
+
+*::-webkit-scrollbar {
+  display: none;
 }
 
 body {
   background-color: var(--backgroundColor);
   min-height: 100vh;
   color: var(--containerColor);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
 }
 
 input {

src/apollo/defs.ts

@@ -57,26 +57,19 @@ const USER = gql`
   query User {
     user {
       email
-      id
-      name
       forms {
         id
-        title
         submissions {
-          answers {
+          id
-            ... on InputAnswer {
+        }
-              type
+        title
-              userInput
+      }
-            }
+      name
-            ... on ChoiseAnswer {
+      formSubmissions {
-              type
+        id
-              userChoise
+        form {
-            }
+          title
-          }
+          id
-          date
-          user {
-            name
-          }
         }
       }
     }

src/apollo/typeDefs.gql

@@ -15,7 +15,7 @@ type Form {
   author: User
   dateCreated: String!
   id: Int!
-  questions: [Question!]!
+  questions: [Question!]
   submissions: [FormSubmission!]
   title: String!
 }
@@ -46,6 +46,7 @@ type FormSubmission {
   answers: [Answer!]!
   date: String!
   id: Int!
+  form: Form
 }
 
 interface Answer {
@@ -78,6 +79,7 @@ type User {
   forms: [Form!]
   id: Int!
   name: String!
+  formSubmissions: [FormSubmission!]
 }
 
 type serverAnswer {

src/components/Card/index.tsx

@@ -14,7 +14,7 @@ interface props {
 const Card: React.FC<props> = ({ title, subtitle, id }) => {
   return (
     <Link to={`/form/${id}`} className={styles.card}>
-      <h4>{title}</h4>
+      <h3>{title}</h3>
       {subtitle ?? <h5>{subtitle}</h5>}
     </Link>
   )

src/components/Card/main.module.css

@@ -1,10 +1,11 @@
 .card {
   display: block;
   background-color: var(--accentColor);
-  width: 35vw;
+  padding: 1rem;
-  padding: 1.5vh;
   white-space: nowrap;
-  border-radius: 0.75vh;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border-radius: 5px;
   box-shadow: 0 1px 6px 0 var(--accentShadowColor);
   text-decoration: none;
   color: var(--onAccentFontColor);

src/components/DoForm/index.tsx

@@ -44,7 +44,7 @@ const DoForm: React.FC = () => {
 
   const getInitialState = (data: IFormQuery) => {
     if (data && data.form) {
-      return data.form.questions.flatMap<InputAnswer | ChoiseAnswer>(
+      return data.form.questions!.flatMap<InputAnswer | ChoiseAnswer>(
         (el: InputQuestion | ChoisesQuestion) => {
           if (el.__typename === 'ChoisesQuestion')
             return [
@@ -129,12 +129,15 @@ const DoForm: React.FC = () => {
                     {submission.answers.map(
                       (answer: InputAnswer | ChoiseAnswer, answerIndex) => (
                         <li key={answerIndex}>
-                          <h3>{form.questions[answerIndex].title}</h3>
+                          <h3>{form.questions![answerIndex].title}</h3>
                           {answer.__typename === 'ChoiseAnswer' && (
                             <h4>
                               {
-                                (form.questions[answerIndex] as ChoisesQuestion)
+                                (form.questions![
-                                  .variants[answer.userChoise].text
+                                  answerIndex
+                                ] as ChoisesQuestion).variants[
+                                  answer.userChoise
+                                ].text
                               }
                             </h4>
                           )}
@@ -155,7 +158,7 @@ const DoForm: React.FC = () => {
       ) : (
         <form onSubmit={handleSubmit}>
           <ul>
-            {form.questions.map((el: InputQuestion | ChoisesQuestion) => {
+            {form.questions!.map((el: InputQuestion | ChoisesQuestion) => {
               if (el.__typename === 'InputQuestion')
                 return (
                   <li key={el.number}>

src/components/Home/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { useQuery } from '@apollo/client'
+import { generateFromString } from 'generate-avatar'
 
 import Card from '../Card'
 import { USER } from '../../apollo'
@@ -12,7 +13,7 @@ interface IUserQuery {
 }
 
 const Home: React.FC = () => {
-  const { data, error, loading } = useQuery<IUserQuery, QueryUserArgs>(USER)
+  let { data, error, loading } = useQuery<IUserQuery, QueryUserArgs>(USER)
   if (loading) return <p>Loading...</p>
 
   if (error?.message === 'Authorization required')
@@ -22,17 +23,50 @@ const Home: React.FC = () => {
 
   const { user } = data!
 
-  const { forms } = user
+  const { forms, formSubmissions } = user
 
   return (
     <div className={styles.container}>
-      <ul className={styles.leftPad}>
+      <div className={styles.userPad}>
-        {forms!.map((form, formIndex) => (
+        <div className={styles.userCard}>
-          <li key={formIndex}>
+          <img
-            <Card title={form.title} id={form.id} />
+            className={styles.userPic}
-          </li>
+            src={`data:image/svg+xml;utf8,${generateFromString(user.email)}`}
-        ))}
+            alt="Userpic"
-      </ul>
+          />
+          <h1>{user.name}</h1>
+        </div>
+      </div>
+
+      <div className={styles.leftPad}>
+        <h1>My forms</h1>
+        <ul className={styles.cardList}>
+          {forms!.map((form) => (
+            <li key={form.id}>
+              <Card title={form.title} id={form.id} />
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      <div className={styles.rightPad}>
+        <h1>My submissions</h1>
+        <ul className={styles.cardList}>
+          {formSubmissions
+            ?.filter((submission) => Boolean(submission.form))
+            .map((submission) => (
+              <li key={submission.id}>
+                <Card
+                  title={submission.form!.title}
+                  id={submission.form!.id}
+                  subtitle={
+                    submission.user ? 'by ' + submission.user.name : undefined
+                  }
+                />
+              </li>
+            ))}
+        </ul>
+      </div>
     </div>
   )
 }

src/components/Home/main.module.css

@@ -1,12 +1,89 @@
 .container {
   display: grid;
-  height: calc(100vh - 4rem);
+  min-height: calc(100vh - 4rem);
-  grid-template-columns: 4fr 3fr;
+  grid-template-columns: 5fr 3fr;
+  grid-template-rows: auto 1fr;
+  grid-template-areas:
+    'left user'
+    'left right';
+  padding: 2.3rem;
 }
 
 .leftPad {
   display: flex;
+  grid-area: left;
   flex-direction: column;
   align-items: center;
-  list-style: none;
+  gap: 2.3rem;
+  padding: 0 2.3rem;
+}
+
+.leftPad > * {
+  width: 100%;
+}
+
+.cardList {
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.7rem;
+  overflow-y: auto;
+}
+
+.rightPad {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2.3rem;
+  padding-top: 2.3rem;
+  grid-area: right;
+}
+
+.rightPad > * {
+  width: 30vw;
+}
+
+.userPad {
+  grid-area: user;
+  padding: 0 2.3rem;
+}
+
+.userCard {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  background-color: #ffffff;
+  padding: 2.3rem;
+  padding-bottom: 1.6rem;
+  border-radius: 20px;
+}
+
+.userPic {
+  border-radius: 20px;
+  width: 100%;
+}
+
+@media (orientation: portrait) {
+  .container {
+    grid-template-columns: auto;
+    grid-template-areas: 'user' 'left' 'right';
+    gap: 2.3rem;
+  }
+
+  .userPad {
+    padding: 0;
+  }
+
+  .leftPad {
+    padding: 0;
+  }
+
+  .rightPad {
+    padding-top: 0;
+  }
+
+  .rightPad > * {
+    width: 100%;
+  }
 }

src/components/Login/index.tsx

@@ -49,6 +49,7 @@ const Login: React.FC = () => {
             <>
               <h1 className={styles.header}>Login</h1>
               <input
+                required
                 className={styles.input}
                 name="email"
                 id="email"

src/components/Login/main.module.css

@@ -19,6 +19,7 @@
 .img {
   height: 70vh;
   object-fit: contain;
+  border-radius: 20px;
 }
 
 .form {
@@ -57,6 +58,12 @@
 
 .button {
   background-color: var(--accentColor);
+  color: var(--onAccentFontColor);
+  box-shadow: 0 1px 6px 0 var(--accentShadowColor);
+}
+
+.button:active {
+  box-shadow: none;
 }
 
 .errorMsg {

src/components/Register/index.tsx

@@ -42,12 +42,14 @@ const Register: React.FC = () => {
         <form className={styles.form} onSubmit={handleSubmit}>
           <h1 className={styles.header}>Register</h1>
           <input
+            required
             className={styles.input}
             type="email"
             name="email"
             placeholder="email"
           />
           <input
+            required
             className={styles.input}
             type="text"
             name="name"

src/index.css

@@ -1,17 +1,3 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
-
 .App {
   height: 100vh;
 }