tasks.js

// ********************************************************
// Mutations/resolvers/createTask.js

import Users from 'collections/Users/model';
import Tasks from 'collections/Tasks/model';

const createTask = async (root, args, context) => {
  let user = await Users.findOne({
    _id: args.params.userId,
  });

  let newTask = {
    fullName: `${user.firstName} ${user.lastName}`,
    vendorId: args.params.vendorId,
    comment: args.params.comment,
  };

  let doc = new Tasks(newTask);

  await doc.save();

  let newDoc = await Tasks.findOne({
    _id: doc._id,
  });

  return newDoc;
};

export default createTask;

// ********************************************************
// Mutation/index.js

  input TaskParams {
    comment: String
    vendorId: String
    userId: String
  }

  extend type Mutation {
    createTask(params: TaskParams): MutationResponse
  }
  
// ********************************************************
// createTask.js (client-side in ApolloClient folder)

import gql from 'graphql-tag';

export default gql`
  mutation createTask($params: TaskParams) {
    createTask(params: $params) {
      success
    }
  }
`;


// ********************************************************
// AddAComment.js

import React, {useState} from 'react';
import TextAreaInput from 'components/inputs/TextAreaInput';
import Button from 'components/common/Button';
import Row from 'components/common/Row';
import Col from 'components/common/Col';

export default ({defaultValue, loading, onSubmit}) => {
  const [value, setValue] = useState(defaultValue);
  return (
    <>
      <TextAreaInput
        value={value}
        onChange={(newValue) => setValue(newValue)}
        rows={4}
        cols={100}
        placeholder="Add a comment"
      />

      <Row style={{marginTop: 8}}>
        <Col offset={18}>
          <Button
            onClick={() => onSubmit(value)}
            style={{width: 100, marginTop: 32}}
            secondary
            disabled={loading}
          >
            {!loading ? 'Save' : '...'}
          </Button>
        </Col>
      </Row>
    </>
  );
};


// ********************************************************
// index.js (vendor doc page)

import React, {useState} from 'react';
import styled from 'styled-components';
// COMPONENTS
import Row from 'components/common/Row';
import Col from 'components/common/Col';
import Button from 'components/common/Button';
import AddAComment from './AddAComment';
import Icon from 'components/common/Icon';
// import {Button, Space, Upload, Popconfirm} from 'antd';
// import {UploadOutlined} from '@ant-design/icons';
// APOLLO
import {Query, useMutation} from 'react-apollo';
import CLIENTS_BY_VENDOR from 'ApolloClient/Queries/clientsByVendor';
import CREATE_TASK from 'ApolloClient/Mutations/createTask';

const AddADocument = styled.button`
  margin: 0px;
  font-size: 16px;
  cursor: pointer;
  color: ${(p) => p.theme.colors.neutral2};
  background-color: #ffffff;
  border: none;
  &:hover {
    color: ${(p) => p.theme.colors.neutral1};
  }
`;
const NameContainer = styled.div`
  width: 265px;
  height: 500px;
  max-width: 100%;
  border-radius: 10px;
  background-color: #ffffff;
  padding: 16px;
  padding-top: 32px;
  margin-bottom: 16px;
  overflow-y: scroll;
`;

const DocContainer = styled.div`
  width: 800px;
  height: 500px;
  max-width: 100%;
  border-radius: 10px;
  background-color: #ffffff;
  padding: 16px;
  padding-top: 32px;
  margin-bottom: 16px;
`;

const TaskContainer = styled.div`
  width: 800px;
  height: 300px;
  max-width: 100%;
  border-radius: 10px;
  background-color: #ffffff;
  padding: 16px;
  padding-top: 32px;
  margin-bottom: 16px;
`;

const Name = styled.h2`
  margin: 0px;
  font-size: 16px;
  cursor: pointer;
  color: ${(p) => p.theme.colors.neutral2};
  &:hover {
    color: ${(p) => p.theme.colors.neutral1};
  }
`;

const DocTitle = styled.h2`
  margin: 0px;
  font-size: 16px;
  color: ${(p) => p.theme.colors.neutral2};
`;

const Address = styled.h3`
  margin: 0px;
  font-size: 14px;
  color: ${(p) => p.theme.colors.neutral5};
`;

const Address2 = styled.h3`
  margin: 0px;
  font-size: 10px;
  color: ${(p) => p.theme.colors.neutral5};
`;

const NameItemContainer = styled.div`
  border-bottom: 1px solid ${(p) => p.theme.colors.neutral9};
  padding: 8px;
`;
const GreyLine = styled.div`
  background: ${(p) => p.theme.colors.neutral9};
  height: 1px;
  margin-top: 5px;
  margin-bottom: 16px;
`;

const SearchInput = styled.input`
  width: 100%;
  margin-bottom: 16px;
  border-radius: 25px;
  padding-left: 8px;
  &:focus {
    outline: 0;
  }
`;

const Comments = styled.input`
  width: 100%;
  width: 700px;
  height: 100px;
  margin-bottom: 16px;
  border-radius: 25px;
  padding-left: 8px;
  &:focus {
    outline: 0;
  }
`;

