Skip to content

Commit

Permalink
Episodio 15
Browse files Browse the repository at this point in the history
  • Loading branch information
@durancristhian
durancristhian committed Oct 10, 2020
1 parent 12e9966 commit 4b442ad
Show file tree
Hide file tree
Showing 12 changed files with 155 additions and 278 deletions.
16 changes: 8 additions & 8 deletions components/CreateChallenge.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ const CreateChallenge = () => {
<Field
name="name"
type="text"
className="border-2 px-4 py-2 focus:outline-none focus:shadow-outline w-full mb-1"
className="border-2 px-4 py-2 focus:outline-none focus:shadow-outline w-full mb-1 disabled:opacity-50 bg-white"
placeholder="Name"
disabled={isSubmitting}
/>
Expand All @@ -160,7 +160,7 @@ const CreateChallenge = () => {
<Field
name="description"
type="text"
className="border-2 px-4 py-2 focus:outline-none focus:shadow-outline w-full mb-1"
className="border-2 px-4 py-2 focus:outline-none focus:shadow-outline w-full mb-1 disabled:opacity-50 bg-white"
placeholder="Description"
disabled={isSubmitting}
/>
Expand Down Expand Up @@ -220,7 +220,7 @@ const CreateChallenge = () => {
{!values.cover ? (
<button
type="button"
className="h-64 w-full border-black border-2 border-dashed focus:outline-none focus:shadow-outline"
className="h-64 w-full border-black border-2 border-dashed focus:outline-none focus:shadow-outline disabled:opacity-50"
disabled={isSubmitting}
onClick={() => {
if (coverRef.current) {
Expand All @@ -243,7 +243,7 @@ const CreateChallenge = () => {
/>
<button
type="button"
className="absolute bg-white border-2 rounded-full top-0 right-0 p-2 -mt-2 -mr-2 focus:outline-none focus:shadow-outline"
className="absolute bg-white border-2 rounded-full top-0 right-0 p-2 -mt-2 -mr-2 focus:outline-none focus:shadow-outline disabled:opacity-50"
disabled={isSubmitting}
onClick={() => {
setValues({
Expand Down Expand Up @@ -314,7 +314,7 @@ const CreateChallenge = () => {
<Field
name={`questions.${questionIndex}.description`}
type="text"
className="border-2 px-4 py-2 focus:outline-none focus:shadow-outline w-full mb-1"
className="border-2 px-4 py-2 focus:outline-none focus:shadow-outline w-full mb-1 disabled:opacity-50 bg-white"
placeholder="Description"
disabled={isSubmitting}
/>
Expand All @@ -326,7 +326,7 @@ const CreateChallenge = () => {
<Field
name={`questions.${questionIndex}.time`}
as="select"
className="border-2 px-4 py-2 focus:outline-none focus:shadow-outline w-full mb-1"
className="border-2 px-4 py-2 focus:outline-none focus:shadow-outline w-full mb-1 disabled:opacity-50 bg-white"
placeholder="Time"
disabled={isSubmitting}
>
Expand All @@ -342,7 +342,7 @@ const CreateChallenge = () => {
<Field
name={`questions.${questionIndex}.options.${optionIndex}.content`}
type="text"
className="border-2 px-4 py-2 focus:outline-none focus:shadow-outline w-full mb-1"
className="border-2 px-4 py-2 focus:outline-none focus:shadow-outline w-full mb-1 disabled:opacity-50 bg-white"
placeholder={`Option content #${
optionIndex + 1
}`}
Expand All @@ -352,7 +352,7 @@ const CreateChallenge = () => {
<div className="ml-4">
<button
type="button"
className="focus:outline-none focus:shadow-outline"
className="focus:outline-none focus:shadow-outline disabled:opacity-50"
disabled={isSubmitting}
onClick={() => {
setFieldValue(
Expand Down
83 changes: 34 additions & 49 deletions components/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,62 +12,47 @@ const Layout = ({ children }: Props) => {
const { user } = useAuth()

return (
<div className="flex flex-col min-h-screen">
<header className="bg-white p-4 shadow">
<div className="container mx-auto w-full">
<div className="flex items-center justify-between">
<Link href="/" passHref>
<A href="#!">
<img src="/logo.png" alt="Cremona" className="h-12" />
</A>
</Link>
<div className="flex">{user ? <LoggedOut /> : <LoggedIn />}</div>
<div className="bg-gray-100">
<div className="flex flex-col min-h-screen">
<header className="bg-white p-4 shadow">
<div className="container mx-auto w-full">
<div className="flex items-center justify-between">
<Link href="/" passHref>
<A href="#!">
<img src="/logo.png" alt="Cremona" className="h-12" />
</A>
</Link>
<div className="flex">{user && <Menu />}</div>
</div>
</div>
</div>
</header>
<main className="flex-1 p-4">
<div className="container mx-auto w-full">{children}</div>
</main>
<footer className="p-4">
<div className="container mx-auto w-full">
<p className="text-center">
<span>Created by </span>
<Link href="/signin" passHref>
<A
href="http://twitter.com/durancristhian"
target="_blank"
rel="noopener noreferrer"
>
@durancristhian
</A>
</Link>
</p>
</div>
</footer>
</header>
<main className="flex-1 p-4">
<div className="container mx-auto w-full">{children}</div>
</main>
<footer className="p-4">
<div className="container mx-auto w-full">
<p className="text-center">
<span>Created by </span>
<Link href="/signin" passHref>
<A
href="http://twitter.com/durancristhian"
target="_blank"
rel="noopener noreferrer"
>
@durancristhian
</A>
</Link>
</p>
</div>
</footer>
</div>
</div>
)
}

export default Layout

function LoggedIn() {
const { googleSignIn } = useAuth()

return (
<>
<button
onClick={() => {
googleSignIn()
}}
className="text-blue-700 focus:outline-none focus:shadow-outline"
>
Google Login
</button>
</>
)
}

function LoggedOut() {
function Menu() {
const [isOpen, setIsOpen] = useState(false)
const { signout } = useAuth()
const user = useUser()
Expand Down
31 changes: 16 additions & 15 deletions components/ListChallenges.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,8 @@ import { useCollection } from '@nandorojo/swr-firestore'
import Link from 'next/link'
import React, { useState } from 'react'
import { useUser } from '../hooks/useAuth'
import CheckCircle from '../icons/CheckCircle'
import { Game } from '../types/Game'
import A from '../ui/A'
import Button from '../ui/Button'
import Heading from '../ui/Heading'
import { toLocalString } from '../utils/toLocalString'

Expand Down Expand Up @@ -41,20 +39,23 @@ const ListChallenges = () => {
<Heading type="h2" align="center">
Your challenges
</Heading>
<div className="flex items-center my-4">
<div className="flex flex-auto">
{FILTERS.map(({ text, value }) => (
<div key={value} className="mr-4">
<Button
onClick={() => {
setStatusFilter(value)
}}
>
{statusFilter === value && <CheckCircle className="h-6 mr-4" />}
<div className="flex justify-between items-center my-4">
<div className="flex">
<select
name="filter"
id="filter"
className="border-2 px-4 py-2 focus:outline-none focus:shadow-outline bg-white"
onChange={(event) => {
setStatusFilter(event.target.value)
}}
onBlur={() => void 0}
>
{FILTERS.map(({ text, value }) => (
<option key={value} value={value}>
{text}
</Button>
</div>
))}
</option>
))}
</select>
</div>
<div>
<Link href="/create" passHref>
Expand Down
105 changes: 0 additions & 105 deletions components/Login.tsx
View file

This file was deleted.

1 comment on commit 4b442ad

@vercel
Copy link

@vercel vercel bot commented on 4b442ad Oct 10, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.