Skip to content

Commit

Permalink
Merge pull request #11 from Dan6erbond/develop
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dan6erbond
Dan6erbond committed May 9, 2023
2 parents 6efa00f + 51d3276 commit efa120b
Show file tree
Hide file tree
Showing 9 changed files with 311 additions and 128 deletions.
15 changes: 15 additions & 0 deletions server/main.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import (
"log"

"github.com/pocketbase/pocketbase"
"github.com/pocketbase/pocketbase/core"
"github.com/pocketbase/pocketbase/plugins/migratecmd"

// uncomment once you have at least one .go migration file in the "migrations" directory
Expand All @@ -17,6 +18,20 @@ func main() {
Automigrate: true, // auto creates migration files when making collection changes
})

app.OnRecordAfterDeleteRequest("posts", "delete").Add(func(e *core.RecordDeleteEvent) error {
if e.Record.Collection().Name != "posts" {
return nil
}

files, _ := app.Dao().FindRecordsByIds("files", e.Record.GetStringSlice("files"))

for _, f := range files {
_ = app.Dao().DeleteRecord(f)
}

return nil
})

if err := app.Start(); err != nil {
log.Fatal(err)
}
Expand Down
91 changes: 66 additions & 25 deletions src/components/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,26 @@ import { useAuthMethods } from "@/hooks/useAuthMethods";
import { usePocketBase } from "@/pocketbase";
import { useAuth } from "@/pocketbase/auth";
import {
ActionIcon,
Anchor,
Avatar,
Box,
Button,
Group,
Header as MantineHeader,
MediaQuery,
Menu,
Text,
Title,
UnstyledButton,
em,
getBreakpointValue,
} from "@mantine/core";
import { IconCirclePlus, IconLogout } from "@tabler/icons-react";
import {
IconCaretDown,
IconCirclePlus,
IconLogout,
IconUserCircle,
} from "@tabler/icons-react";
import Link from "next/link";
import { useRouter } from "next/router";

