Show publications

website/src/components/Feed/index.js

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from 'react'
+import "./index.less"
+import { Typography } from 'antd';
+import _service from "@netuno/service-client";
+
+function Feed(){
+    const [publications, setPublications] = useState([])
+
+    useEffect(() => {
+        _service({
+            url: "api/publications",
+            success: (resopnse) => {
+                setPublications(resopnse.json)
+                console.log(resopnse.json)
+            }
+        })
+    }, [])
+    return(
+        <>
+            {publications.map(publication => {
+                return(
+                    <div className="publication">
+                        <header>
+                            <Typography.Title level={4}>{publication.community}</Typography.Title>
+                            <Typography.Text>{publication.moment}</Typography.Text>
+                        </header>
+                        <Typography.Text>{publication.message}</Typography.Text>
+                    </div>
+                )
+            })}
+        </>
+    )
+}
+
+export default Feed

website/src/components/Feed/index.less

@@ -0,0 +1,12 @@
+.publication{
+    border: 1px solid #aaa;
+    margin: 8px 0;
+    padding: 12px;
+    border-radius: 8px;
+
+    header{
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+}

website/src/components/NewPublication/index.js

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react'
+import { Form, Input, Select, Button, notification } from 'antd';
+import _service from "@netuno/service-client";
+import "./index.less"
+
+const layout = {
+    labelCol: {
+      span: 24,
+    },
+    wrapperCol: {
+      span: 24,
+    },
+  };
+
+function NewPublication(){
+  const [communities, setCommunities] = useState([])
+
+  useEffect(() => {
+    _service({
+      url:"api/communities",
+      method: "GET",
+      success: (response) => {
+          setCommunities(response.json);
+        },
+      fail: () => {
+          notification.error({
+              message: "Erro to load communities"
+          })
+      }
+  })
+  }, [])
+
+  console.log(communities)
+
+    return(
+        <>
+        <Form {...layout} name="nest-messages" layout="vertical">
+      <Form.Item name="message" label="Nova publicação">
+        <Input.TextArea />
+      </Form.Item>
+      <Form.Item name="community">
+        <Select placeholder="Selecione uma comunidade">
+          {communities.map(community => {
+            <Select.Option value={community.uid}>{community.nome}sdsd</Select.Option>
+          })}
+        </Select>
+      </Form.Item>
+      <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 0 }}>
+        <Button type="primary" htmlType="submit">
+          Publicar
+        </Button>
+      </Form.Item>
+    </Form>
+        </>
+    )
+}
+
+export default NewPublication

website/src/pages/Main/index.js

@@ -10,6 +10,8 @@ import {
 } from "@ant-design/icons";
 import _service from "@netuno/service-client";
 import Communities from '../../components/Communities'
+import Feed from '../../components/Feed'
+import NewPublication from '../../components/NewPublication'
 
 const Main = () => {
   const [isLogged, setIsLogged] = useState(false);
@@ -74,10 +76,13 @@ const Main = () => {
         ]}
       />
       <Row>
-        <Col span={12}>
+        <Col style={{margin: 24, height: "80vh", overflow: "auto"}} span={11}>
           <Communities />
         </Col>
-        <Col span={12}></Col>
+        <Col style={{margin: 24, height: "80vh", overflow: "auto"}} span={11}>
+          <NewPublication />
+          <Feed />
+        </Col>
       </Row>
       </>
     );