mercredi 23 mai 2018

ReactJS Component that retrieves quotes, make it SOLID

I have created the following React Component and wanted to have feedback about if its SOLID or not, and what can I do to fix it.

What the code does: 1. It renders a list of Quotes from a Sharepoint List.

My structure:

enter image description here

And my code as follows:

Solid.tsx

import * as React from 'react';
import styles from './Solid.module.scss';
import { ISolidProps } from './ISolidProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { IQuotes, IQuote } from './QuoteContracts';
import { IDataReader, DataReaderFactory } from './DataReader';
import { ISolidState } from './ISolidState';


export default class Solid extends React.Component<ISolidProps, ISolidState> {

  constructor() {
    super();
    this._dataReader = DataReaderFactory.getReader(this.context);
  }

  private _dataReader : IDataReader;

  public render(): React.ReactElement<ISolidProps> {
    return (
      <div className={ styles.solid }>
        <div className={ styles.container }>
          <div className={ styles.row }>
            <div className={ styles.column }>
              <span className={ styles.title }>Welcome to SharePoint!</span>
              <p className={ styles.subTitle }>Customize SharePoint experiences using Web Parts.</p>
              <p className={ styles.description }>{escape(this.props.description)}</p>
              <a href="https://aka.ms/spfx" className={ styles.button }>
                <span className={ styles.label }>Learn more</span>
              </a>
              {this.renderQuotes()}
            </div>
          </div>
        </div>
      </div>

    );
  }

  fetchData = () => {
    this._dataReader.getData().then((response) => {
      this.setState({
        quotes: response.Quotes,
      });
    });
   }

  componentDidMount() {
      this.fetchData();
  }

   renderQuotes = () => this.state.quotes.map(quote => ( 
      <div>${escape(quote.Quote)}</div>
      <div class="${styles.author}">${escape(quote.Author)}</div>  
  );

}

Datareader.ts

import {
    Version,
    Environment,
    EnvironmentType
} from '@microsoft/sp-core-library';
import { IWebPartContext } from '@microsoft/sp-webpart-base';

import { IQuotes } from './QuoteContracts';
import { SPDataReader } from './SPDataReader';
import { MockDataReader } from './MockDataReader';

export interface IDataReader {
    getData(): Promise<IQuotes>;
}

export class DataReaderFactory {
    public static getReader(context: IWebPartContext) {
        if (Environment.type === EnvironmentType.SharePoint || Environment.type === EnvironmentType.ClassicSharePoint) {
            return new SPDataReader(context, "Quotes");
        }
        else if (Environment.type === EnvironmentType.Local) {
            return new MockDataReader();
        }
    }
}

ISolidProps.ts

export interface ISolidProps {
  description: string;
}

ISolidState.ts

import { IQuote, IQuotes } from "./QuoteContracts";

export interface ISolidState {
    quotes: IQuote[];
}

Mockdata.ts

import { IQuote } from './QuoteContracts';

export default class MockData {

    private static _items: IQuote[] = [
        { Author: 'Author 1', Quote: 'Quote 1' },
        { Author: 'Author 2', Quote: 'Quote 2' },
        { Author: 'Author 3', Quote: 'Quote 3' }];

    public static get(): Promise<IQuote[]> {
        return new Promise<IQuote[]>((resolve) => {
           resolve(MockData._items);
       });
   }
}

MockDatareader.ts

import { SPDataReader } from './SPDataReader';
import { IQuotes, IQuote } from './QuoteContracts';

export class MockDataReader extends SPDataReader {
    constructor() {
        super(null, null);
    }

    getData(): Promise<IQuotes> {
        return this.get().then((data: IQuote[]) => {
            var listData: IQuotes = { Quotes: data };
            return listData;
        }) as Promise<IQuotes>;
    }

    private static _items: IQuote[] = [
        { Author: 'Author 1', Quote: 'Quote 1' },
        { Author: 'Author 2', Quote: 'Quote 2' },
        { Author: 'Author 3', Quote: 'Quote 3' }];

    private get(): Promise<IQuote[]> {
        return new Promise<IQuote[]>((resolve) => {
            resolve(MockDataReader._items);
        });
    }
}

QuoteContracts.ts

export interface IQuotes {
    Quotes: IQuote[];
}

export interface IQuote {
    Author: string;
    Quote: string;
}

Aucun commentaire:

Enregistrer un commentaire