Skip to content

Commit

Permalink
changes to schema and /c route frontend
Browse files Browse the repository at this point in the history
  • Loading branch information
itsmegood committed Feb 2, 2024
1 parent 8146dbf commit 60ee504
Show file tree
Hide file tree
Showing 13 changed files with 464 additions and 254 deletions.
26 changes: 11 additions & 15 deletions app/components/layout/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ function UserDropdown() {
className="relative rounded-full border border-primary bg-secondary p-1"
>
<div className="absolute right-0 top-0 rounded-full bg-background p-[1px]">
<div className="z-10 h-2 w-2 rounded-full bg-emerald-500"></div>
<div className="z-10 h-2 w-2 rounded-full bg-primary"></div>
</div>
<img
className="h-7 w-7 rounded-full object-cover"
Expand All @@ -168,13 +168,13 @@ function UserDropdown() {
<DropdownMenuContent
sideOffset={22}
align="end"
className="min-w-[20rem] rounded-sm border border-primary"
className="min-w-[16rem] rounded-sm border border-primary"
>
<DropdownMenuItem asChild className="border-b p-3">
<Link
prefetch="intent"
to={`/users/${user.username}`}
className="inline-flex w-full items-center gap-2 bg-muted/30 hover:bg-accent"
className="flex w-full items-center gap-2 bg-muted/30 hover:bg-accent"
>
<div className="rounded-full bg-background p-1">
<img
Expand All @@ -189,10 +189,8 @@ function UserDropdown() {
</div>
</Link>
</DropdownMenuItem>
<div className="border-b p-2">
<DropdownMenuItem asChild className="p-2">
<div className="text-xs font-bold">BACKER</div>
</DropdownMenuItem>
{/* <div className="border-b p-2">
<div className="p-2 text-xs font-bold">BACKER</div>
<DropdownMenuItem asChild className="p-2">
<Link prefetch="intent" to="/" className="hover:bg-muted/30">
Home
Expand All @@ -216,11 +214,9 @@ function UserDropdown() {
Backed Projects
</Link>
</DropdownMenuItem>
</div>
</div> */}
<div className="border-b p-2">
<DropdownMenuItem asChild className="p-2">
<div className="text-xs font-bold">CREATOR</div>
</DropdownMenuItem>
<div className="p-2 text-xs font-bold">DASHBOARD</div>
<DropdownMenuItem asChild className="p-2">
<Link
prefetch="intent"
Expand All @@ -233,19 +229,19 @@ function UserDropdown() {
<DropdownMenuItem asChild className="p-2">
<Link
prefetch="intent"
to="/studio/projects"
to="/studio/c"
className="hover:bg-muted/30"
>
Created Projects
Companies
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild className="p-2">
<Link
prefetch="intent"
to="/studio/projects/new"
to="/studio/c/new"
className="hover:bg-muted/30"
>
Start a New Project
Create a New Company
</Link>
</DropdownMenuItem>
</div>
Expand Down
3 changes: 3 additions & 0 deletions app/components/ui/button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,16 @@ const buttonVariants = cva(
'bg-destructive text-destructive-foreground hover:bg-destructive/80',
outline:
'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
outline_2:
'border border-input bg-background hover:bg-primary hover:text-primary-foreground',
secondary:
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline',
},
size: {
default: 'h-10 px-4 py-2',
full: 'w-full h-full',
wide: 'px-24 py-5',
sm: 'h-9 rounded-md px-3',
lg: 'h-11 rounded-md px-8',
Expand Down
6 changes: 0 additions & 6 deletions app/root.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -207,10 +207,6 @@ function App() {
const data = useLoaderData<typeof loader>()
const nonce = useNonce()
const theme = useTheme()
// const matches = useMatches()
// const isOnCompanyPage = !!matches.find(
// m => m.id === 'routes/c.$companyId+/_layout_company',
// )

useToast(data.toast)

Expand All @@ -219,12 +215,10 @@ function App() {
<div className="flex h-screen flex-col justify-between">
<Outlet />

{/* {!isOnCompanyPage && ( */}
<div className="container flex justify-between p-6">
<Logo />
<ThemeSwitch userPreference={data.requestInfo.userPrefs.theme} />
</div>
{/* )} */}
</div>
<EpicToaster closeButton position="top-center" theme={theme} />
<EpicProgress />
Expand Down
15 changes: 14 additions & 1 deletion app/routes/_marketing+/index.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,26 @@
import { type MetaFunction } from '@remix-run/node'
import {
type LoaderFunctionArgs,
type MetaFunction,
redirect,
} from '@remix-run/node'
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '#app/components/ui/tooltip.tsx'
import { getUserId } from '#app/utils/auth.server.ts'
import { cn } from '#app/utils/misc.tsx'
import { logos } from './logos/logos.ts'

export async function loader({ request }: LoaderFunctionArgs) {
const userId = await getUserId(request)

if (userId) return redirect('/studio')

return null
}

export const meta: MetaFunction = () => [{ title: 'Epic Notes' }]

// Tailwind Grid cell classes lookup
Expand Down
2 changes: 1 addition & 1 deletion app/routes/studio+/_layout_studio.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ export default function LayoutStudio() {
<>
<HeaderNav clean />

<div className="mx-auto w-full max-w-7xl flex-1 border-2">
<div className="mx-auto w-full max-w-7xl flex-1 space-y-6 px-6">
<Outlet />
</div>
</>
Expand Down
119 changes: 119 additions & 0 deletions app/routes/studio+/c.new.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
import { getFormProps, getInputProps, useForm } from '@conform-to/react'
import { getZodConstraint, parseWithZod } from '@conform-to/zod'
import {
type LoaderFunctionArgs,
type ActionFunctionArgs,
} from '@remix-run/node'
import { Form, json, useActionData } from '@remix-run/react'
import { z } from 'zod'
import { Field } from '#app/components/forms'
import { requireUserId } from '#app/utils/auth.server'
import { prisma } from '#app/utils/db.server'
import { redirectWithToast } from '#app/utils/toast.server'

export async function loader({ request }: LoaderFunctionArgs) {
await requireUserId(request)

return null
}

const StudioCompanyNewSchema = z.object({
name: z.string().min(4).max(60),
})

export async function action({ request }: ActionFunctionArgs) {
const userId = await requireUserId(request)

const formData = await request.formData()

const submission = await parseWithZod(formData, {
schema: StudioCompanyNewSchema.superRefine(async (data, ctx) => {
const existingCompany = await prisma.user.findFirst({
where: {
id: userId,
userCompanies: {
some: {
company: {
name: data.name,
},
isOwner: true,
},
},
},
select: {
id: true,
},
})

if (existingCompany) {
ctx.addIssue({
path: ['name'],
code: z.ZodIssueCode.custom,
message: 'A company with this name already exists',
})
return
}
}),
async: true,
})

if (submission.status !== 'success') {
return json(
{ result: submission.reply() },
{ status: submission.status === 'error' ? 400 : 200 },
)
}

const { name } = submission.value

const company = await prisma.company.create({
data: {
name,
users: {
create: {
userId: userId,
isOwner: true,
},
},
},
select: {
id: true,
name: true,
},
})

return redirectWithToast(`/c/${company.id}`, {
type: 'success',
title: 'Company Created!',
description: `You've created ${company.name} company!`,
})
}

export default function StudioCompanyNew() {
const actionData = useActionData<typeof action>()

const [form, fields] = useForm({
id: 'company-new',
constraint: getZodConstraint(StudioCompanyNewSchema),
lastResult: actionData?.result,
onValidate({ formData }) {
return parseWithZod(formData, { schema: StudioCompanyNewSchema })
},
})

return (
<Form method="POST" {...getFormProps(form)}>
<Field
labelProps={{
htmlFor: fields.name.id,
children: 'Company Name',
}}
inputProps={{
...getInputProps(fields.name, { type: 'text' }),
autoComplete: 'one-time-code',
}}
errors={fields.name.errors}
/>
</Form>
)
}
21 changes: 21 additions & 0 deletions app/routes/studio+/c.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { type LoaderFunctionArgs } from '@remix-run/node'
import { Outlet } from '@remix-run/react'
import { requireUserId } from '#app/utils/auth.server'

export async function loader({ request }: LoaderFunctionArgs) {
await requireUserId(request)

return null
}

export default function StudioCompanies() {
return (
<div>
<h1>Unknown Route</h1>

<div>
<Outlet />
</div>
</div>
)
}
47 changes: 0 additions & 47 deletions app/routes/studio+/company.new.tsx

This file was deleted.

26 changes: 20 additions & 6 deletions app/routes/studio+/index.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { type LoaderFunctionArgs, json } from '@remix-run/node'
import { useLoaderData } from '@remix-run/react'
import { Link, useLoaderData } from '@remix-run/react'
import { logoutAndRedirect, requireUserId } from '#app/utils/auth.server'
import { prisma } from '#app/utils/db.server'
import { Button } from '#app/components/ui/button'
import { Spacer } from '#app/components/spacer'

export async function loader({ request }: LoaderFunctionArgs) {
const userId = await requireUserId(request)
Expand Down Expand Up @@ -42,13 +44,25 @@ export default function StudioIndex() {
const data = useLoaderData<typeof loader>()

return (
<div>
<h1>Unknown Route</h1>
<div>{data.user.name}</div>
<>
<h2 className="text-h3 md:text-h2">Studio</h2>

<div className="grid grid-cols-2 gap-6 text-center xl:grid-cols-4">
<Link to="hello" className="h-full rounded-md border border-primary">
<Button variant="outline_2" size="full">
Hello
</Button>
</Link>
<div className="rounded-md border border-primary p-10">Hello</div>
<div className="rounded-md border border-primary p-10">Hello</div>
<div className="rounded-md border border-primary p-10">Hello</div>
</div>

<div>
{data.user.userCompanies.map(userCompany => (
<div key={userCompany.id}>
{userCompany.company.name} : {userCompany.isOwner} :{' '}
{userCompany.company.name} :{' '}
{userCompany.isOwner ? 'true' : 'false'} :{' '}
{userCompany.Role.map(role => (
<div key={role.name}>
{role.name} :{' '}
Expand All @@ -63,6 +77,6 @@ export default function StudioIndex() {
</div>
))}
</div>
</div>
</>
)
}
Loading

0 comments on commit 60ee504

Please sign in to comment.