feat: タイムラインを作成

src/main/resources/openapi/api.yaml

@@ -276,6 +276,7 @@ components:
         - domain
         - screenName
         - description
+        - url
         - createdAt
       properties:
         id:

src/main/web/lib/ApiWrapper.ts

@@ -0,0 +1,16 @@
+import {DefaultApiInterface} from "../generated";
+
+export class ApiWrapper {
+    api: DefaultApiInterface;
+
+    constructor(initApi: DefaultApiInterface) {
+        this.api = initApi;
+        console.log(this.api);
+        console.log(this.postsGet());
+    }
+
+    postsGet = async () => this.api.postsGet()
+
+    usersUserNameGet = async (userName: string) => this.api.usersUserNameGet(userName);
+
+}

src/main/web/model/PostDetails.ts

@@ -0,0 +1,5 @@
+import {PostResponse, UserResponse} from "../generated";
+
+export type PostDetails = PostResponse & {
+    user: UserResponse
+}

src/main/web/molecules/ShareScopeIndicator.tsx

@@ -0,0 +1,29 @@
+import {Component, Match, Switch} from "solid-js";
+import {Home, Lock, Mail, Public} from "@suid/icons-material";
+import {IconButton} from "@suid/material";
+import {Visibility} from "../generated";
+
+export const ShareScopeIndicator: Component<{ visibility: Visibility }> = (props) => {
+    return <Switch fallback={<Public/>}>
+        <Match when={props.visibility == "public"}>
+            <IconButton>
+                <Public/>
+            </IconButton>
+        </Match>
+        <Match when={props.visibility == "direct"}>
+            <IconButton>
+                <Mail/>
+            </IconButton>
+        </Match>
+        <Match when={props.visibility == "followers"}>
+            <IconButton>
+                <Lock/>
+            </IconButton>
+        </Match>
+        <Match when={props.visibility == "unlisted"}>
+            <IconButton>
+                <Home/>
+            </IconButton>
+        </Match>
+    </Switch>
+}

src/main/web/organisms/Post.tsx

@@ -1,10 +1,11 @@
-import {Component, createSignal, Match, Switch} from "solid-js";
+import {Component, createSignal} from "solid-js";
-import {PostResponse} from "../generated";
 import {Box, Card, CardActions, CardContent, CardHeader, IconButton, Menu, MenuItem, Typography} from "@suid/material";
 import {Avatar} from "../atoms/Avatar";
-import {Favorite, Home, Lock, Mail, MoreVert, Public, Reply, ScreenRotationAlt} from "@suid/icons-material";
+import {Favorite, MoreVert, Reply, ScreenRotationAlt} from "@suid/icons-material";
+import {PostDetails} from "../model/PostDetails";
+import {ShareScopeIndicator} from "../molecules/ShareScopeIndicator";
 
