12 Authors

Authors

Components

Create AuthorIndex

code ./src/pages/Author/index.tsx

import { Author } from '../../interfaces/RecordEntities';
import { RecordIndex } from '../Record';
import { AuthorListItem } from './ListItem';
import { AuthorFormFields } from './FormFields';

export const AuthorIndex: React.FC = () => {
  const apiOptions = {};

  const emptyRecord = {
    name: '',
  };

  return (
    <RecordIndex<Author>
      ListItem={AuthorListItem}
      apiPath="authors"
      apiOptions={apiOptions}
      emptyRecord={emptyRecord}
      FormFields={AuthorFormFields}
    />
  );
};

Create AuthorListItem

code ./src/Pages/Author/ListItem.tsx

import { Author } from '../../interfaces/RecordEntities';
import { ListItemProps } from '../../interfaces/PagesProps';

type IProps = ListItemProps<Author>;

export const AuthorListItem: React.FC<IProps> = ({ record }) => {
  return <div className="title">{record.name}</div>;
};

Create AuthorFormFields

code ./src/Pages/Author/FormFields.tsx

import { Author } from '../../interfaces/RecordEntities';
import { FormFieldsProps } from '../../interfaces/PagesProps';

type IProps = FormFieldsProps<Author>;

export const AuthorFormFields: React.FC<IProps> = ({
  formState,
  handleChange,
}) => {
  return (
    <div>
      <div>
        <label>Title</label>
        <input
          type="text"
          name="name"
          value={formState.name}
          onChange={handleChange}
        />
      </div>
    </div>
  );
};

Add AuthorIndex to App

code ./src/App.tsx

...
import { AuthorIndex } from './pages/Author';

const App: React.FC = () => {
  ...

  const renderSwitch = () => {
    switch (page) {
      ...
      case Page.Authors:
        return <AuthorIndex />;
      ...
    }
  };

  ...
};

export default App;

Start React App

yarn start

Result

Commit

git add .
git commit -m "Authors"

Next step: Readme