Expand All @@ -30,7 +38,7 @@ function Header({ signUpEnabled }: HeaderProps) {

return (
<MantineHeader height={75} p="md">
<Group>
<Group h="100%" w="100%">
<Anchor
component={Link}
href="/"
Expand All @@ -49,30 +57,63 @@ function Header({ signUpEnabled }: HeaderProps) {
Share Me
</Title>
</Anchor>
<Box sx={{ flexGrow: 1 }} />
<Box sx={{ flexGrow: 1, width: "auto" }} />
{user ? (
router.asPath !== "/posts/create" && (
<Group>
<Button
radius="xl"
variant="gradient"
size="md"
component={Link}
href="/posts/create"
leftIcon={<IconCirclePlus />}
>
<MediaQuery smallerThan="sm" styles={{ display: "none" }}>
<Box>Create Post</Box>
</MediaQuery>
<MediaQuery largerThan="sm" styles={{ display: "none" }}>
<>
{router.asPath !== "/posts/create" && (
<Group>
<Button
radius="xl"
variant="gradient"
size="md"
component={Link}
href="/posts/create"
leftIcon={<IconCirclePlus />}
>
<Box>Post</Box>
</MediaQuery>
</Button>
<ActionIcon onClick={() => pb.authStore.clear()}>
<IconLogout />
</ActionIcon>
</Group>
)
</Button>
</Group>
)}
<Menu shadow="md" position="bottom-end">
<Menu.Target>
<UnstyledButton
sx={(theme) => ({
":hover": {
background: theme.colors.dark[4],
borderRadius: theme.radius.md,
},
})}
pr="sm"
py={2}
>
<Group>
<Avatar radius="xl"></Avatar>
<MediaQuery smallerThan="md" styles={{ display: "none" }}>
<Text>{user.username}</Text>
</MediaQuery>
<IconCaretDown />
</Group>
</UnstyledButton>
</Menu.Target>

<Menu.Dropdown>
<Menu.Item
icon={<IconUserCircle />}
component={Link}
href={`/users/${user.id}`}
>
Profile
</Menu.Item>
<Menu.Divider />
<Menu.Item
icon={<IconLogout />}
onClick={() => pb.authStore.clear()}
>
Log Out
</Menu.Item>
</Menu.Dropdown>
</Menu>
</>
) : (
<Group spacing="sm">
<Button
Expand Down
5 changes: 3 additions & 2 deletions src/components/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,9 +227,10 @@ function Layout({ children, signUpEnabled, onFiles }: LayoutProps) {
sx={(theme) => ({
background: theme.fn.linearGradient(
170,
theme.fn.rgba(theme.colors.blue[3], 0.7),
theme.fn.rgba(theme.colors.blue[5], 0.7)
theme.fn.rgba(theme.colors.blue[3], 0.5),
theme.fn.rgba(theme.colors.blue[5], 0.5)
),
backdropFilter: "blur(2px)",
zIndex: 1000,
pointerEvents: "none",
})}
Expand Down
90 changes: 47 additions & 43 deletions src/components/postCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,80 @@
import { usePocketBase } from "@/pocketbase";
import { Post } from "@/pocketbase/models";
import { Carousel } from "@mantine/carousel";
import { CardProps, Flex, Image, Paper, Stack } from "@mantine/core";
import { Box, CardProps, Flex, Image, Paper, Stack } from "@mantine/core";
import { IMAGE_MIME_TYPE } from "@mantine/dropzone";
import Link from "next/link";
import { Record } from "pocketbase";
import PostTitle from "./postTitle";
import { useRouter } from "next/router";

interface PostCardProps extends Omit<CardProps, "children"> {
post: Post;
}

function PostCard({ post, ...props }: PostCardProps) {
const router = useRouter();
const pb = usePocketBase();

return (
<Paper
key={post.id}
p={0}
{...props}
component={Link}
href={`/posts/${post.id}`}
sx={(theme) => ({
":hover": { background: theme.colors.dark[8] },
overflow: "hidden",
cursor: "pointer",
})}
bg="dark.6"
radius="md"
miw={0}
onClick={() => router.push(`/posts/${post.id}`)}
>
<Stack mah="70vh">
<PostTitle post={post} p="md" />
<Flex mih={0} w="100%" miw={0}>
<Carousel
withIndicators
onClickCapture={(ev) => ev.preventDefault()}
height="100%"
w="100%"
>
{Array.isArray(post.expand.files) &&
post.expand.files.map((f) => (
<Carousel.Slide key={f.id}>
<Flex align="center" h="100%" w="100%" justify="center">
{IMAGE_MIME_TYPE.includes(f.type) ? (
<Image
src={pb.files.getUrl(f, f.file)}
sx={{ flex: 1 }}
alt={
post.title ||
`Post by ${(post.expand.author as Record).username}`
}
/>
) : (
<video
src={pb.files.getUrl(f, f.file)}
muted
autoPlay
controls={false}
style={{
objectFit: "contain",
objectPosition: "center",
maxHeight: "100%",
margin: "0 auto",
display: "block",
}}
/>
)}
</Flex>
</Carousel.Slide>
))}
</Carousel>
</Flex>
<Box component={Link} href={`/posts/${post.id}`}>
<Flex mih={0} w="100%" miw={0}>
<Carousel
withIndicators
onClickCapture={(ev) => ev.preventDefault()}
height="100%"
w="100%"
>
{Array.isArray(post.expand.files) &&
post.expand.files.map((f) => (
<Carousel.Slide key={f.id}>
<Flex align="center" h="100%" w="100%" justify="center">
{IMAGE_MIME_TYPE.includes(f.type) ? (
<Image
src={pb.files.getUrl(f, f.file)}
sx={{ flex: 1 }}
alt={
post.title ||
`Post by ${(post.expand.author as Record).username}`
}
/>
) : (
<video
src={pb.files.getUrl(f, f.file)}
muted
autoPlay
controls={false}
style={{
objectFit: "contain",
objectPosition: "center",
maxHeight: "100%",
margin: "0 auto",
display: "block",
}}
/>
)}
</Flex>
</Carousel.Slide>
))}
</Carousel>
</Flex>
</Box>
</Stack>
</Paper>
);
Expand Down
25 changes: 18 additions & 7 deletions src/components/postTitle.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { Post } from "@/pocketbase/models";
import { getRelativeTime } from "@/utils/relativeTime";
import {
Anchor,
Avatar,
Badge,
Box,
Expand All @@ -11,6 +12,7 @@ import {
Title,
Tooltip,
} from "@mantine/core";
import Link from "next/link";
import { Record } from "pocketbase";

interface PostTitleProps extends BoxProps {
Expand All @@ -31,14 +33,23 @@ function PostTitle({ post, compact, ...props }: PostTitleProps) {
{getRelativeTime(new Date(), new Date(post.created))}
</Text>
</Tooltip>
<Group spacing="sm">
<Text size="sm">{(post.expand.author as Record).username}</Text>
<Avatar radius="xl" size="sm"></Avatar>
</Group>
<Anchor
component={Link}
href={`/users/${(post.expand.author as Record).id}`}
sx={{ ":hover": { textDecoration: "underline" } }}
unstyled
>
<Group spacing="sm">
<Text size="sm">{(post.expand.author as Record).username}</Text>
<Avatar radius="xl" size="sm"></Avatar>
</Group>
</Anchor>
</Flex>
<Title order={4}>
{post.title || `Post by ${(post.expand.author as Record).username}`}
</Title>
<Anchor component={Link} href={`/posts/${post.id}`} unstyled>
<Title order={4}>
{post.title || `Post by ${(post.expand.author as Record).username}`}
</Title>
</Anchor>
{post.nsfw && <Badge color="red">NSFW</Badge>}
</Box>
);
Expand Down
18 changes: 10 additions & 8 deletions src/pages/_app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { MantineProvider } from "@mantine/core";
import { Notifications } from "@mantine/notifications";
import { AppProps } from "next/app";
import Head from "next/head";
import Script from "next/script";
import PocketBase from "pocketbase";
import { useRef } from "react";
import { QueryClient, QueryClientProvider } from "react-query";
Expand All @@ -22,16 +23,17 @@ export default function App({ Component, pageProps }: AppProps<ShareMeEnv>) {
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width"
/>
{pageProps.umami && (
<script
async
defer
data-website-id={pageProps.umami.websiteId}
src={pageProps.umami.umamiJs}
></script>
)}
</Head>

{pageProps.umami && (
<Script
async
defer
data-website-id={pageProps.umami.websiteId}
src={pageProps.umami.umamiJs}
></Script>
)}

<MantineProvider
withGlobalStyles
withNormalizeCSS
Expand Down
6 changes: 3 additions & 3 deletions src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,6 @@ export default function Home({ signUpEnabled }: HomeProps) {
<Card
key={post.id}
p={0}
component={Link}
href={`/posts/${post.id}`}
sx={(theme) => ({
":hover": { background: theme.colors.dark[8] },
display: "flex",
Expand All @@ -112,6 +110,8 @@ export default function Home({ signUpEnabled }: HomeProps) {
display: "flex",
"&[data-last]": { marginBottom: 0 },
}}
component={Link}
href={`/posts/${post.id}`}
>
{Array.isArray(post.expand.files) && (
<Flex
Expand Down Expand Up @@ -169,7 +169,7 @@ export default function Home({ signUpEnabled }: HomeProps) {
>
<Center h="100%" w="100%">
<Box>
<Text size="xl">
<Text size="xl" color="white">
{post.expand.files.length - 1} +
</Text>
</Box>
Expand Down
Loading

0 comments on commit efa120b

Please sign in to comment.