Medium-draft / Blog Module / Comment Module / Likes Module

modules/authentication/server-ts/access/jwt/resolvers.js

@@ -7,15 +7,7 @@ import createTokens from './createTokens';
 
 export default () => ({
   Mutation: {
-    async refreshTokens(
-      obj,
-      { refreshToken: inputRefreshToken },
-      {
-        getIdentity,
-        getHash,
-        req: { t }
-      }
-    ) {
+    async refreshTokens(obj, { refreshToken: inputRefreshToken }, { getIdentity, getHash, req: { t } }) {
       const decodedToken = jwt.decode(inputRefreshToken);
       const isValidToken = decodedToken && decodedToken.id;
 

modules/blog/client-react/__tests__/Blog.test.ts

@@ -0,0 +1,19 @@
+import { expect } from 'chai';
+
+import { updateContent, Renderer } from '@gqlapp/testing-client-react';
+
+describe('Blog UI works', () => {
+  const renderer = new Renderer({});
+  const app = renderer.mount();
+  renderer.history.push('/Blog');
+  const content = updateContent(app.container);
+
+  it('Blog page renders on mount', () => {
+    // tslint:disable:no-unused-expression
+    expect(content).to.not.be.empty;
+  });
+
+  it('Blog page has title', async () => {
+    expect(content.textContent).to.include('Hello, This is the Blog module');
+  });
+});

modules/blog/client-react/components/AdminBlogsComponent.jsx

@@ -0,0 +1,156 @@
+/* eslint-disable react/display-name */
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { Table, Loading } from '@gqlapp/look-client-react';
+import { Popconfirm, Button, message, Tooltip, Spin, Divider } from 'antd';
+import InfiniteScroll from 'react-infinite-scroll-component';
+
+class AdminBlogsComponent extends React.Component {
+  fetchMoreData = async () => {
+    let hasMore = this.props.blogs.pageInfo.hasNextPage;
+    const endCursor = this.props.blogs.pageInfo.endCursor;
+    if (!hasMore) return;
+    await this.props.loadData(endCursor + 1, 'add');
+  };
+
+  render() {
+    const { blogs, deleteBlog, blogLoading } = this.props;
+
+    const cancel = () => {
+      message.error('Task cancelled');
+    };
+
+    const columns = [
+      {
+        title: <a href="#">{'Id'}</a>,
+        dataIndex: 'id',
+        key: 'id',
+        sorter: (a, b) => a.id - b.id,
+        sortDirections: ['descend', 'ascend']
+      },
+      {
+        title: <a href="#">{'Title'}</a>,
+        dataIndex: 'title',
+        key: 'title',
+        sorter: (a, b) => a.title.length - b.title.length,
+        sortDirections: ['descend', 'ascend']
+      },
+      {
+        title: <a href="#">{'Author'}</a>,
+        dataIndex: 'author',
+        key: 'author',
+        sorter: (a, b) => a.author.username.length - b.author.username.length,
+        sortDirections: ['descend', 'ascend'],
+        render: text =>
+          // <Tooltip title="See Profile">
+          //   <Link to={`/blog/@${text.username}`}>
+          //     {
+          // text.id === currentUser.id ? "You" :
+          text.username
+        //     }
+        //   </Link>
+        // </Tooltip>
+      },
+      {
+        title: <a href="#">{'Model'}</a>,
+        dataIndex: 'model',
+        key: 'model',
+        sorter: (a, b) => a.model.name.length - b.model.name.length,
+        sortDirections: ['descend', 'ascend'],
+        render: text => <span>{text.name}</span>
+      },
+      {
+        title: 'Actions',
+        dataIndex: 'id',
+        key: 'actions',
+        render: text => (
+          <>
+            <Tooltip title="Read">
+              {' '}
+              <Link to={`/blog/${text}`}>
+                <Button
+                  shape="circle"
+                  icon="eye"
+                  type="primary"
+                  size="small"
+                  style={{ marginBottom: '10px', marginRight: '3px' }}
+                />
+              </Link>
+            </Tooltip>
+            <Tooltip title="Edit">
+              <Link to={`/blog/edit/${text}`}>
+                <Button
+                  shape="circle"
+                  icon="edit"
+                  type="primary"
+                  size="small"
+                  style={{ marginBottom: '10px', marginRight: '3px' }}
+                  ghost
+                />
+              </Link>
+            </Tooltip>
+            <Tooltip title="Delete">
+              <Popconfirm
+                title="Delete blog?"
+                onConfirm={() => deleteBlog(text)}
+                onCancel={cancel}
+                okText="Yes"
+                cancelText="No"
+              >
+                <Button
+                  shape="circle"
+                  icon="delete"
+                  type="danger"
+                  size="small"
+                  style={{ marginBottom: '10px', marginRight: '3px' }}
+                />
+              </Popconfirm>
+            </Tooltip>
+          </>
+        )
+      }
+    ];
+
+    return (
+      <>
+        {blogLoading && !blogs ? (
+          <Loading text="Loading... " />
+        ) : (
+          <Fragment>
+            <InfiniteScroll
+              scrollThreshold={0.9}
+              style={{ overflow: 'none' }}
+              dataLength={blogs.edges.length}
+              next={this.fetchMoreData}
+              hasMore={blogs.pageInfo.hasNextPage}
+              loader={
+                <div align="center">
+                  <Spin />
+                </div>
+              }
+              endMessage={
+                <Divider>
+                  <p style={{ textAlign: 'center', marginTop: '25px' }}>
+                    <b>End of Blogs</b>
+                  </p>
+                </Divider>
+              }
+            >
+              <Table dataSource={blogs.edges.map(({ node }) => node)} columns={columns} />
+            </InfiniteScroll>
+          </Fragment>
+        )}
+      </>
+    );
+  }
+}
+
+AdminBlogsComponent.propTypes = {
+  blogLoading: PropTypes.bool.isRequired,
+  blogs: PropTypes.object,
+  loadData: PropTypes.object,
+  deleteBlog: PropTypes.func
+};
+
+export default AdminBlogsComponent;

modules/blog/client-react/components/AdminBlogsView.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import Helmet from 'react-helmet';
+import PropTypes from 'prop-types';
+import { PageLayout, Loading, Button } from '@gqlapp/look-client-react';
+import settings from '@gqlapp/config';
+import { Link } from 'react-router-dom';
+// import { message } from 'antd';
+import AdminBlogsComponent from './AdminBlogsComponent';
+import BlogsFilterComponent from './BlogsFilterComponent';
+
+const renderMetaData = t => (
+  <Helmet
+    title={`${settings.app.name} - ${t('title')}`}
+    meta={[{ name: 'description', content: `${settings.app.name} - ${t('meta')}` }]}
+  />
+);
+
+class AdminBlogsView extends React.Component {
+  state = { flag: false };
+  componentDidMount() {
+    this.setState({ flag: true });
+  }
+  render() {
+    return (
+      <PageLayout>
+        {renderMetaData(this.props.t)}
+        {this.props.models && this.props.filter && (
+          <>
+            <Link to="/blog/new">
+              <Button color="primary">{'Add New Blog'}</Button>
+            </Link>
+            <br />
+            <hr />
+            <BlogsFilterComponent {...this.props} />
+            <hr />
+          </>
+        )}
+        {this.state.flag && !this.props.blogLoading ? <AdminBlogsComponent {...this.props} /> : <Loading />}
+      </PageLayout>
+    );
+  }
+}
+AdminBlogsView.propTypes = {
+  t: PropTypes.func,
+  blogLoading: PropTypes.bool,
+  filter: PropTypes.object,
+  models: PropTypes.array
+};
+
+export default AdminBlogsView;

modules/blog/client-react/components/AdminModelsListComponent.jsx

@@ -0,0 +1,128 @@
+/* eslint-disable react/display-name */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Table, Loading } from '@gqlapp/look-client-react';
+import { Popconfirm, Button, message } from 'antd';
+
+import ModelsFormComponent from './ModelsFormComponent';
+
+const ModelsComponent = ({
+  // orderBy,
+  // onOrderBy,
+  loading,
+  models,
+  // currentUser,
+  addModel,
+  deleteModel,
+  updateModel
+}) => {
+  const cancel = () => {
+    message.error('Task cancelled');
+  };
+
+  // const renderOrderByArrow = name => {
+  //   if (orderBy && orderBy.column === name) {
+  //     if (orderBy.order === "desc") {
+  //       return <span className="badge badge-primary">&#8595;</span>;
+  //     } else {
+  //       return <span className="badge badge-primary">&#8593;</span>;
+  //     }
+  //   } else {
+  //     return <span className="badge badge-secondary">&#8645;</span>;
+  //   }
+  // };
+
+  // const handleOrderBy = (e, name) => {
+  //   e.preventDefault();
+  //   let order = "asc";
+  //   if (orderBy && orderBy.column === name) {
+  //     if (orderBy.order === "asc") {
+  //       order = "desc";
+  //     } else if (orderBy.order === "desc") {
+  //       return onOrderBy({
+  //         column: "",
+  //         order: ""
+  //       });
+  //     }
+  //   }
+  //   return onOrderBy({ column: name, order });
+  // };
+
+  const handleDelete = id => {
+    return deleteModel(id);
+  };
+
+  const columns = [
+    {
+      title: (
+        <a /*onClick={e => handleOrderBy(e, 'name')}*/ href="#">
+          {'Name'} {/*renderOrderByArrow('name')*/}
+        </a>
+      ),
+      dataIndex: 'name',
+      key: 'name',
+      sorter: (a, b) => a.name.length - b.name.length,
+      sortDirections: ['descend', 'ascend']
+    },
+    {
+      title: (
+        <a /*onClick={e => handleOrderBy(e, ' gearCategory')}*/ href="#">
+          {'Description'} {/*renderOrderByArrow(' gearCategory')*/}
+        </a>
+      ),
+      dataIndex: 'desc',
+      key: 'desc',
+      sorter: (a, b) => a.desc.length - b.desc.length,
+      sortDirections: ['descend', 'ascend']
+    },
+    {
+      title: 'Delete',
+      key: 'actions',
+      dataIndex: 'id',
+      render: (text, record) => (
+        <>
+          <Popconfirm
+            title="Cancel Request?"
+            onConfirm={() => handleDelete(text)}
+            onCancel={cancel}
+            okText="Yes"
+            cancelText="No"
+          >
+            <Button shape="circle" icon="delete" type="danger" size="small" />
+          </Popconfirm>
+          <ModelsFormComponent model={record} title={'Edit the Model'} onSubmit={updateModel} />
+        </>
+      )
+    }
+  ];
+
+  return (
+    <>
+      {loading && !models ? (
+        <Loading text="Loading... " />
+      ) : (
+        <>
+          <Table
+            dataSource={models}
+            columns={columns}
+            title={() => <ModelsFormComponent title={'Add a Model'} onSubmit={addModel} />}
+          />
+        </>
+      )}
+    </>
+  );
+};
+
+ModelsComponent.propTypes = {
+  loading: PropTypes.bool.isRequired,
+  models: PropTypes.array,
+  // orderBy: PropTypes.object,
+  // onOrderBy: PropTypes.func.isRequired,
+  currentUser: PropTypes.object,
+  addModel: PropTypes.func,
+  updateModel: PropTypes.func,
+  deleteModel: PropTypes.func
+};
+
+export default ModelsComponent;