dm1sh/questionForm_frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Dmitriy Shishkov 2020-11-04 18:58:12 +05:00
parent 3f580213fa
commit 1060ea4e41
No known key found for this signature in database
GPG Key ID: D76D70029F55183E
12 changed files with 176 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/index.css
View File

@ -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 {

21
src/apollo/defs.ts
View File

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

4
src/apollo/typeDefs.gql
View File

@ -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 {

2
src/components/Card/index.tsx
View File

@ -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>
)

7
src/components/Card/main.module.css
View File

@ -1,10 +1,11 @@
.card {
display: block;
background-color: var(--accentColor);
width: 35vw;
padding: 1.5vh;
padding: 1rem;
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);

13
src/components/DoForm/index.tsx
View File

@ -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)
.variants[answer.userChoise].text
(form.questions![
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}>

44
src/components/Home/index.tsx
View File

@ -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,18 +23,51 @@ const Home: React.FC = () => {
const { user } = data!
const { forms } = user
const { forms, formSubmissions } = user
return (
<div className={styles.container}>
<ul className={styles.leftPad}>
{forms!.map((form, formIndex) => (
<li key={formIndex}>
<div className={styles.userPad}>
<div className={styles.userCard}>
<img
className={styles.userPic}
src={`data:image/svg+xml;utf8,${generateFromString(user.email)}`}
alt="Userpic"
/>
<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>
)
}

83
src/components/Home/main.module.css
View File

@ -1,12 +1,89 @@
.container {
display: grid;
height: calc(100vh - 4rem);
grid-template-columns: 4fr 3fr;
min-height: calc(100vh - 4rem);
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%;
}
}

1
src/components/Login/index.tsx
View File

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

7
src/components/Login/main.module.css
View File

@ -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 {

2
src/components/Register/index.tsx
View File

@ -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"

14
src/index.css
View File

@ -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;
}