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:
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