CoastalCommits/CoastalCommitsPastes
CoastalCommits/CoastalCommitsPastes
2
1
Fork 0
forked from CoastalCommitsArchival/github.com-MaxLeiter-drift
Code Pull requests Activity Actions

sort your posts by time, style improvements

Browse source
This commit is contained in:
Max Leiter 2022-03-09 01:33:22 -08:00
parent 73e32a58e7
commit 7ef696f88e
No known key found for this signature in database
GPG key ID: A3512F2F2F17EBDA
9 changed files with 37 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/components/my-posts/index.tsx
View file

@ -13,4 +13,4 @@ const MyPosts = () => {
return <PostList posts={data} error={error} />
}
export default MyPosts
export default MyPosts

47
client/components/post-list/index.tsx
View file

@ -1,4 +1,4 @@
import { Loading, Card, Divider, Input, Text } from "@geist-ui/core"
import { Loading, Card, Divider, Input, Text, Grid, Spacer } from "@geist-ui/core"
import Preview from "../preview"
import ShiftBy from "../shift-by"
import VisibilityBadge from "../visibility-badge"
@ -12,6 +12,16 @@ type Props = {
}
const PostList = ({ posts, error }: Props) => {
const FilenameInput = ({ title }: { title: string }) => <Input
value={title}
marginTop="var(--gap-double)"
size={1.2}
font={1.2}
label="Filename"
readOnly
width={"100%"}
/>
return (
<div className={styles.container}>
{error && <Text type='error'>Failed to load.</Text>}
@ -22,33 +32,34 @@ const PostList = ({ posts, error }: Props) => {
<ul>
{posts.map((post: any) => {
return <li key={post.id}>
<Card height={'300px'} style={{ overflowY: 'scroll' }} hoverable>
<Text h3 className={styles.postHeader}>
<Link color href={`/post/${post.id}`}>{post.title} <ShiftBy y={-1}><VisibilityBadge visibility={post.visibility} /></ShiftBy></Link> <span>{new Date(post.createdAt).toLocaleDateString()}</span>
</Text>
<Card style={{ overflowY: 'scroll' }}>
<Spacer height={1 / 2} />
<Grid.Container justify={'space-between'}>
<Grid xs={8}>
<Text h3 paddingLeft={1 / 2}>
<Link color href={`/post/${post.id}`}>{post.title}
<ShiftBy y={-1}><VisibilityBadge visibility={post.visibility} /></ShiftBy>
</Link>
</Text></Grid>
<Grid xs={7}><Text type="secondary" h5>{new Date(post.createdAt).toLocaleDateString()} </Text></Grid>
<Grid xs={4}><Text type="secondary" h5>{post.files.length === 1 ? "1 file" : `${post.files.length} files`}</Text></Grid>
</Grid.Container>
<Divider h="1px" my={0} />
<Card.Content >
<Input
placeholder="MyFile.md"
value={post.files[0].title}
marginTop="var(--gap-double)"
size={1.2}
font={1.2}
label="Filename"
disabled={true}
readOnly
width={"100%"}
/>
<Preview height={220} content={post.files[0].content} />
{post.files.map((file: any) => {
return <FilenameInput key={file.id} title={file.title} />
})}
</Card.Content>
</Card>
</li>
})}
</ul>
</div>
}
</div>
</div >
)
}

2
client/components/post/index.tsx
View file

@ -93,7 +93,7 @@ const Post = () => {
style={{ flex: .5, lineHeight: '40px' }}
type="default"
>
Add another document
Add a File
</Button>
<ButtonDropdown loading={isSubmitting} type="success">

2
client/pages/mine.tsx
View file

@ -20,7 +20,7 @@ const Home = ({ theme, changeTheme }: { theme: "light" | "dark", changeTheme: ()
<Page.Header>
<Header theme={theme} changeTheme={changeTheme} />
</Page.Header>
<Page.Content width={"var(--main-content-width)"} margin="0 auto" className={styles.main}>
<Page.Content paddingTop={"var(--gap)"} width={"var(--main-content-width)"} margin="0 auto" className={styles.main}>
{isLoading && <div style={{ margin: "0 auto" }}><Loader /></div>}
{isSignedIn && <MyPosts />}
</Page.Content>

4
client/pages/new.tsx
View file

@ -1,7 +1,7 @@
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import HomeComponent from '../components/post'
import { Loading, Page } from '@geist-ui/core'
import { Page } from '@geist-ui/core'
import useSignedIn from '../lib/hooks/use-signed-in'
import Header from '../components/header'
import { ThemeProps } from './_app'
@ -25,7 +25,7 @@ const Home = ({ theme, changeTheme }: ThemeProps) => {
<Header theme={theme} changeTheme={changeTheme} />
</Page.Header>
<Page.Content width={"var(--main-content-width)"} margin="0 auto" className={styles.main}>
<Page.Content paddingTop={"var(--gap)"} width={"var(--main-content-width)"} margin="0 auto" className={styles.main}>
{isSignedIn && <HomeComponent />}
</Page.Content>
</Page >

2
client/pages/signin.tsx
View file

@ -8,7 +8,7 @@ const SignIn = ({ theme, changeTheme }: ThemeProps) => (
<Page.Header>
<Header theme={theme} changeTheme={changeTheme} />
</Page.Header>
<Page.Content width={"var(--main-content-width)"} margin="auto">
<Page.Content paddingTop={"var(--gap)"} width={"var(--main-content-width)"} margin="auto">
<Auth page="signin" />
</Page.Content>
</Page>

2
client/pages/signup.tsx
View file

@ -8,7 +8,7 @@ const SignUp = ({ theme, changeTheme }: ThemeProps) => (
<Page.Header>
<Header theme={theme} changeTheme={changeTheme} />
</Page.Header>
<Page.Content width={"var(--main-content-width)"} margin="auto">
<Page.Content width={"var(--main-content-width)"} paddingTop={"var(--gap)"} margin="auto">
<Auth page="signup" />
</Page.Content>
</Page>

1
client/styles/Home.module.css
View file

@ -1,6 +1,5 @@
.main {
min-height: 100vh;
padding: 4rem 0;
flex: 1;
display: flex;
flex-direction: column;

2
server/src/routes/users.ts
View file

@ -42,7 +42,7 @@ users.get("/mine", jwt, async (req: UserJwtRequest, res, next) => {
if (!user) {
return res.status(404).json({ error: "User not found" })
}
return res.json(user.posts)
return res.json(user.posts?.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime()))
} catch (error) {
next(error)
}