{"size": 1749, "ext": "js", "max_stars_repo_path": "CCO-LD Parsing Example/src/components/AuthNavBar/auth-nav-bar.container.js", "max_stars_repo_name": "avatar-use-cases/CCO-LD-Avatar", "max_stars_repo_stars_event_min_datetime": "2019-04-09T12:53:47.000Z", "max_stars_repo_stars_event_max_datetime": "2019-05-23T14:42:14.000Z", "max_issues_repo_path": "src/components/AuthNavBar/auth-nav-bar.container.js", "max_issues_repo_name": "carloss8/pixolid", "max_issues_repo_issues_event_min_datetime": "2019-10-29T13:41:22.000Z", "max_issues_repo_issues_event_max_datetime": "2021-01-26T12:19:37.000Z", "max_forks_repo_path": "CCO-LD Parsing Example/src/components/AuthNavBar/auth-nav-bar.container.js", "max_forks_repo_name": "avatar-use-cases/CCO-LD-Avatar", "max_forks_repo_forks_event_min_datetime": "2019-04-09T12:45:07.000Z", "max_forks_repo_forks_event_max_datetime": "2019-12-23T08:36:31.000Z"}
{"max_stars_count": 8, "max_issues_count": 2, "max_forks_count": 4, "avg_line_length": 29.6440677966, "max_line_length": 109, "alphanum_fraction": 0.6472269868}
import React, { Component } from "react";
import { withWebId } from "@inrupt/solid-react-components";
import AuthNavBar from "./auth-nav-bar.component";
import data from "@solid/query-ldflex";

// hasPhoto context
const hasPhotoContext = "http://www.w3.org/2006/vcard/ns#hasPhoto";
// img context 
const imgContext = "http://xmlns.com/foaf/0.1/img"

class AuthNavBarContainer extends Component {
  constructor(props) {
    super(props);
    this.state = { image: null };
  }

  getProfileData = async () => {
    try {
      // fetching user card from pod. This makes a request and returns the data
      const user = data[this.props.webId];
      /*
       * In the backgorund LDFlex is using JSON-LD. Because of this, we need to
       * make an async call. This will return a JSON-LD expanded object and expose the requested value(name).
       * for more information please go to: https://github.com/digitalbazaar/jsonld.js
       */
      const userName = await user.name;
      let userImage = await user[imgContext];
      userImage = userImage ? userImage : await user[hasPhotoContext];
      const name = userName ? userName.value : "";
      const image = userImage ? userImage.value : "/img/icon/empty-profile.svg";
      this.setState({
        name,
        image
      });
    } catch (error) {
      console.error(error);
    }
  };

  componentDidMount() {
    if (this.props.webId) {
      this.getProfileData();
    }
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.props.webId && this.props.webId !== prevProps.webId) {
      this.getProfileData();
    }
  }

  render() {
    const { image } = this.state;
    return <AuthNavBar img={image} {...this.props}/>;
  }
}

export default withWebId(AuthNavBarContainer);
