h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

Lint project

Browse Source
This commit is contained in:
Kurt Hutten
2020-11-11 03:18:10 +11:00
parent d8efead4e8
commit 39898270df
33 changed files with 852 additions and 481 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
web/src/layouts/MainLayout/MainLayout.js
View File

@@ -1,11 +1,11 @@
import { useState, useEffect } from 'react'
import { Link, navigate ,routes } from '@redwoodjs/router'
import { Link, navigate, routes } from '@redwoodjs/router'
import { useAuth } from '@redwoodjs/auth'
import { Flash } from '@redwoodjs/web'
import Tooltip from '@material-ui/core/Tooltip';
import Tooltip from '@material-ui/core/Tooltip'
import { useQuery } from '@redwoodjs/web'
import Popover from '@material-ui/core/Popover'
import {getActiveClasses} from 'get-active-classes'
import { getActiveClasses } from 'get-active-classes'
export const QUERY = gql`
query FIND_USER_BY_ID($id: String!) {
@@ -17,14 +17,15 @@ export const QUERY = gql`
}
}
`
import avatar from 'src/assets/harold.jpg'
import Svg from 'src/components/Svg'
import ImageUploader from 'src/components/ImageUploader'
import logo from 'src/layouts/MainLayout/Logo_2.jpg'
const MainLayout = ({ children}) => {
const MainLayout = ({ children }) => {
const { logIn, logOut, isAuthenticated, currentUser } = useAuth()
const {data, loading} = useQuery(QUERY, {variables: {id: currentUser?.sub}})
const { data, loading } = useQuery(QUERY, {
variables: { id: currentUser?.sub },
})
const [isOpen, setIsOpen] = useState(false)
const [anchorEl, setAnchorEl] = useState(null)
const [popoverId, setPopoverId] = useState(undefined)
@@ -55,38 +56,59 @@ const MainLayout = ({ children}) => {
<li>
<Link to={routes.home()}>
<div className="rounded-full overflow-hidden ml-12">
<img src={logo}/>
<img src={logo} />
</div>
</Link>
</li>
<li>
<Tooltip title="Very alpha, there's lots of work todo" >
<Tooltip title="Very alpha, there's lots of work todo">
<div className="ml-12 flex">
{/* Because of how specific these styles are to this heading/logo and it doesn't need to be replicated else where as well as it's very precise with the placement of "pre-alpha" I think it's appropriate. */}
<h2 className="text-indigo-300 text-5xl font-ropa-sans py-1 tracking-wider" style={{letterSpacing: '0.3em'}}>CadHub</h2>
<div className="text-pink-400 text-sm font-bold font-ropa-sans" style={{paddingBottom: '2rem', marginLeft: '-1.8rem'}}>pre-alpha</div>
<h2
className="text-indigo-300 text-5xl font-ropa-sans py-1 tracking-wider"
style={{ letterSpacing: '0.3em' }}
>
CadHub
</h2>
<div
className="text-pink-400 text-sm font-bold font-ropa-sans"
style={{ paddingBottom: '2rem', marginLeft: '-1.8rem' }}
>
pre-alpha
</div>
</div>
</Tooltip>
</li>
</ul>
<ul className="flex items-center">
<li className={getActiveClasses("mr-8 h-10 w-10 rounded-full border-2 border-gray-700 flex items-center justify-center", {'border-indigo-300': currentUser})}>
{isAuthenticated && data?.user?.userName ?
<Link className="h-full w-full" to={routes.newPart2({userName: data?.user?.userName})}>
<li
className={getActiveClasses(
'mr-8 h-10 w-10 rounded-full border-2 border-gray-700 flex items-center justify-center',
{ 'border-indigo-300': currentUser }
)}
>
{isAuthenticated && data?.user?.userName ? (
<Link
className="h-full w-full"
to={routes.newPart2({ userName: data?.user?.userName })}
>
<Svg name="plus" className="text-indigo-300 w-full h-full" />
</Link>:
</Link>
) : (
<Svg name="plus" className="text-gray-700 w-full h-full" />
}
)}
</li>
<li className="h-10 w-10 border-1 rounded-full border-indigo-300 text-indigo-200">
<div aria-describedby={popoverId} onMouseOver={togglePopover}>
{!loading && <ImageUploader
className="rounded-full object-cover"
onImageUpload={() => {}}
aspectRatio={1}
imageUrl={data?.user?.image}
width={80}
/>}
<div aria-describedby={popoverId} onMouseOver={togglePopover}>
{!loading && (
<ImageUploader
className="rounded-full object-cover"
onImageUpload={() => {}}
aspectRatio={1}
imageUrl={data?.user?.image}
width={80}
/>
)}
</div>
</li>
</ul>
@@ -104,23 +126,33 @@ const MainLayout = ({ children}) => {
horizontal: 'right',
}}
>
{
isAuthenticated && currentUser?
<div style={{padding: '1em', width: '15em'}} >
<Link to={routes.user2({userName: data?.user?.userName})}>
<h3 className="text-indigo-800" style={{fontWeight: '500'}} >Hello {data?.user?.name}</h3>
</Link>
<hr/>
<br/>
<Link to={routes.editUser2({userName: data?.user?.userName})}>
<div className="text-indigo-800" >Edit Profile</div>
</Link>
<a href="#" className="text-indigo-800" onClick={logOut}>Logout</a>
</div>:
<div style={{padding: '1em', width: '15em'}} >
<a href="#" className="text-indigo-800 text-indigo-800" onClick={logIn}>LOGIN/SIGNUP</a>
</div>
}
{isAuthenticated && currentUser ? (
<div style={{ padding: '1em', width: '15em' }}>
<Link to={routes.user2({ userName: data?.user?.userName })}>
<h3 className="text-indigo-800" style={{ fontWeight: '500' }}>
Hello {data?.user?.name}
</h3>
</Link>
<hr />
<br />
<Link to={routes.editUser2({ userName: data?.user?.userName })}>
<div className="text-indigo-800">Edit Profile</div>
</Link>
<a href="#" className="text-indigo-800" onClick={logOut}>
Logout
</a>
</div>
) : (
<div style={{ padding: '1em', width: '15em' }}>
<a
href="#"
className="text-indigo-800 text-indigo-800"
onClick={logIn}
>
LOGIN/SIGNUP
</a>
</div>
)}
</Popover>
</nav>
</header>