trjhtr

I have created the following React Component and wanted to have feedback about if its SOLID or not, and what can I do to make it SOLID?
I do believe its SOLID but would like feedback from guys with more experience.

The code renders a list of Quotes from a Sharepoint List, it has a mock provider for mock data and a SP provider to get real data.

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 

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;