initial commit

services/myblog/frontend/layout_blog/Layout.module.css

@@ -0,0 +1,84 @@
+.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: 100px 1fr;
+
+    min-height: 100vh;
+    grid-template-areas:
+		". . header . utils"
+		". post . . .";
+}
+
+.utils{
+    display: grid;
+    grid-template-areas:
+		"signout "
+		"create "
+		"blog_list "
+        "read_post"
+        "posts_list";
+    grid-area: utils;
+    max-height: 50px;
+    max-width: 150px;
+}
+.signout{
+    grid-area: signout;
+    }
+.create{
+    grid-area: create;
+}
+.blog_list{
+    grid-area: blog_list;
+}
+.post_read{
+    grid-area: post_read;
+}
+.posts_list{
+    grid-area: posts_list;
+}
+
+.mybtn{
+    margin: 5px;
+    --bs-btn-color: #fff;
+    --bs-btn-bg: #6c757d;
+    --bs-btn-border-color: #6c757d;
+    --bs-btn-hover-color: #fff;
+    --bs-btn-hover-bg: #5c636a;
+    --bs-btn-hover-border-color: #565e64;
+    --bs-btn-focus-shadow-rgb: 130,138,145;
+    --bs-btn-active-color: #fff;
+    --bs-btn-active-bg: #565e64;
+    --bs-btn-active-border-color: #51585e;
+    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    --bs-btn-disabled-color: #fff;
+    --bs-btn-disabled-bg: #6c757d;
+    --bs-btn-disabled-border-color: #6c757d;
+    user-select: none;
+    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
+    border-radius: var(--bs-btn-border-radius);
+    background-color: var(--bs-btn-bg);
+    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+    border-radius: 5px;
+    font-family: var(--bs-btn-font-family);
+    font-size: var(--bs-btn-font-size);
+    font-weight: var(--bs-btn-font-weight);
+    line-height: var(--bs-btn-line-height);
+    color: var(--bs-btn-color);
+    text-align: center;
+    text-decoration: none;
+
+}
+
+.mybtn:hover{
+    color: var(--bs-btn-hover-color);
+    background-color: var(--bs-btn-hover-bg);
+    border-color: var(--bs-btn-hover-border-color);
+
+}
+
+
+
+
+.header{
+    grid-area: header;
+}

services/myblog/frontend/layout_blog/Layout.props.ts

@@ -0,0 +1,5 @@
+import {DataHTMLAttributes, DetailedHTMLProps, HTMLAttributes, ReactNode} from "react";
+
+export interface LayoutProps {
+    children: ReactNode;
+}

services/myblog/frontend/layout_blog/Layout.tsx

