Stevan/conve-x
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: delete all users posts when user is deleted

Browse Source
This commit is contained in:
Stevan Freeborn
2023-09-10 20:19:31 -05:00
parent 90f95e50a5
commit 1ad65d8b30
12 changed files with 1452 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.vscode/settings.json
Vendored
+3 -1
View File
@@ -4,9 +4,11 @@
"codemirror",
"conve",
"Keymap",
"lezer",
"nextjs",
"rehype",
"signup",
"svix"
"svix",
"tailwindcss"
]
}
convex/_generated/api.d.ts
Vendored
+2
View File
@@ -15,6 +15,7 @@ import type {
FunctionReference,
} from "convex/server";
import type * as http from "../http";
import type * as posts from "../posts";
import type * as users from "../users";
/**
@@ -27,6 +28,7 @@ import type * as users from "../users";
*/
declare const fullApi: ApiFromModules<{
http: typeof http;
posts: typeof posts;
users: typeof users;
}>;
export declare const api: FilterApi<
convex/posts.ts
+33
View File
@@ -0,0 +1,33 @@
import { v } from 'convex/values';
import { mutation } from './_generated/server';
import { userQuery } from './users';
export const createPost = mutation({
args: {
clerkUserId: v.string(),
content: v.array(v.string()),
parentPostId: v.optional(v.id('posts')),
},
handler: async (ctx, args) => {
const userIdentity = await ctx.auth.getUserIdentity();
const user = await userQuery(ctx, args.clerkUserId);
if (userIdentity === null) {
return 'USER_NOT_AUTHORIZED';
}
if (user === null) {
return 'USER_NOT_FOUND';
}
if (userIdentity.subject !== args.clerkUserId) {
return 'CANNOT_POST_ON_BEHALF_OF_ANOTHER_USER';
}
return await ctx.db.insert('posts', {
userId: user._id,
content: args.content,
parentPostId: args.parentPostId,
});
},
});
convex/schema.ts
+7 -11
View File
@@ -1,19 +1,15 @@
import { defineSchema, defineTable } from 'convex/server';
import { v } from 'convex/values';
export default defineSchema({
export default defineSchema(
{
users: defineTable({
clerkUser: v.any(),
}).index('by_clerk_id', ['clerkUser.id']),
posts: defineTable({
parentPostId: v.optional(v.id('posts')),
userId: v.id('users'),
content: v.array(v.string()),
likes: v.array(v.id('users')),
replies: v.array(
v.object({
userId: v.id('users'),
content: v.array(v.string()),
})
),
}),
});
}).index('by_user_id', ['userId']),
},
{ schemaValidation: false }
);
convex/users.ts
+13
View File
@@ -44,6 +44,19 @@ export const deleteUser = internalMutation({
return;
}
const userPosts = await ctx.db
.query('posts')
.withIndex('by_user_id', q => q.eq('userId', userRecord._id))
.collect();
const userPostDeletePromises = [];
for (const post of userPosts) {
userPostDeletePromises.push(ctx.db.delete(post._id));
}
await Promise.all(userPostDeletePromises);
await ctx.db.delete(userRecord._id);
},
});
src/app/posts/add/page.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import Editor from '@/components/Editor';
export default function AddPost() {
return (
<main>
<main className='flex flex-col w-full h-full'>
<Editor />
</main>
);
src/components/Editor.tsx
+64 -45
View File
@@ -1,34 +1,38 @@
'use client';
import { useCodeMirror } from '@/hooks';
import { darkTheme } from '@/lib/codemirror';
import { basicDark } from '@/lib/codemirror';
import { useUser } from '@clerk/nextjs';
import { indentWithTab } from '@codemirror/commands';
import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
import { languages } from '@codemirror/language-data';
import { Compartment, EditorState } from '@codemirror/state';
import { Compartment, EditorState, Text } from '@codemirror/state';
import { EditorView, keymap } from '@codemirror/view';
import { basicSetup } from 'codemirror';
import { useMutation } from 'convex/react';
import { useTheme } from 'next-themes';
import { useEffect, useState } from 'react';
import ReactMarkdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
import remarkGfm from 'remark-gfm';
import { useRouter } from 'next/navigation';
import { FormEvent, useEffect, useState } from 'react';
import { api } from '../../convex/_generated/api';
import PostContent from './PostContent';
export default function Editor() {
const user = useUser();
const { theme } = useTheme();
const editorTheme = new Compartment();
const [currentDoc, setCurrentDoc] = useState('');
const [currentDoc, setCurrentDoc] = useState(['']);
const createPost = useMutation(api.posts.createPost);
const router = useRouter();
const doc = [''];
const extensions = [
basicSetup,
markdown({ base: markdownLanguage, codeLanguages: languages }),
EditorState.tabSize.of(2),
editorTheme.of([]),
editorTheme.of(basicDark),
keymap.of([indentWithTab]),
EditorView.updateListener.of(vu => {
setCurrentDoc(vu.state.doc.toString());
setCurrentDoc(vu.state.doc.toJSON());
}),
];
@@ -42,18 +46,48 @@ export default function Editor() {
if (theme === 'dark') {
editorView.dispatch({
effects: editorTheme.reconfigure([darkTheme]),
effects: editorTheme.reconfigure([]),
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [theme, editorView]);
async function handleSubmit(e: FormEvent<HTMLFormElement>) {
e.preventDefault();
try {
if (user.isSignedIn !== true) {
router.push('/login');
return;
}
const result = await createPost({
clerkUserId: user.user.id,
content: currentDoc,
});
switch (result) {
case 'USER_NOT_FOUND':
case 'USER_NOT_AUTHORIZED':
case 'CANNOT_POST_ON_BEHALF_OF_ANOTHER_USER':
throw Error('Unable to create post');
default:
router.push('/');
return;
}
} catch (error) {
console.log(error);
}
}
return (
<form className='flex flex-col shadow-md rounded-md dark:bg-secondary-gray border border-gray-600'>
<form
onSubmit={handleSubmit}
className='flex flex-col flex-1 shadow-md rounded-md dark:bg-secondary-gray border border-gray-600'
>
<div className='flex items-center justify-between rounded-t-md p-4 pb-0 border-b border-gray-600 dark:bg-primary-gray'>
<div className='flex items-center'>
<button
className='flex items-center justify-center px-3 py-2 rounded-t-md -mb-[1px] disabled:dark:bg-secondary-gray disabled:border disabled:border-gray-600 disabled:border-b-0'
className='flex items-center justify-center px-3 py-2 rounded-t-md -mb-[1px] disabled:bg-white disabled:border disabled:border-b-0 disabled:border-gray-600 disabled:dark:bg-secondary-gray'
disabled={mode === 'write'}
onClick={() => setMode('write')}
type='button'
@@ -61,7 +95,7 @@ export default function Editor() {
Write
</button>
<button
className='flex items-center justify-center px-3 py-2 rounded-t-md disabled:dark:bg-secondary-gray disabled:border disabled:border-gray-600 disabled:border-b-0'
className='flex items-center justify-center px-3 py-2 rounded-t-md -mb-[1px] disabled:bg-white disabled:border disabled:border-b-0 disabled:border-gray-600 disabled:dark:bg-secondary-gray'
disabled={mode === 'preview'}
onClick={() => setMode('preview')}
type='button'
@@ -71,42 +105,27 @@ export default function Editor() {
</div>
<div></div>
</div>
<div className='p-4'>
<div className='flex flex-col p-4 h-0 flex-grow'>
<div
className={`${mode === 'write' ? '' : 'hidden'}`}
className={`${mode === 'write' ? '' : 'hidden'} flex-1 overflow-auto`}
ref={editorRef}
></div>
<ReactMarkdown
className={`${mode === 'preview' ? '' : 'hidden'}`}
remarkPlugins={[remarkGfm]}
components={{
code({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || '');
return !inline && match ? (
<SyntaxHighlighter
{...props}
style={oneDark}
language={match[1]}
PreTag='div'
<div
className={`${
mode === 'preview' ? '' : 'hidden'
} flex-1 overflow-auto`}
>
{String(children).replace(/\n$/, '')}
</SyntaxHighlighter>
) : (
<code
{...props}
className={className}
>
{children}
</code>
);
},
}}
>
{currentDoc}
</ReactMarkdown>
<PostContent content={Text.of(currentDoc).toString()} />
</div>
<div className='flex items-center justify-end'>
<button type='submit'>Post</button>
</div>
<div className='flex items-center justify-end p-4 pt-0'>
<button
type='submit'
disabled={!currentDoc.join() || !currentDoc.join().trim()}
className='py-1 px-4 bg-primary-accent text-white rounded-md disabled:opacity-50'
>
Post
</button>
</div>
</form>
);
src/components/MarkdownContent.css
+1098
View File
File diff suppressed because it is too large Load Diff
src/components/Navbar.tsx
+2 -1
View File
@@ -1,6 +1,7 @@
import { SignedIn, SignedOut, UserButton } from '@clerk/nextjs';
import Link from 'next/link';
import { BiSolidMessageSquareAdd } from 'react-icons/bi';
import ProfileLink from './ProfileLink';
import ThemeButton from './ThemeButton';
export default function Navbar() {
@@ -30,7 +31,7 @@ export default function Navbar() {
<Link href='#'>Following</Link>
</li>
<li>
<Link href='#'>Profile</Link>
<ProfileLink />
</li>
<li>
<Link
src/components/PostContent.tsx
+40
View File
@@ -0,0 +1,40 @@
import ReactMarkdown from 'react-markdown';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
import remarkGfm from 'remark-gfm';
import './MarkdownContent.css';
export default function PostContent({ content }: { content: string }) {
return (
<div className='markdown-content'>
<ReactMarkdown
remarkPlugins={[remarkGfm]}
components={{
code({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || '');
return !inline && match ? (
<SyntaxHighlighter
{...props}
style={oneDark}
language={match[1]}
PreTag='div'
>
{String(children).replace(/\n$/, '')}
</SyntaxHighlighter>
) : (
<code
{...props}
className={className}
>
{children}
</code>
);
},
}}
>
{content}
</ReactMarkdown>
</div>
);
}
src/components/ProfileLink.tsx
+14
View File
@@ -0,0 +1,14 @@
'use client';
import { useUser } from '@clerk/nextjs';
import Link from 'next/link';
export default function ProfileLink() {
const user = useUser();
if (user.isSignedIn !== true) {
return <span>Profile</span>;
}
return <Link href={`/profile/${user.user.id}`}>Profile</Link>;
}
src/lib/codemirror/index.ts
+168 -41
View File
@@ -1,80 +1,207 @@
import { HighlightStyle } from '@codemirror/language';
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
import { Extension } from '@codemirror/state';
import { EditorView } from '@codemirror/view';
import { tags as t } from '@lezer/highlight';
export const darkTheme = EditorView.theme(
const base00 = '#24272d';
const base01 = '#DDDDDD';
const base02 = '#B9D2FF';
const base03 = '#b0b0b0';
const base05 = '#e0e0e0';
const base06 = '#808080';
const base07 = '#000000';
const base08 = '#A54543';
const base09 = '#fc6d24';
const base0A = '#fda331';
const base0B = '#8abeb7';
const base0C = '#b5bd68';
const base0D = '#6fb3d2';
const base0E = '#cc99cc';
const base0F = '#6987AF';
const invalid = base09;
const darkBackground = base00;
const highlightBackground = base02 + '30';
const background = base00;
const tooltipBackground = base01;
const selection = '#202325';
const cursor = base01;
const basicDarkTheme = EditorView.theme(
{
'&': {
backgroundColor: '#24272d',
color: '#d0d9e4',
height: '100%',
color: base01,
backgroundColor: background,
borderRadius: '0.375rem',
padding: '0.5rem 0',
},
'.cm-gutter': {
height: '100%',
},
'.cm-content': {
caretColor: '#f8f8f0',
caretColor: cursor,
height: '100%',
},
'.cm-content, .cm-gutter': { height: '100%' },
'.cm-scroller': { overflow: 'auto' },
'.cm-cursor, .cm-dropCursor': {
borderLeftColor: '#f8f8f0',
'.cm-scroller': {
overflow: 'auto',
},
'&.cm-focused': {
outline: 'none',
'.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
'&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':
{ backgroundColor: selection },
'.cm-panels': { backgroundColor: darkBackground, color: base03 },
'.cm-panels.cm-panels-top': { borderBottom: '2px solid black' },
'.cm-panels.cm-panels-bottom': { borderTop: '2px solid black' },
'.cm-searchMatch': {
backgroundColor: base02,
outline: `1px solid ${base03}`,
color: base07,
},
'&.cm-focused .cm-selectionBackground .cm-selectionBackground, .cm-content ::selection':
{
backgroundColor: '#2f333a',
'.cm-searchMatch.cm-searchMatch-selected': {
backgroundColor: base05,
color: base07,
},
'.cm-activeLine': {
backgroundColor: 'transparent',
'.cm-activeLine': { backgroundColor: highlightBackground },
'.cm-selectionMatch': { backgroundColor: highlightBackground },
'&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
outline: `1px solid ${base03}`,
},
'&.cm-focused .cm-matchingBracket': {
backgroundColor: base02,
color: base07,
},
'.cm-gutters': {
border: 'none',
backgroundColor: '#24272d',
color: 'd0d9e4',
borderRight: `none`,
color: base06,
backgroundColor: darkBackground,
},
'.cm-activeLineGutter': {
backgroundColor: highlightBackground,
},
'.cm-foldPlaceholder': {
backgroundColor: 'transparent',
border: 'none',
color: base02,
},
'.cm-tooltip': {
border: 'none',
backgroundColor: tooltipBackground,
},
'.cm-tooltip .cm-tooltip-arrow:before': {
borderTopColor: 'transparent',
borderBottomColor: 'transparent',
},
'.cm-tooltip .cm-tooltip-arrow:after': {
borderTopColor: tooltipBackground,
borderBottomColor: tooltipBackground,
},
'.cm-tooltip-autocomplete': {
'& > ul > li[aria-selected]': {
backgroundColor: highlightBackground,
color: base03,
},
},
},
{ dark: true }
);
export const highlightStyle = HighlightStyle.define([
const basicDarkHighlightStyle = HighlightStyle.define([
{ tag: t.keyword, color: base0A },
{
tag: t.comment,
color: '#6272a4',
tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
color: base0C,
},
{ tag: [t.variableName], color: base0D },
{ tag: [t.function(t.variableName)], color: base0A },
{ tag: [t.labelName], color: base09 },
{
tag: [t.color, t.constant(t.name), t.standard(t.name)],
color: base0A,
},
{ tag: [t.definition(t.name), t.separator], color: base0E },
{ tag: [t.brace], color: base0E },
{
tag: [t.annotation],
color: invalid,
},
{
tag: [t.string, t.special(t.brace)],
color: '#f1fa8c',
tag: [t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
color: base0A,
},
{
tag: [t.number, t.self, t.bool, t.null],
color: '#bd93f9',
tag: [t.typeName, t.className],
color: base0D,
},
{
tag: [t.keyword, t.operator],
color: '#ff79c6',
tag: [t.operator, t.operatorKeyword],
color: base0E,
},
{
tag: [t.definitionKeyword, t.typeName],
color: '#8be9fd',
tag: [t.tagName],
color: base0A,
},
{
tag: t.definition(t.typeName),
color: '#f8f8f2',
tag: [t.squareBracket],
color: base0E,
},
{
tag: [
t.className,
t.definition(t.propertyName),
t.function(t.variableName),
t.attributeName,
],
color: '#50fa7b',
tag: [t.angleBracket],
color: base0E,
},
{
tag: [t.heading],
color: '#50fa7b',
tag: [t.attributeName],
color: base0D,
},
{
tag: [t.regexp],
color: base0A,
},
{
tag: [t.quote],
color: base01,
},
{ tag: [t.string], color: base0C },
{
tag: t.link,
color: base0F,
textDecoration: 'underline',
textUnderlinePosition: 'under',
},
{
tag: [t.url, t.escape, t.special(t.string)],
color: base0B,
},
{ tag: [t.meta], color: base08 },
{ tag: [t.comment], color: base06, fontStyle: 'italic' },
{ tag: t.monospace, color: base01 },
{ tag: t.strong, fontWeight: 'bold', color: base0A },
{ tag: t.emphasis, fontStyle: 'italic', color: base0D },
{ tag: t.strikethrough, textDecoration: 'line-through' },
{ tag: t.heading, fontWeight: 'bold', color: base01 },
{ tag: t.special(t.heading1), fontWeight: 'bold', color: base01 },
{ tag: t.heading1, fontWeight: 'bold', color: base01 },
{
tag: [t.heading2, t.heading3, t.heading4],
fontWeight: 'bold',
color: base01,
},
{
tag: [t.heading5, t.heading6],
color: base01,
},
{ tag: [t.atom, t.bool, t.special(t.variableName)], color: base0B },
{
tag: [t.processingInstruction, t.inserted],
color: base0B,
},
{
tag: [t.contentSeparator],
color: base0D,
},
{ tag: t.invalid, color: base02, borderBottom: `1px dotted ${invalid}` },
]);
export const basicDark: Extension = [
basicDarkTheme,
syntaxHighlighting(basicDarkHighlightStyle),
];