const NameItem = ({user, onClick}) => {
  return (
    <NameItemContainer key={user.id}>
      <Name onClick={onClick}>
        {user.firstName} {user.lastName}
      </Name>
      <Address>{user.homeForSale && user.homeForSale.fullAddress}</Address>
    </NameItemContainer>
  );
};

export default ({vendor}) => {
  const [selectedClient, setSelectedClient] = useState(null);
  const [searchText, setSearchText] = useState(undefined);
  const [savingTask, setSavingTask] = useState(false);
  const [skip] = useState(0);
  const [createTask] = useMutation(CREATE_TASK);

  let variables = {vendorId: vendor.id, searchText, skip};

  const onCompleted = (data) => {
    setSelectedClient(data.clientsByVendor.users[0]);
  };

  return (
    <>
      <Row
        gutter={16}
        style={{width: 1200, margin: 'auto', maxWidth: '100%', marginTop: 32}}
      >
        <Col xs={6}>
          <NameContainer>
            <SearchInput
              placeholder="Search by name"
              value={searchText}
              onChange={(e) => setSearchText(e.target.value)}
            />
            <Query
              query={CLIENTS_BY_VENDOR}
              variables={variables}
              onCompleted={onCompleted}
            >
              {({data, error, loading, networkStatus, fetchMore}) => {
                if (error) return 'error';
                if (loading) return 'query is loading...';
                if (
                  data.clientsByVendor &&
                  data.clientsByVendor.users &&
                  data.clientsByVendor.users.length === 0
                ) {
                  return 'No users';
                }
                return (
                  <>
                    Showing {data.clientsByVendor.users.length} result of{' '}
                    {data.clientsByVendor.count} results
                    {data.clientsByVendor.users.map((user) => (
                      <NameItem
                        key={user.id}
                        user={user}
                        onClick={() => setSelectedClient(user)}
                      />
                    ))}
                    {data.clientsByVendor.count >
                      data.clientsByVendor.users.length && (
                      <Button
                        style={{width: 100, marginTop: 32}}
                        secondary
                        onClick={() => {
                          fetchMore({
                            query: CLIENTS_BY_VENDOR,
                            variables: {
                              ...variables,
                              skip: data.clientsByVendor.users.length,
                            },
                            updateQuery: (prev, {fetchMoreResult}) => {
                              return {
                                ...prev,
                                clientsByVendor: {
                                  ...prev.clientsByVendor,
                                  users: [
                                    ...prev.clientsByVendor.users,
                                    ...fetchMoreResult.clientsByVendor.users,
                                  ],
                                },
                              };
                            },
                          });
                        }}
                      >
                        Load More
                      </Button>
                    )}
                  </>
                );
              }}
            </Query>
          </NameContainer>
        </Col>
        <Col xs={18}>
          {!selectedClient && 'Select your a client'}
          {selectedClient && selectedClient.firstName}
        </Col>
      </Row>
      <Row style={{marginTop: -520}}>
        <Col offset={3}>
          <DocContainer>
            <Row style={{marginTop: -5}}>
              <Col xs={23}>
                <DocTitle>Requested Documents:</DocTitle>
              </Col>
            </Row>
            <Row style={{marginTop: -25}}>
              <Col xs={5} offset={15}>
                <DocTitle>
                  Seller: {selectedClient && selectedClient.firstName}{' '}
                  {selectedClient && selectedClient.lastName}
                </DocTitle>
                <Address2>
                  {selectedClient && selectedClient.homeForSale.fullAddress}
                </Address2>
              </Col>
            </Row>
            <GreyLine></GreyLine>
            <Row style={{marginTop: -15}}>
              <Col xs={23}>
                <DocTitle>Loan Application:</DocTitle>
              </Col>
            </Row>
            <GreyLine></GreyLine>
            <Row style={{marginTop: -2}}>
              <Col>
                <AddAComment
                  defaultValue=""
                  loading={savingTask}
                  onSubmit={async (comment) => {
                    setSavingTask(true);
                    let res = await createTask({
                      variables: {
                        params: {
                          comment,
                          userId: selectedClient.id,
                          vendorId: vendor.id,
                        },
                      },
                    });
                    setSavingTask(false);
                    console.log(res);
                  }}
                />
              </Col>
            </Row>

            <AddADocument>
              Add a Comment
              <Icon type="plus-circle" />
            </AddADocument>

            <GreyLine></GreyLine>
            <Row>
              <Col></Col>
            </Row>
          </DocContainer>
        </Col>
      </Row>
      <Row>
        <Col offset={3}>
          <TaskContainer>
            <Row style={{marginTop: -5}}>
              <Col xs={23}>
                <DocTitle>
                  Documents From: {selectedClient && selectedClient.firstName}{' '}
                  {selectedClient && selectedClient.lastName}
                </DocTitle>
              </Col>
            </Row>
            <GreyLine></GreyLine>
          </TaskContainer>
        </Col>
      </Row>
    </>
  );
};