wip
This commit is contained in:
parent
36f5eef849
commit
dcaccc7ab8
5 changed files with 27 additions and 30 deletions
|
@ -5,6 +5,7 @@ import { useParams } from 'react-router-dom'
|
||||||
import SingleColumnLayout from '../../../layouts/SingleColumnLayout.tsx'
|
import SingleColumnLayout from '../../../layouts/SingleColumnLayout.tsx'
|
||||||
import NavBar from '../../../components/NavBar.tsx'
|
import NavBar from '../../../components/NavBar.tsx'
|
||||||
import { useFeedViewModel } from '../components/FeedView.ts'
|
import { useFeedViewModel } from '../components/FeedView.ts'
|
||||||
|
import NavLinkButton from '../../../components/NavLinkButton.tsx'
|
||||||
|
|
||||||
interface AuthorPageParams {
|
interface AuthorPageParams {
|
||||||
postsService: PostsService
|
postsService: PostsService
|
||||||
|
@ -23,7 +24,14 @@ export default function AuthorPage({ postsService }: AuthorPageParams) {
|
||||||
const { pages, loadNextPage } = useFeedViewModel(fetchPosts)
|
const { pages, loadNextPage } = useFeedViewModel(fetchPosts)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SingleColumnLayout navbar={<NavBar />}>
|
<SingleColumnLayout
|
||||||
|
navbar={
|
||||||
|
<NavBar>
|
||||||
|
<NavLinkButton to={'/'}>home</NavLinkButton>
|
||||||
|
<NavLinkButton to="/logout">logout</NavLinkButton>
|
||||||
|
</NavBar>
|
||||||
|
}
|
||||||
|
>
|
||||||
<FeedView pages={pages} onLoadMore={loadNextPage} />
|
<FeedView pages={pages} onLoadMore={loadNextPage} />
|
||||||
</SingleColumnLayout>
|
</SingleColumnLayout>
|
||||||
)
|
)
|
||||||
|
|
|
@ -9,6 +9,7 @@ import { Post } from '../posts/posts.ts'
|
||||||
import { Temporal } from '@js-temporal/polyfill'
|
import { Temporal } from '@js-temporal/polyfill'
|
||||||
import SingleColumnLayout from '../../../layouts/SingleColumnLayout.tsx'
|
import SingleColumnLayout from '../../../layouts/SingleColumnLayout.tsx'
|
||||||
import NavBar from '../../../components/NavBar.tsx'
|
import NavBar from '../../../components/NavBar.tsx'
|
||||||
|
import NavLinkButton from '../../../components/NavLinkButton.tsx'
|
||||||
|
|
||||||
interface HomePageProps {
|
interface HomePageProps {
|
||||||
postsService: PostsService
|
postsService: PostsService
|
||||||
|
@ -59,7 +60,13 @@ export default function HomePage({ postsService, mediaService }: HomePageProps)
|
||||||
)
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SingleColumnLayout navbar={<NavBar />}>
|
<SingleColumnLayout
|
||||||
|
navbar={
|
||||||
|
<NavBar>
|
||||||
|
<NavLinkButton to="/logout">logout</NavLinkButton>
|
||||||
|
</NavBar>
|
||||||
|
}
|
||||||
|
>
|
||||||
<main className={`w-full max-w-3xl mx-auto`}>
|
<main className={`w-full max-w-3xl mx-auto`}>
|
||||||
<NewPostWidget onSubmit={onCreatePost} isSubmitting={isSubmitting} />
|
<NewPostWidget onSubmit={onCreatePost} isSubmitting={isSubmitting} />
|
||||||
<FeedView pages={pages} onLoadMore={loadNextPage} />
|
<FeedView pages={pages} onLoadMore={loadNextPage} />
|
||||||
|
|
|
@ -42,7 +42,9 @@ export class PostsService {
|
||||||
amount: number | null,
|
amount: number | null,
|
||||||
): Promise<Post[]> {
|
): Promise<Post[]> {
|
||||||
const response = await client.GET('/posts', {
|
const response = await client.GET('/posts', {
|
||||||
query: { cursor, amount, username },
|
params: {
|
||||||
|
query: { From: cursor ?? undefined, Amount: amount ?? undefined, Author: username },
|
||||||
|
},
|
||||||
credentials: 'include',
|
credentials: 'include',
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
@ -1,31 +1,9 @@
|
||||||
import { useUser } from '../app/user/userStore'
|
import { PropsWithChildren } from 'react'
|
||||||
import NavLinkButton from './NavLinkButton'
|
|
||||||
|
|
||||||
export default function NavBar() {
|
type NavBarProps = unknown
|
||||||
const { user } = useUser()
|
|
||||||
|
|
||||||
const loggedIn = user != null
|
|
||||||
|
|
||||||
|
export default function NavBar({ children }: PropsWithChildren<NavBarProps>) {
|
||||||
return (
|
return (
|
||||||
<nav className={`w-full flex flex-row-reverse gap-4 px-4 md:px-8 py-0.5`}>
|
<nav className={`w-full flex flex-row justify-end gap-4 px-4 md:px-8 py-3`}>{children}</nav>
|
||||||
{loggedIn ? <LoggedInContent /> : <LoggedOutContent />}
|
|
||||||
</nav>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function LoggedInContent() {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<NavLinkButton to="/logout">logout</NavLinkButton>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
function LoggedOutContent() {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<NavLinkButton to="/signup">register</NavLinkButton>
|
|
||||||
<NavLinkButton to="/login">login</NavLinkButton>{' '}
|
|
||||||
</>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,8 +6,10 @@
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer variables {
|
@layer variables {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue