feat: サイドバー、ログインフォームを作成

src/main/web/App.tsx

@@ -1,24 +1,32 @@
-import {Component} from "solid-js";
+import {Component, createSignal, lazy} from "solid-js";
 import {Route, Router, Routes} from "@solidjs/router";
 import {TopPage} from "./pages/TopPage";
 import {createTheme, CssBaseline, ThemeProvider, useMediaQuery} from "@suid/material";
+import {createCookieStorage} from "@solid-primitives/storage";
+import {ApiProvider, useApi} from "./lib/ApiProvider";
+import {Configuration, DefaultApi} from "./generated";
+import {LoginPage} from "./pages/LoginPage";
 
 export const App: Component = () => {
     const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-
+    const [cookie,setCookie] = createCookieStorage()
+    const [api,setApi] = createSignal(new DefaultApi(new Configuration({basePath:window.location.origin+"/api/internal/v1/",apiKey:cookie.key as string})))
     const theme = createTheme({
         palette: {
             mode: prefersDarkMode() ? 'dark' : 'light',
         }
     })
     return (
-        <ThemeProvider theme={theme}>
-            <CssBaseline/>
-            <Router>
-                <Routes>
-                    <Route path="/" component={TopPage}/>
-                </Routes>
-            </Router>
-        </ThemeProvider>
+        <ApiProvider api={api()}>
+            <ThemeProvider theme={theme}>
+                <CssBaseline/>
+                <Router>
+                    <Routes>
+                        <Route path="/" component={TopPage}/>
+                        <Route path="/login" component={LoginPage}/>
+                    </Routes>
+                </Router>
+            </ThemeProvider>
+        </ApiProvider>
     )
-}
+}

src/main/web/atoms/SidebarButton.tsx

@@ -0,0 +1,14 @@
+import {ParentComponent} from "solid-js";
+import {Button, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemText} from "@suid/material";
+import {Link} from "@solidjs/router";
+
+export const SidebarButton: ParentComponent<{ text: string,linkTo:string }> = (props) => {
+    return (
+        <ListItem>
+            <ListItemButton component={Link} href={props.linkTo}>
+                <ListItemIcon>{props.children}</ListItemIcon>
+                <ListItemText primary={props.text}/>
+            </ListItemButton>
+        </ListItem>
+    )
+}

src/main/web/lib/ApiProvider.tsx

@@ -0,0 +1,8 @@
+import {createContextProvider} from "@solid-primitives/context";
+import {createSignal} from "solid-js";
+import {DefaultApi, DefaultApiInterface} from "../generated";
+
+export const [ApiProvider,useApi] = createContextProvider((props:{api:DefaultApiInterface}) => {
+   const [api,setApi] = createSignal(props.api);
+   return api
+},()=>new DefaultApi());

src/main/web/organisms/PostForm.tsx

@@ -1,15 +1,18 @@
-import {Component} from "solid-js";
+import {Component, createSignal} from "solid-js";
 import {Button, IconButton, Paper, Stack, TextField, Typography} from "@suid/material";
 import {Avatar} from "../atoms/Avatar";
 import {AddPhotoAlternate, Poll, Public} from "@suid/icons-material";
+import {useApi} from "../lib/ApiProvider";
 
 export const PostForm: Component<{ label: string }> = (props) => {
+    const [text, setText] = createSignal("")
+    const api = useApi()
     return (
         <Paper sx={{width: "100%"}}>
             <Stack>
                 <Stack direction={"row"} spacing={2} sx={{padding: 2}}>
                     <Avatar src={""}/>
-                    <TextField label={props.label} multiline rows={4} variant={"standard"} fullWidth/>
+                    <TextField label={props.label} multiline rows={4} variant={"standard"} onChange={(event)=>setText(event.target.value)} fullWidth/>
                 </Stack>
                 <Stack direction={"row"} justifyContent={"space-between"} sx={{padding: 2}}>
                     <Stack direction={"row"} justifyContent={"flex-start"} alignItems={"center"}>
@@ -27,7 +30,9 @@ export const PostForm: Component<{ label: string }> = (props) => {
                         <Typography>
                             aaa
                         </Typography>
-                        <Button variant={"contained"}>
+                        <Button variant={"contained"} onClick={() => {
+                            api().postsPost({text: text()}).then(()=>setText(""))
+                        }}>
                             投稿する
                         </Button>
                     </Stack>

src/main/web/pages/LoginPage.tsx

@@ -0,0 +1,39 @@
+import {Button, Card, CardContent, CardHeader, Modal, Stack, TextField} from "@suid/material";
+import {Component, createSignal} from "solid-js";
+
+export const LoginPage:Component = () => {
+    const [username,setUsername] = createSignal("")
+    const [password,setPassword] = createSignal("")
+
+    return (
+        <Modal open>
+            <Card>
+                <CardHeader/>
+                <CardContent>
+
+                    <Stack spacing={3}>
+
+                        <TextField
+                            value={username()}
+                            onChange={(event)=>setUsername(event.target.value)}
+                            label="Username"
+                            type="text"
+                            autoComplete="username"
+                            variant="standard"
+                        />
+                        <TextField
+                            value={password()}
+                            onChange={(event)=>setPassword(event.target.value)}
+                            label="Password"
+                            type="password"
+                            autoComplete="current-password"
+                            variant="standard"
+                        />
+                        <Button type={"submit"} onClick={()=>{
+                            console.log(username() +" " + password())}}>Login</Button>
+                    </Stack>
+                </CardContent>
+            </Card>
+        </Modal>
+    )
+}

src/main/web/pages/TopPage.tsx

@@ -1,21 +1,23 @@
-import {Component, createResource} from "solid-js";
+import {Component} from "solid-js";
 import {MainPage} from "../templates/MainPage";
 import {PostForm} from "../organisms/PostForm";
 import {Stack} from "@suid/material";
-import {DefaultApi} from "../generated";
+import {PostResponse} from "../generated";
 import {PostList} from "../templates/PostList";
-import {ApiWrapper} from "../lib/ApiWrapper";
+import {useApi} from "../lib/ApiProvider";
+import {createStore} from "solid-js/store";
 
 
 export const TopPage: Component = () => {
-    const api = new ApiWrapper(new DefaultApi())
-    const [posts] = createResource(api.postsGet);
+    const api = useApi()
+    const [posts, setPosts] = createStore<PostResponse[]>([])
+    api().postsGet().then((res)=>setPosts(res))
 
     return (
         <MainPage>
             <Stack spacing={1} alignItems={"stretch"}>
                 <PostForm label={"投稿する"}/>
-                <PostList posts={posts() ?? []}/>
+                <PostList posts={posts}/>
             </Stack>
         </MainPage>
     )

src/main/web/templates/MainPage.tsx

@@ -1,20 +1,20 @@
-import {ParentComponent} from "solid-js";
+import {createSignal, ParentComponent} from "solid-js";
 import {Grid} from "@suid/material";
 import {Sidebar} from "./Sidebar";
 
 export const MainPage: ParentComponent = (props) => {
-
     return (
-        <Grid container spacing={2}>
+        <Grid container spacing={2} wrap={"nowrap"}>
             <Grid item xs={0} md={3}>
                 <Sidebar/>
             </Grid>
-            <Grid item xs={12} md={5}>
+            <Grid item xs={12} md={6}>
                 {props.children}
             </Grid>
             <Grid item xs={0} md={3}>
 
             </Grid>
         </Grid>
+
     )
-}
+}

src/main/web/templates/PostList.tsx

@@ -3,7 +3,7 @@ import {CircularProgress} from "@suid/material";
 import {Post} from "../organisms/Post";
 import {PostResponse} from "../generated";
 
-export const PostList: Component<{ posts: PostResponse[] }> = (props) => {
+export const PostList: Component<{ posts: PostResponse[] | undefined }> = (props) => {
     return (
         <For each={props.posts} fallback={<CircularProgress/>}>
             {

src/main/web/templates/Sidebar.tsx

@@ -1,10 +1,13 @@
 import {Component} from "solid-js";
-import {Stack} from "@suid/material";
+import {Button, List, Stack} from "@suid/material";
+import {Home} from "@suid/icons-material";
+import {SidebarButton} from "../atoms/SidebarButton";
 
-export const Sidebar: Component = () => {
+export const Sidebar: Component = (props) => {
     return (
-        <Stack>
-
-        </Stack>
+        <List>
+            <SidebarButton text={"AP"} linkTo={"/"}></SidebarButton>
+            <SidebarButton text={"Home"} linkTo={"/"}><Home/></SidebarButton>
+        </List>
     )
-}
+}