Sessão 15

server/services/api/communities/detail.get.js

@@ -0,0 +1,42 @@
+// _core : social/userPessoa
+
+const dbComunidade = _db.queryFirst(`
+    SELECT 
+        uid,
+        nome,
+        descricao,
+        imagem,
+        (
+            SELECT count(id)
+            FROM pessoa_comunidade
+            WHERE pessoa_id = ?
+                AND comunidade_id = comunidade.id
+        ) seguindo,
+        (
+            SELECT count(id)
+            FROM pessoa_comunidade
+            WHERE comunidade_id = comunidade.id
+        ) pessoas,
+        (
+            SELECT count(id)
+            FROM publicacao
+            WHERE comunidade_id = comunidade.id
+        ) publicacoes
+    FROM comunidade
+    WHERE active = true
+        AND uid = ?::uuid
+    ORDER BY nome
+`, userPessoa().getInt("id"), _req.getString("uid"))
+
+const data = _val.map()
+
+if (dbComunidade != null) {
+    data.set("uid", dbComunidade.getString("uid"))
+        .set("name", dbComunidade.getString("nome"))
+        .set("description", dbComunidade.getString("descricao"))
+        .set("following", dbComunidade.getInt("seguindo") > 0)
+        .set("people", dbComunidade.getInt("pessoas"))
+        .set("publications", dbComunidade.getInt("publicacoes"))
+}
+
+_out.json(data)

server/services/api/communities/detail.options.js

@@ -0,0 +1,2 @@
+
+_out.json(_val.map().set("result", true))

server/services/api/communities/get.js

@@ -1,23 +1,32 @@
+// _core : social/userPessoa
 
 const dbComunidades = _db.query(`
     SELECT 
         uid,
         nome,
         descricao,
-        imagem
+        imagem,
+        (
+            SELECT count(id)
+            FROM pessoa_comunidade
+            WHERE pessoa_id = ?
+                AND comunidade_id = comunidade.id
+        ) seguindo
     FROM comunidade
     WHERE active = true
     ORDER BY nome
-`)
+`, userPessoa().getInt("id"))
 
 const data = _val.list()
 
 for (const dbComunidade of dbComunidades) {
+
     data.add(
         _val.map()
             .set("uid", dbComunidade.getString("uid"))
             .set("name", dbComunidade.getString("nome"))
             .set("description", dbComunidade.getString("descricao"))
+            .set("following", dbComunidade.getInt("seguindo") > 0)
     )
 }
 

website/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@ant-design/icons": "^4.6.2",
     "@netuno/auth-client": "^1.0.3",
     "@netuno/service-client": "^1.0.7",
     "@testing-library/jest-dom": "^5.11.10",

website/src/App.js

@@ -14,6 +14,7 @@ import Home from './pages/Home';
 import Login from './pages/Login';
 import Register from './pages/Register';
 import Communities from './pages/Communities';
+import Community from './pages/Community';
 import Main from './pages/Main';
 
 import Core from './Core';
@@ -95,6 +96,9 @@ function App() {
             <Route path="/main">
               <Main />
             </Route>
+            <Route path="/community/:uid">
+              <Community />
+            </Route>
             <Route path="/">
               <Home />
             </Route>

website/src/pages/Communities/Item/index.js

@@ -1,13 +1,17 @@
 import React, { useEffect, useState} from 'react';
 
+import { Link } from "react-router-dom";
+
 import _service from '@netuno/service-client';
 
 import { Button, notification } from 'antd';
 
+import { CheckCircleOutlined } from '@ant-design/icons';
+
 import "./index.less";
 
 export default ({ data })=> {
-    const [following, setFollowing] = useState(false);
+    const [following, setFollowing] = useState(data.following);
     const onFollow = ()=> {
         _service({
             method: 'PUT',
@@ -28,7 +32,7 @@ export default ({ data })=> {
     const servicePrefix = _service.config().prefix;
     return (
     <li style={{ backgroundImage: `url(${ servicePrefix }/api/communities/image?uid=${ data.uid })` }}>
-        <h1>{ data.name } <Button type="link" onClick={onFollow}>Seguir</Button></h1>
+        <h1><Link to={`/community/${data.uid}`}>{ data.name }</Link> { following ? <CheckCircleOutlined /> : null }</h1>
     </li>
     );
 };

website/src/pages/Communities/index.js

@@ -33,10 +33,9 @@ export default ()=> {
             }
         });
     }, []);
-    const servicePrefix = _service.config().prefix;
     return (
         <div className="communities">
-            <h1>Comunidades...</h1>{servicePrefix}
+            <h1>Comunidades...</h1>
             <ul className="communities__list">
             { communities.length > 0 && communities.map(
                 (community) => {

website/src/pages/Communities/index.less

@@ -8,7 +8,7 @@
             background-size: cover;
             background-repeat: no-repeat;
             background-position: 50% 50%;
-            height: 300px;
+            height: 200px;
             h1 {
                 background-color: rgba(0, 0, 0, 0.75);
                 padding: 10px;

website/src/pages/Community/index.js

@@ -0,0 +1,71 @@
+import React, { useEffect, useState} from 'react';
+
+import _service from '@netuno/service-client';
+
+import { useParams } from "react-router-dom";
+
+import { Button, Spin, Row, Col, notification } from 'antd';
+
+import { CheckCircleOutlined } from '@ant-design/icons';
+
+import "./index.less";
+
+export default ()=> {
+    const [data, setData] = useState(null);
+    const [following, setFollowing] = useState(false);
+    const { uid } = useParams();
+
+    useEffect(()=> {
+        _service({
+            method: 'GET',
+            url: "api/communities/detail",
+            data: { uid },
+            success: (response) => {
+                setData(response.json);
+                setFollowing(response.json.following);
+            },
+            fail: (e) => {
+                console.log("Service Error", e);
+                notification["error"]({
+                    message: 'Informações',
+                    description: 'Não foi possível carregar a informação.',
+                });
+            }
+        });
+    }, []);
+
+    const onFollow = ()=> {
+        _service({
+            method: 'PUT',
+            url: "api/communities/follow",
+            data: {uid: data.uid},
+            success: (response) => {
+                setFollowing(response.json.result);
+            },
+            fail: (e) => {
+                console.log("Service Error", e);
+                notification["error"]({
+                    message: 'Informações',
+                    description: 'Não foi possível carregar a informação.',
+                });
+            }
+        });
+    };
+    const servicePrefix = _service.config().prefix;
+
+    if (data == null) {
+        return <Spin />;
+    }
+    return (
+        <div className="community">
+            <div className="community__banner" style={{ backgroundImage: `url(${ servicePrefix }/api/communities/image?uid=${ data.uid })` }}>
+                <h1>{ data.name } { following ? <CheckCircleOutlined /> : <Button type="link" onClick={onFollow}>Seguir</Button> }</h1>
+            </div>
+            <Row>
+                <Col span={8}>Pessoas: {data.people}</Col>
+                <Col span={8}>Publicações: {data.publications}</Col>
+                <Col span={8}>{ following ? <><CheckCircleOutlined /> Seguindo</> : <Button type="link" onClick={onFollow}>Seguir</Button> }</Col>
+            </Row>
+        </div>
+    );
+};

website/src/pages/Community/index.less

@@ -0,0 +1,13 @@
+
+.community {
+    &__banner {
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: 50% 50%;
+        height: 300px;
+        h1 {
+            background-color: rgba(0, 0, 0, 0.75);
+            padding: 10px;
+        }
+    }
+}