profile

profile.tsx

import React from 'react';
import { useQuery } from '@apollo/react-hooks';
import { withRouter } from 'react-router-dom';
import gql from 'graphql-tag';

import { Container, Col, Row } from 'react-bootstrap';


import Post from '../components/post';

const GET_POSTS = gql`
  query posts($username: String!) {
    posts(username: $username) {
      posts {
        content
        date 
        message
        url
        created 
        type
      }
      creator {
        id
        first_name
        last_name
        username
        last_login
      }
    }
  }
`;

const ProfileContainer: any = (props: any) => {
    const profileUsername = props.match.params.username;

    const { loading, error, data } = useQuery(GET_POSTS, {
        variables: { username: profileUsername },
    });

    if(loading) {
        console.log('loading');
        return <p>Loading</p>
    }

    if(error) {
        console.log('error', error);
      return <p>Error</p>
    }

    if(data) {
        console.log('data', data);
    }

    const { posts, creator } = data.posts;
    return (
        <>
          <Container>

            <Row>
              <div className="col col-sm-12 p-0">
                <img className="w-100" src={`http://localhost:5001/cdn/${profileUsername}/banner.jpg`}/>
                <img style={{zIndex: 5, left: '1rem', top: '60px', height: '80px', width: '80px'}}
                       className="position-absolute rounded-circle float-left"
                       src={`http://localhost:5001/cdn/${profileUsername}/profile.jpg`}/>
              </div>
            </Row>

            <div className="row">
                <div className="col col-sm-12 mt-5 p-0">


                    <ul className="nav nav-tabs" id="myTab" role="tablist">
                        <li className="nav-item">
                            <a className="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
                               aria-controls="home" aria-selected="true">
                                Posts
                                <span className="badge badge-primary badge-pill">10</span>
                            </a>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
                               aria-controls="profile" aria-selected="false">
                                Photos
                                <span className="badge badge-primary badge-pill">7</span>
                            </a>
                        </li>
                        <li className="nav-item">
                            <a className="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab"
                               aria-controls="contact" aria-selected="false">
                                Videos
                                <span className="badge badge-primary badge-pill">2</span>
                            </a>
                        </li>
                    </ul>


                  <div className="tab-content" id="myTabContent">
                    <div className="tab-pane fade show active pb-5" id="home" role="tabpanel" aria-labelledby="home-tab">
                      {posts.map((p: any) => (<Post creator={creator} {...p} />))}
                    </div>


                      <div className="tab-pane fade pb-5" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <div className="row">
                          {posts.filter((p:any) => p.type === 'image' || p.type === 'gallery').map((post: any) => {
                            return post.url.map((image: any) => (
                                <div className="col p-0 min-25">
                                  <img data-toggle="modal" data-target="#exampleModalCenter" src={`http://localhost:5001${image}/thumb`}
                                       className="img-fluid"/>
                                </div>
                            ));
                          }) }
                        </div>
                      </div>



                      <div className="tab-pane fade pb-5" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                        <div className="row">
                          {posts.filter((p:any) => p.type === 'video').map((post: any) => (
                            <div className="col p-0 min-25">
                              <div className="d-relative">
                                <video controls className="tWeCl w-100" playsinline
                                       poster="https://picsum.photos/id/439/720/480" preload="none"
                                       src="{{this.url}}" loop />
                              </div>
                            </div>
                          ))}
                        </div>
                      </div>

                    </div>

                </div>
              </div>






          </Container>
        </>
    );
};




export default withRouter(ProfileContainer);