87 lines
2.3 KiB
TypeScript
87 lines
2.3 KiB
TypeScript
import React from 'react'
|
|
import { useQuery } from '@apollo/client'
|
|
import { generateFromString } from 'generate-avatar'
|
|
import { Redirect, useHistory, Link } from 'react-router-dom'
|
|
|
|
import Card from '../../components/Card'
|
|
import { USER } from '../../apollo'
|
|
import { QueryUserArgs } from '../../apollo/typeDefs.gen'
|
|
import styles from './main.module.css'
|
|
import { IUserQuery } from '../../types'
|
|
import { logOut } from './utils'
|
|
|
|
const Home: React.FC = () => {
|
|
let { data, error, loading, refetch } = useQuery<IUserQuery, QueryUserArgs>(
|
|
USER
|
|
)
|
|
|
|
const history = useHistory()
|
|
|
|
if (loading) return <p>Loading...</p>
|
|
|
|
if (error?.message === 'Authorization required')
|
|
return <Redirect to="/login" />
|
|
|
|
if (error) return <p>{error.message}</p>
|
|
|
|
const { user } = data!
|
|
|
|
const { forms, formSubmissions } = user
|
|
|
|
return (
|
|
<div className={styles.container}>
|
|
<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>
|
|
<button
|
|
className={styles.button}
|
|
onClick={() => logOut(refetch, history)}
|
|
>
|
|
Log out
|
|
</button>
|
|
</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>
|
|
))}
|
|
<Link className={styles.createNew} to="/create">
|
|
<span>Create new</span> <h3>+</h3>
|
|
</Link>
|
|
</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>
|
|
)
|
|
}
|
|
|
|
export default Home
|