@@ -0,0 +1,155 @@
+import {LayoutProps} from "./Layout.props";
+import styles from "./Layout.module.css"
+import styles_post from "./Post/Post.module.css"
+import {Post} from "./Post/Post";
+import cn from "classnames";
+import {Component, FunctionComponent} from "react";
+import {useContext, useEffect, useState} from "react";
+import Cookie from 'js-cookie';
+import axios from "axios";
+import {Post_int, Blog_int} from "../interfaces/blog_interface"
+import blog from "../pages/blog";
+import {Button, Form, Input} from "reactstrap";
+const Layout = ({ children }: LayoutProps): JSX.Element => {
+    const [data, setData] = useState(<></>);
+    const [file, setFile] = useState()
+    function handleChange(event) {
+        setFile(event.target.files[0])
+    }
+    useEffect(() => {
+        //get_posts()
+        get_blog()
+    }, []);
+
+    function get_blog(){
+        if (localStorage.getItem("blog_url") == null){
+            axios.get<Blog_int>('http://10.50.20.5:13377/api/blog', {withCredentials: true}).then(response => {
+                localStorage.setItem('blog_url', response.data.url);
+                get_posts(response.data.url)
+            })
+        } else{
+            get_posts(localStorage.getItem("blog_url"))
+        }
+
+    }
+
+    function get_posts(blog_url: string){
+
+        axios.get<Post_int>('http://10.50.20.5:13377/api/blog/'.concat(blog_url), {withCredentials: true}).then(response => {
+            let jsonDataPosts = JSON.parse(JSON.stringify(response.data.posts))
+            let mydata: JSX.Element
+            jsonDataPosts.forEach((post: Post_int) => {
+                        mydata = (
+                            <>
+                                <Post content={post.posts.body} title={post.posts.title}/>
+                                {mydata}
+                            </>)
+
+                        setData(mydata)
+
+                }
+            )
+        })
+    }
+    function sign_out(){
+        localStorage.removeItem("blog_url")
+        Cookie.remove('sessions')
+        window.location.href = "/auth"
+    }
+    function create_post(){
+        axios.post("http://10.50.20.5:13377/api/blog/".concat(localStorage.getItem("blog_url")).concat("/").concat("create_post"), {"title": "test", "body":"test"}, {withCredentials: true}).then( response => {window.location.reload()})
+    }
+
+    function blog_list(){
+        axios.get("http://10.50.20.5:13377/api/blogs", {withCredentials: true}).then( response => {
+            let jsonDataBlogs = JSON.parse(JSON.stringify(response.data))
+            let mydata: JSX.Element
+            jsonDataBlogs.forEach((post: Blog_int) => {
+                    mydata = (
+                        <>
+                            <pre><code>post.url</code></pre>
+                            <pre><code>post.is_private</code></pre>
+                            {mydata}
+                        </>
+                    )
+
+                    setData(mydata)
+
+                }
+            )
+        })
+    }
+
+
+
+    function upload_file(){
+
+    }
+
+    function handleSubmit() {
+        event.preventDefault()
+        const url = 'http://10.50.20.5:13377/file/upload?path=file_storage';
+        const formData = new FormData();
+        formData.append('file', file);
+        const config = {
+            withCredentials: true,
+            headers: {
+                'content-type': 'multipart/form-data',
+            },
+        };
+        axios.post(url, formData, config).then((response) => {
+            console.log(response.data);
+        });
+
+    }
+
+    function read_post(){
+        let num_post = prompt("Input id your post")
+        axios.get("http://10.50.20.5:13377/api/blog/".concat(localStorage.getItem("blog_url")).concat("/").concat("post").concat("/").concat(num_post), {withCredentials: true}).then( response => {
+            let jsonDataBlogs = JSON.parse(JSON.stringify(response.data))
+            let mydata: JSX.Element
+            jsonDataBlogs.forEach((post: Blog_int) => {
+                    mydata = (
+                        <>
+                            <pre><code>{mydata}</code></pre>
+                        </>
+                    )
+
+                    setData(mydata)
+                }
+            )
+        })
+    }
+
+    return(
+        <div className={styles.container} >
+            <div className={styles.utils}>
+                <button className={cn(styles.signout, styles.mybtn)} onClick={function (){sign_out()}}>Sign Out</button>
+                <button className={cn(styles.create, styles.mybtn)} onClick={function (){create_post()}}>Create Post</button>
+                <button className={cn(styles.blog_list, styles.mybtn)} onClick={function (){blog_list()}}>Blogs List</button>
+                <button className={cn(styles.read_post, styles.mybtn)} onClick={function (){read_post()}}>Read Post</button>
+                <button className={cn(styles.posts_list, styles.mybtn)} onClick={function (){get_posts(localStorage.getItem("blog_url"))}}>Posts List</button>
+                <Form onSubmit={handleSubmit}>
+                    <h2>Upload</h2>
+                    <Input type="file" onChange={handleChange}></Input>
+                    <button type="submit">Upload</button>
+                </Form>
+            </div>
+            <h1 className={styles.header}>Test Header</h1>
+            <Post className={styles_post.post} content={"test"} title={"test"}/>
+            {children}
+        </div>
+    );
+};
+
+
+
+export const withLayout = <T extends Record<string, unknown>>(Component: FunctionComponent<T>) => {
+    return function withLayoutComponent(props: T): JSX.Element {
+        return(
+            <Layout>
+                <Component {...props} />
+            </Layout>
+        );
+    };
+};

services/myblog/frontend/layout_blog/Post/Post.module.css

@@ -0,0 +1,20 @@
+
+.post{
+    grid-area: post;
+    display: grid;
+    grid-template-columns: 0.5fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+
+    grid-template-areas:
+		"title . ."
+		". content .";
+    max-height: 200px;
+}
+
+.title{
+    grid-area: title;
+}
+
+.content{
+    grid-area: content;
+}

services/myblog/frontend/layout_blog/Post/Post.props.ts

@@ -0,0 +1,7 @@
+
+import {DataHTMLAttributes, DetailedHTMLProps, HTMLAttributes, InputHTMLAttributes, ReactNode} from "react";
+
+export interface PostProps extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+content: string;
+title: string;
+}

services/myblog/frontend/layout_blog/Post/Post.tsx

@@ -0,0 +1,14 @@
+import {PostProps} from "./Post.props";
+import styles from "./Post.module.css"
+import cn from "classnames";
+
+export const Post = ({className, title="", content="", ...props}: PostProps): JSX.Element => {
+    return(
+        <div className={cn(styles.post, className, {
+        })} {...props}>
+            <img src={"http://10.50.20.5:13377/image/images?filename=standart_image.png"}/>
+            <h1 className={styles.title}>{title}</h1>
+            <p className={styles.content}>{content}</p>
+        </div>
+    );
+}