-export const Post: Component<{ post: PostResponse }> = (props) => {
+export const Post: Component<{ post: PostDetails }> = (props) => {
     const [anchorEl, setAnchorEl] = createSignal<null | HTMLElement>(null)
     const open = () => Boolean(anchorEl());
     const handleClose = () => {
@@ -13,7 +14,8 @@ export const Post: Component<{ post: PostResponse }> = (props) => {
 
     return (
         <Card>
-            <CardHeader avatar={<Avatar src={""}/>} title={"test user"} subheader={"test@test"}
+            <CardHeader avatar={<Avatar src={props.post.user.url + "/icon.jpg"}/>} title={props.post.user.screenName}
+                        subheader={`${props.post.user.name}@${props.post.user.domain}`}
                         action={<IconButton onclick={(event) => {
                             setAnchorEl(event.currentTarget)
                         }}><MoreVert/><Menu disableScrollLock anchorEl={anchorEl()} open={open()} onClose={handleClose}><MenuItem
@@ -36,29 +38,8 @@ export const Post: Component<{ post: PostResponse }> = (props) => {
                 <Box sx={{marginLeft: "auto"}}>
                     <Typography>{new Date(props.post.createdAt).toDateString()}</Typography>
                 </Box>
-                <Switch fallback={<Public/>}>
+                <ShareScopeIndicator visibility={props.post.visibility}/>
-                    <Match when={props.post.visibility == "public"}>
-                        <IconButton>
-                            <Public/>
-                        </IconButton>
-                    </Match>
-                    <Match when={props.post.visibility == "direct"}>
-                        <IconButton>
-                            <Mail/>
-                        </IconButton>
-                    </Match>
-                    <Match when={props.post.visibility == "followers"}>
-                        <IconButton>
-                            <Lock/>
-                        </IconButton>
-                    </Match>
-                    <Match when={props.post.visibility == "unlisted"}>
-                        <IconButton>
-                            <Home/>
-                        </IconButton>
-                    </Match>
-                </Switch>
             </CardActions>
         </Card>
     )
-}
+}

src/main/web/organisms/PostForm.tsx

@@ -5,7 +5,7 @@ import {AddPhotoAlternate, Poll, Public} from "@suid/icons-material";
 
 export const PostForm: Component<{ label: string }> = (props) => {
     return (
-        <Paper>
+        <Paper sx={{width: "100%"}}>
             <Stack>
                 <Stack direction={"row"} spacing={2} sx={{padding: 2}}>
                     <Avatar src={""}/>
@@ -35,4 +35,4 @@ export const PostForm: Component<{ label: string }> = (props) => {
             </Stack>
         </Paper>
     )
-}
+}

src/main/web/pages/TopPage.tsx

@@ -1,56 +1,36 @@
-import {Component} from "solid-js";
+import {Component, createResource} from "solid-js";
 import {MainPage} from "../templates/MainPage";
 import {PostForm} from "../organisms/PostForm";
 import {Stack} from "@suid/material";
-import {Post} from "../organisms/Post";
+import {DefaultApi} from "../generated";
-import {PostResponse} from "../generated";
+import {PostDetails} from "../model/PostDetails";
+import {PostList} from "../templates/PostList";
+import {ApiWrapper} from "../lib/ApiWrapper";
+
 
 export const TopPage: Component = () => {
+    const api = new ApiWrapper(new DefaultApi())
+    const [posts] = createResource(api.postsGet);
+
     return (
         <MainPage>
-            <Stack spacing={1}>
+            <Stack spacing={1} alignItems={"stretch"}>
                 <PostForm label={"投稿する"}/>
-                <Post post={{
+                <PostList posts={posts()?.map(value => {
-                    text: "テスト～",
+                    return {
-                    sensitive: false,
+                        ...value,
-                    apId: "https://example.com",
+                        user: {
-                    id: 1234,
+                            id: 1234,
-                    createdAt: Date.now(),
+                            createdAt: Date.now(),
-                    url: "https://example.com",
+                            domain: "test-hideout.usbharu.dev",
-                    userId: 1234,
+                            name: "test",
-                    visibility: "public"
+                            url: "https://test-hideout.usbharu.dev",
-                } as PostResponse}></Post>
+                            screenName: "test",
-                <Post post={{
+                            description: ""
-                    text: "テスト 公開範囲",
+                        }
-                    sensitive: false,
+                    } as PostDetails
-                    apId: "https://example.com",
+                }) ?? []}/>
-                    id: 1234,
-                    createdAt: 1234567,
-                    url: "https://example.com",
-                    userId: 1234,
-                    visibility: "direct"
-                } as PostResponse}></Post>
-                <Post post={{
-                    text: "テスト～",
-                    sensitive: false,
-                    apId: "https://example.com",
-                    id: 1234,
-                    createdAt: 1234567,
-                    url: "https://example.com",
-                    userId: 1234,
-                    visibility: "unlisted"
-                } as PostResponse}></Post>
-                <Post post={{
-                    text: "テスト～",
-                    sensitive: false,
-                    apId: "https://example.com",
-                    id: 1234,
-                    createdAt: 1234567,
-                    url: "https://example.com",
-                    userId: 1234,
-                    visibility: "followers"
-                } as PostResponse}></Post>
             </Stack>
         </MainPage>
     )
-}
+}

src/main/web/templates/PostList.tsx

@@ -0,0 +1,14 @@
+import {Component, For} from "solid-js";
+import {CircularProgress} from "@suid/material";
+import {Post} from "../organisms/Post";
+import {PostDetails} from "../model/PostDetails";
+
+export const PostList: Component<{ posts: PostDetails[] }> = (props) => {
+    return (
+        <For each={props.posts} fallback={<CircularProgress/>}>
+            {
+                (item, index) => <Post post={item}/>
+            }
+        </For>
+    )
+}