Design Challenge 001: Building a Flexible…

refactor01.js

const TemplateSelector = ({ templates }) => {
  return (
    <div>
      <SearchBar />
      <Category />
      <TemplateList templates={templates} />
    </div>
  );
};

const NewProjectHeader = () => {
  const { user } = useCurrentUser();
  return (
    <div>
      <h1>Welcome, {user.name}</h1>
      <p>Choose the request ...</p>
    </div>
  );
};

const CreatingNewRequestTypeHeader = () => {
  return (
    <div>
      <h1>Select a request type</h1>
      <p>Select a template ...</p>
    </div>
  );
};

const headerComponents = {
  creating_new_project: NewProjectHeader,
  creating_new_request_type: CreatingNewRequestTypeHeader({ user }),
};

const RequestTypeBuilder = ({ renderedIn }) => {
  const { templates } = useTemplates(); // fetch templates from remote

  const getHeader = () => {
    const headerComponent = headerComponents[renderedIn];
    return headerComponent ? headerComponent() : null;
  };

  return (
    <div>
      {getHeader()}
      <TemplateSelector templates={templates} />
    </div>
  );
};

refactor02.js

const Header = ({ title, description }) => {
  return (
    <div>
      <h1>{ title }</h1>
      <p> { description }</p>
    </div>
  );
};

const NewProjectHeader = () => {
  const { user } = useCurrentUser();
  return Header({
    title: `Welcome, ${user.name}`,
    description: 'Choose the request ...' 
  });
};