使用 TypeScript 编写 React.js 应用 | 笔记

🦄  node --version
v18.14.0

🦄  yarn --version
3.6.0

yarn create react-app keeptrack --template typescript

cd keeptrack

code .

yarn start

function App() {
return (
    <div className="App">
    <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
        Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
        className="App-link"
        href="https://reactjs.org"
        target="_blank"
        rel="noopener noreferrer"
        >
-        Learn React
+        Learn React!!!
        </a>
    </header>
    </div>
);
}

yarn add sass

yarn add mini.css@3.0.1

import React from 'react';
- import logo from './logo.svg';
import './App.css';

function App() {
  return (
-     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React!!
-        </a>
-      </header>
-    </div>

+    <blockquote cite="Benjamin Franklin">
+      Tell me and I forget, teach me and I may remember, involve me and I learn.
+    </blockquote>
  );
}

export default App;

/* 导入安装的包中 CSS */
@import '../node_modules/mini.css/dist/mini-default.min.css';

import React from 'react';

function ProjectsPage() {
  return <h1>Projects</h1>;
}

export default ProjectsPage;

- import React from 'react';
- import './App.css';
+ import ProjectsPage from './projects/ProjectsPage';

function App() {
-   return (
-      <blockquote cite="Benjamin Franklin">
-         Tell me and I forget, teach me and I may remember, involve me and I learn.
-      </blockquote>
-   );
+   return (
+   <div className="container">
+      <ProjectsPage />
+   </div>
+   );
}

export class Project {
  id: number | undefined;
  name: string = '';
  description: string = '';
  imageUrl: string = '';
  contractTypeId: number | undefined;
  contractSignedOn: Date = new Date();
  budget: number = 0;
  isActive: boolean = false;
  get isNew(): boolean {
    return this.id === undefined;
  }

  constructor(initializer?: any) {
    if (!initializer) return;
    if (initializer.id) this.id = initializer.id;
    if (initializer.name) this.name = initializer.name;
    if (initializer.description) this.description = initializer.description;
    if (initializer.imageUrl) this.imageUrl = initializer.imageUrl;
    if (initializer.contractTypeId)
      this.contractTypeId = initializer.contractTypeId;
    if (initializer.contractSignedOn)
      this.contractSignedOn = new Date(initializer.contractSignedOn);
    if (initializer.budget) this.budget = initializer.budget;
    if (initializer.isActive) this.isActive = initializer.isActive;
  }
}

import { Project } from './Project';

export const MOCK_PROJECTS = [
  new Project({
    id: 1,
    name: 'Johnson - Kutch',
    description:
      'Fully-configurable intermediate framework. Ullam occaecati libero laudantium nihil voluptas omnis.',
    imageUrl: '/assets/placeimg_500_300_arch4.jpg',
    contractTypeId: 3,
    contractSignedOn: '2013-08-04T22:39:41.473Z',
    budget: 54637,
    isActive: false,
  }),
  new Project({
    id: 2,
    name: 'Wisozk Group',
    description:
      'Centralized interactive application. Exercitationem nulla ut ipsam vero quasi enim quos doloribus voluptatibus.',
    imageUrl: '/assets/placeimg_500_300_arch1.jpg',
    contractTypeId: 4,
    contractSignedOn: '2012-08-06T21:21:31.419Z',
    budget: 91638,
    isActive: true,
  }),
  new Project({
    id: 3,
    name: 'Denesik LLC',
    description:
      'Re-contextualized dynamic moratorium. Aut nulla soluta numquam qui dolor architecto et facere dolores.',
    imageUrl: '/assets/placeimg_500_300_arch12.jpg',
    contractTypeId: 6,
    contractSignedOn: '2016-06-26T18:24:01.706Z',
    budget: 29729,
    isActive: true,
  }),
  new Project({
    id: 4,
    name: 'Purdy, Keeling and Smitham',
    description:
      'Innovative 6th generation model. Perferendis libero qui iusto et ullam cum sint molestias vel.',
    imageUrl: '/assets/placeimg_500_300_arch5.jpg',
    contractTypeId: 4,
    contractSignedOn: '2013-05-26T01:10:42.344Z',
    budget: 45660,
    isActive: true,
  }),
  new Project({
    id: 5,
    name: 'Kreiger - Waelchi',
    description:
      'Managed logistical migration. Qui quod praesentium accusamus eos hic non error modi et.',
    imageUrl: '/assets/placeimg_500_300_arch12.jpg',
    contractTypeId: 2,
    contractSignedOn: '2009-12-18T21:46:47.944Z',
    budget: 81188,
    isActive: true,
  }),
  new Project({
    id: 6,
    name: 'Lesch - Waelchi',
    description:
      'Profound mobile project. Rem consequatur laborum explicabo sint odit et illo voluptas expedita.',
    imageUrl: '/assets/placeimg_500_300_arch1.jpg',
    contractTypeId: 3,
    contractSignedOn: '2016-09-23T21:27:25.035Z',
    budget: 53407,
    isActive: false,
  }),
];

+ import { MOCK_PROJECTS } from './MockProjects';

function ProjectsPage() {
- return  <h1>Projects</h1>
+  return (
+   <>
+     <h1>Projects</h1>
+    <pre>{JSON.stringify(MOCK_PROJECTS, null, ' ')}</pre>
+   </>
+  );
}

export default ProjectsPage;

import React from 'react';
import { Project } from './Project';

interface ProjectListProps {
  projects: Project[];
}

function ProjectList({ projects }: ProjectListProps) {
  return <pre>{JSON.stringify(projects, null, ' ')}</pre>;
}

export default ProjectList;

import React from 'react';
import { MOCK_PROJECTS } from './MockProjects';
+ import ProjectList from './ProjectList';

function ProjectsPage() {
  return (
    <>
      <h1>Projects</h1>
-     <pre>{JSON.stringify(MOCK_PROJECTS, null, ' ')}</pre>
+     <ProjectList projects={MOCK_PROJECTS} />
    </>
  );
}

export default ProjectsPage;

...

function ProjectList({ projects }: ProjectListProps) {
-  return <pre>{JSON.stringify(projects, null, ' ')}</pre>;
+  return (
+    <ul className="row">
+      {projects.map((project) => (
+        <li key={project.id}>{project.name}</li>
+      ))}
+    </ul>
+  );
}

export default ProjectList;

...

function ProjectList({ projects }: ProjectListProps) {
-  return (
-    <ul className="row">
-      {projects.map((project) => (
-        <li key={project.id}>{project.name}</li>
-      ))}
-    </ul>
-  );
}

export default ProjectList;

...
function ProjectList({ projects }: ProjectListProps) {
+  return (
+    <div className="row">
+      {projects.map((project) => (
+        <div key={project.id} className="cols-sm">
+          <div className="card">
+            <img src={project.imageUrl} alt={project.name} />
+            <section className="section dark">
+              <h5 className="strong">
+                <strong>{project.name}</strong>
+              </h5>
+              <p>{project.description}</p>
+              <p>Budget : {project.budget.toLocaleString()}</p>
+            </section>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
}

export default ProjectList;

import { Project } from './Project';
import React from 'react';

function formatDescription(description: string): string {
  return description.substring(0, 60) + '...';
}

interface ProjectCardProps {
  project: Project;
}

function ProjectCard(props: ProjectCardProps) {
  const { project } = props;
  return (
    <div className="card">
      <img src={project.imageUrl} alt={project.name} />
      <section className="section dark">
        <h5 className="strong">
          <strong>{project.name}</strong>
        </h5>
        <p>{formatDescription(project.description)}</p>
        <p>Budget : {project.budget.toLocaleString()}</p>
      </section>
    </div>
  );
}

export default ProjectCard;

import React from 'react';
import { Project } from './Project';
+ import ProjectCard from './ProjectCard';

interface ProjectListProps {
  projects: Project[];
}

function ProjectList ({ projects }: ProjectListProps) {
    const items = projects.map(project => (
      <div key={project.id} className="cols-sm">
-      <div className="card">
-      <img src={project.imageUrl} alt={project.name} />
-       <section className="section dark">
-         <h5 className="strong">
-           <strong>{project.name}</strong>
-         </h5>
-         <p>{project.description}</p>
-        <p>Budget : {project.budget.toLocaleString()}</p>
-       </section>
-     </div>
+      <ProjectCard project={project}></ProjectCard>
      </div>
    ));
    return <div className="row">{items}</div>;

}

export default ProjectList;

...
<p>Budget...</p>
<button className=" bordered">
  <span className="icon-edit "></span>
  Edit
</button>

function ProjectCard(props: ProjectCardProps) {
  const { project } = props;
+  const handleEditClick = (projectBeingEdited: Project) => {
+    console.log(projectBeingEdited);
+  };
  return (
    <div className="card">
      <img src={project.imageUrl} alt={project.name} />
      <section className="section dark">
        <h5 className="strong">
          <strong>{project.name}</strong>
        </h5>
        <p>{project.description}</p>
        <p>Budget : {project.budget.toLocaleString()}</p>
        <button className=" bordered">
          <span className="icon-edit "></span>
          Edit
        </button>
      </section>
    </div>
  );
}

function ProjectCard(props: ProjectCardProps) {
  const { project } = props;
  const handleEditClick = (projectBeingEdited: Project) => {
    console.log(projectBeingEdited);
  };
  return (
    <div className="card">
      <img src={project.imageUrl} alt={project.name} />
      <section className="section dark">
        <h5 className="strong">
          <strong>{project.name}</strong>
        </h5>
        <p>{project.description}</p>
        <p>Budget : {project.budget.toLocaleString()}</p>
        <button
          className=" bordered"
+          onClick={() => {
+            handleEditClick(project);
+          }}
        >
          <span className="icon-edit "></span>
          Edit
        </button>
      </section>
    </div>
  );
}

form {
  min-width: 300px;
}

import React from "react";

function ProjectForm() {
  return (
    <form className="input-group vertical">
      <label htmlFor="name">Project Name</label>
      <input type="text" name="name" placeholder="enter name" />
      <label htmlFor="description">Project Description</label>
      <textarea name="description" placeholder="enter description" />
      <label htmlFor="budget">Project Budget</label>
      <input type="number" name="budget" placeholder="enter budget" />
      <label htmlFor="isActive">Active?</label>
      <input type="checkbox" name="isActive" />
      <div className="input-group">
        <button className="primary bordered medium">Save</button>
        <span />
        <button type="button" className="bordered medium">
          cancel
        </button>
      </div>
    </form>
  );
}

export default ProjectForm;

...
+ import ProjectForm from './ProjectForm';
...
function ProjectList ({ projects }: ProjectListProps) {
    const items = projects.map(project => (
      <div key={project.id} className="cols-sm">
        <ProjectCard project={project}></ProjectCard>
+       <ProjectForm />
      </div>
    ));
    return <div className="row">{items}</div>;
}
...

...
interface ProjectCardProps {
  project: Project;
+  onEdit: (project: Project) => void;
}
...

 function ProjectCard(props: ProjectCardProps) {
   const { project,
+         onEdit
    } = props;

   const handleEditClick = (projectBeingEdited: Project) => {
+    onEdit(projectBeingEdited);
-    console.log(projectBeingEdited);
   };

   ...
 }

 function ProjectList ({ projects }: ProjectListProps) {
+   const handleEdit = (project: Project) => {
+     console.log(project);
+   };

     const items = projects.map(project => (
       <div key={project.id} className="cols-sm">
         <ProjectCard
           project={project}
+          onEdit={handleEdit}
         ></ProjectCard>
         <ProjectForm></ProjectForm>
       </div>
     ));
     return <div className="row">{items}</div>;
 }

- import React from 'react';
+ import React, { useState } from 'react';
import { Project } from './Project';
import ProjectCard from './ProjectCard';
import ProjectForm from './ProjectForm';

interface ProjectListProps {
  projects: Project[];
}

function ProjectList({ projects }: ProjectListProps) {
+ const [projectBeingEdited, setProjectBeingEdited] = useState({});

  const handleEdit = (project: Project) => {
-    console.log(project);
+    setProjectBeingEdited(project);
  };

  return (
    ...
  );
}

export default ProjectList;

...

function ProjectList({ projects }: ProjectListProps) {
  const [projectBeingEdited, setProjectBeingEdited] = useState({});
  const handleEdit = (project: Project) => {
    setProjectBeingEdited(project);
  };

  return (
    <div className="row">
      {projects.map((project) => (
        <div key={project.id} className="cols-sm">
-          <ProjectCard project={project} onEdit={handleEdit} />
-          <ProjectForm />
+          {project === projectBeingEdited ? (
+            <ProjectForm />
+          ) : (
+            <ProjectCard project={project} onEdit={handleEdit} />
+          )}
        </div>
      ))}
    </div>
  );
}

export default ProjectList;

import React from 'react';

+ interface ProjectFormProps {
+   onCancel: () => void;
+ }

- function ProjectForm() {
+ function ProjectForm({ onCancel }: ProjectFormProps) {
  return (
    <form className="input-group vertical">
      <label htmlFor="name">Project Name</label>
      <input type="text" name="name" placeholder="enter name" />
      <label htmlFor="description">Project Description</label>
      <textarea name="description" placeholder="enter description" />
      <label htmlFor="budget">Project Budget</label>
      <input type="number" name="budget" placeholder="enter budget" />
      <label htmlFor="isActive">Active?</label>
      <input type="checkbox" name="isActive" />
      <div className="input-group">
        <button className="primary bordered medium">Save</button>
        <span />
        <button type="button" className="bordered medium"
+        onClick={onCancel}
        >
          cancel
        </button>
      </div>
    </form>
  );
}

export default ProjectForm;

...
function ProjectList({ projects }: ProjectListProps) {
  const [projectBeingEdited, setProjectBeingEdited] = useState({});

  const handleEdit = (project: Project) => {
    setProjectBeingEdited(project);
  };

+  const cancelEditing = () => {
+    setProjectBeingEdited({});
+  };

  return (
    <div className="row">
      {projects.map((project) => (
        <div key={project.id} className="cols-sm">
          {project === projectBeingEdited ? (
            <ProjectForm
+              onCancel={cancelEditing}
            />
          ) : (
            <ProjectCard project={project} onEdit={handleEdit} />
          )}
        </div>
      ))}
    </div>
  );
}

export default ProjectList;

...
+ import { Project } from './Project';

interface ProjectFormProps {
+  onSave: (project: Project) => void;
  onCancel: () => void;
}
...

+ import React, { SyntheticEvent } from 'react';
...

- function ProjectForm({ onCancel }: ProjectFormProps) {
+ function ProjectForm({ onSave, onCancel }: ProjectFormProps) {

+  const handleSubmit = (event: SyntheticEvent) => {
+    event.preventDefault();
+    onSave(new Project({ name: 'Updated Project' }));
+  };

return (

   <form className="input-group vertical"
+    onSubmit={handleSubmit}
   >
      <label htmlFor="name">Project Name</label>
      <input type="text" name="name" placeholder="enter name" />
      <label htmlFor="description">Project Description</label>
      <textarea name="description" placeholder="enter description" />
      <label htmlFor="budget">Project Budget</label>
      <input type="number" name="budget" placeholder="enter budget" />
      <label htmlFor="isActive">Active?</label>
      <input type="checkbox" name="isActive" />
      <div className="input-group">
      <button className="primary bordered medium">Save</button>
      <span />
      <button type="button" className="bordered medium" onClick={onCancel}>
         cancel
      </button>
      </div>
   </form>
);
}

export default ProjectForm;

interface ProjectListProps {
  projects: Project[];
+ onSave: (project: Project) => void;
}

interface ProjectListProps {
projects: Project[];
onSave: (project: Project) => void;
}

- function ProjectList({ projects }: ProjectListProps) {
+ function ProjectList({ projects, onSave }: ProjectListProps) {
const [projectBeingEdited, setProjectBeingEdited] = useState({});

const handleEdit = (project: Project) => {
   setProjectBeingEdited(project);
};

const cancelEditing = () => {
   setProjectBeingEdited({});
};

return (
   <div className="row">
      {projects.map((project) => (
      <div key={project.id} className="cols-sm">
         {project === projectBeingEdited ? (
            <ProjectForm
+            onSave={onSave}
            onCancel={cancelEditing} />
         ) : (
            <ProjectCard project={project} onEdit={handleEdit} />
         )}
      </div>
      ))}
   </div>
);
}

export default ProjectList;

import React, { Fragment } from 'react';
import { MOCK_PROJECTS } from './MockProjects';
import ProjectList from './ProjectList';
+ import { Project } from './Project';

function ProjectsPage() {
+  const saveProject = (project: Project) => {
+    console.log('Saving project: ', project);
+  };

  return (
     <Fragment>
        <h1>Projects</h1>
        <ProjectList
+         onSave={saveProject}
          projects={MOCK_PROJECTS} />
     </Fragment>
  );
}

export default ProjectsPage;

interface ProjectFormProps {
+ project: Project;
  onSave: (project: Project) => void;
  onCancel: () => void;
}

- import React, { SyntheticEvent } from 'react';
+ import React, { SyntheticEvent, useState } from 'react';

function ProjectForm({
+ project: initialProject,
  onSave,
  onCancel,
}: ProjectFormProps) {
+  const [project, setProject] = useState(initialProject);

const handleSubmit = (event: SyntheticEvent) => {
   event.preventDefault();
   onSave(new Project({ name: 'Updated Project' }));
};

...
}

...
function ProjectForm({
  project: initialProject,
  onSave,
  onCancel,
}: ProjectFormProps) {
  const [project, setProject] = useState(initialProject);
  const handleSubmit = (event: SyntheticEvent) => {
    event.preventDefault();
    onSave(new Project({ name: 'Updated Project' }));
  };

+  const handleChange = (event: any) => {
+    const { type, name, value, checked } = event.target;
+    // if input type is checkbox use checked
+    // otherwise it's type is text, number etc. so use value
+    let updatedValue = type === 'checkbox' ? checked : value;
+
+    //if input type is number convert the updatedValue string to a +number
+    if (type === 'number') {
+      updatedValue = Number(updatedValue);
+    }
+    const change = {
+      [name]: updatedValue,
+    };
+
+    let updatedProject: Project;
+    // need to do functional update b/c
+    // the new project state is based on the previous project state
+    // so we can keep the project properties that aren't being edited +like project.id
+    // the spread operator (...) is used to
+    // spread the previous project properties and the new change
+    setProject((p) => {
+      updatedProject = new Project({ ...p, ...change });
+      return updatedProject;
+    });
+  };

  return (
    <form className="input-group vertical" onSubmit={handleSubmit}>
      <label htmlFor="name">Project Name</label>
      <input
        type="text"
        name="name"
        placeholder="enter name"
+       value={project.name}
+       onChange={handleChange}
      />
      <label htmlFor="description">Project Description</label>
      <textarea
        name="description"
        placeholder="enter description"
+       value={project.description}
+       onChange={handleChange}
      />
      <label htmlFor="budget">Project Budget</label>
      <input
        type="number"
        name="budget"
        placeholder="enter budget"
+       value={project.budget}
+       onChange={handleChange}
      />
      <label htmlFor="isActive">Active?</label>
      <input
        type="checkbox"
        name="isActive"
+       checked={project.isActive}
+       onChange={handleChange}
      />
      <div className="input-group">
        <button className="primary bordered medium">Save</button>
        <span />
        <button type="button" className="bordered medium" onClick={onCancel}>
          cancel
        </button>
      </div>
    </form>
  );
}

export default ProjectForm;

...
function ProjectForm({
  project: initialProject,
  onSave,
  onCancel,
}: ProjectFormProps) {
  const [project, setProject] = useState(initialProject);

  const handleSubmit = (event: SyntheticEvent) => {
    event.preventDefault();
-   onSave(new Project({ name: 'Updated Project' }));
+   onSave(project);
  };
  ...
}

export default ProjectForm;

...
function ProjectList({ projects, onSave }: ProjectListProps) {
const [projectBeingEdited, setProjectBeingEdited] = useState({});

const handleEdit = (project: Project) => {
   setProjectBeingEdited(project);
};

const cancelEditing = () => {
   setProjectBeingEdited({});
};

return (
   <div className="row">
      {projects.map((project) => (
      <div key={project.id} className="cols-sm">
         {project === projectBeingEdited ? (
            <ProjectForm
+              project={project}
            onSave={onSave}
            onCancel={cancelEditing}
            />
         ) : (
            <ProjectCard project={project} onEdit={handleEdit} />
         )}
      </div>
      ))}
   </div>
);
}

export default ProjectList;

import React, { Fragment,
+ useState } from 'react';
import { MOCK_PROJECTS } from './MockProjects';
import ProjectList from './ProjectList';
+ import { Project } from './Project';

function ProjectsPage() {
+  const [projects, setProjects] = useState<Project[]>(MOCK_PROJECTS);

const saveProject = (project: Project) => {
-   console.log('Saving project: ', project);
+    let updatedProjects = projects.map((p: Project) => {
+      return p.id === project.id ? project : p;
+    });
+    setProjects(updatedProjects);
};

return (
   <Fragment>
      <h1>Projects</h1>
-      <ProjectList onSave={saveProject} projects={MOCK_PROJECTS} />
+      <ProjectList onSave={saveProject} projects={projects} />
   </Fragment>
);
}

export default ProjectsPage;

...

function ProjectForm({
  project: initialProject,
  onSave,
  onCancel,
}: ProjectFormProps) {
  const [project, setProject] = useState(initialProject);
+ const [errors, setErrors] = useState({
+   name: '',
+   description: '',
+   budget: '',
+ });

...

}
export default ProjectForm;

...
function ProjectForm({
  project: initialProject,
  onSave,
  onCancel,
}: ProjectFormProps) {
  const [project, setProject] = useState(initialProject);
  const [errors, setErrors] = useState({
    name: '',
    description: '',
    budget: '',
  });

  const handleChange = (event: any) => {
    ...
  };

+  function validate(project: Project) {
+    let errors: any = { name: '', description: '', budget: '' };
+    if (project.name.length === 0) {
+      errors.name = 'Name is required';
+    }
+    if (project.name.length > 0 && project.name.length < 3) {
+      errors.name = 'Name needs to be at least 3 characters.';
+    }
+    if (project.description.length === 0) {
+      errors.description = 'Description is required.';
+    }
+    if (project.budget === 0) {
+      errors.budget = 'Budget must be more than $0.';
+    }
+    return errors;
+  }

+  function isValid() {
+    return (
+      errors.name.length === 0 &&
+      errors.description.length === 0 &&
+      errors.budget.length === 0
+    );
+  }

  return (
    ...
  );
}

export default ProjectForm;

...
function ProjectForm({
  project: initialProject,
  onSave,
  onCancel,
}: ProjectFormProps) {
...

const handleChange = (event: any) => {
  const { type, name, value, checked } = event.target;
  // if input type is checkbox use checked
  // otherwise it's type is text, number etc. so use value
  let updatedValue = type === 'checkbox' ? checked : value;

  //if input type is number convert the updatedValue string to a number
  if (type === 'number') {
    updatedValue = Number(updatedValue);
  }
  const change = {
    [name]: updatedValue,
  };

  let updatedProject: Project;
  // need to do functional update b/c
  // the new project state is based on the previous project state
  // so we can keep the project properties that aren't being edited like project.id
  // the spread operator (...) is used to
  // spread the previous project properties and the new change
  setProject((p) => {
    updatedProject = new Project({ ...p, ...change });
    return updatedProject;
  });
+ setErrors(() => validate(updatedProject));
};

return (
  ...
);
}

export default ProjectForm;

...
function ProjectForm({
  project: initialProject,
  onSave,
  onCancel,
}: ProjectFormProps) {
...

  const handleSubmit = (event: SyntheticEvent) => {
    event.preventDefault();
+    if (!isValid()) return;
    onSave(project);
  };

...

  return (
    ...
  );
}

export default ProjectForm;

...
function ProjectForm({
  project: initialProject,
  onSave,
  onCancel,
}: ProjectFormProps) {
  const [project, setProject] = useState(initialProject);
  const [errors, setErrors] = useState({
    name: '',
    description: '',
    budget: '',
  });
  ...

  return (
    <form className="input-group vertical" onSubmit={handleSubmit}>
      <label htmlFor="name">Project Name</label>
      <input
        type="text"
        name="name"
        placeholder="enter name"
        value={project.name}
        onChange={handleChange}
      />
+      {errors.name.length > 0 && (
+        <div className="card error">
+          <p>{errors.name}</p>
+        </div>
+      )}

      <label htmlFor="description">Project Description</label>
      <textarea
        name="description"
        placeholder="enter description"
        value={project.description}
        onChange={handleChange}
      />
+      {errors.description.length > 0 && (
+        <div className="card error">
+          <p>{errors.description}</p>
+        </div>
+      )}

      <label htmlFor="budget">Project Budget</label>
      <input
        type="number"
        name="budget"
        placeholder="enter budget"
        value={project.budget}
        onChange={handleChange}
      />
+      {errors.budget.length > 0 && (
+        <div className="card error">
+          <p>{errors.budget}</p>
+        </div>
+      )}

      <label htmlFor="isActive">Active?</label>
      <input
        type="checkbox"
        name="isActive"
        checked={project.isActive}
        onChange={handleChange}
      />
      <div className="input-group">
        <button className="primary bordered medium">Save</button>
        <span />
        <button type="button" className="bordered medium" onClick={onCancel}>
          cancel
        </button>
      </div>
    </form>
  );
}

export default ProjectForm;

yarn add json-server@0.16.2

{
 "name": "keeptrack",
 ...
 "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
+    "api": "json-server api/db.json --port 4000"
 },
}

yarn api

npm run api

import { Project } from './Project';
const baseUrl = 'http://localhost:4000';
const url = `${baseUrl}/projects`;

function translateStatusToErrorMessage(status: number) {
  switch (status) {
    case 401:
      return 'Please login again.';
    case 403:
      return 'You do not have permission to view the project(s).';
    default:
      return 'There was an error retrieving the project(s). Please try again.';
  }
}

function checkStatus(response: any) {
  if (response.ok) {
    return response;
  } else {
    const httpErrorInfo = {
      status: response.status,
      statusText: response.statusText,
      url: response.url,
    };
    console.log(`log server http error: ${JSON.stringify(httpErrorInfo)}`);

    let errorMessage = translateStatusToErrorMessage(httpErrorInfo.status);
    throw new Error(errorMessage);
  }
}

function parseJSON(response: Response) {
  return response.json();
}

// eslint-disable-next-line
function delay(ms: number) {
  return function (x: any): Promise<any> {
    return new Promise((resolve) => setTimeout(() => resolve(x), ms));
  };
}

function convertToProjectModels(data: any[]): Project[] {
  let projects: Project[] = data.map(convertToProjectModel);
  return projects;
}

function convertToProjectModel(item: any): Project {
  return new Project(item);
}

const projectAPI = {
  get(page = 1, limit = 20) {
    return fetch(`${url}?_page=${page}&_limit=${limit}&_sort=name`)
      .then(delay(600))
      .then(checkStatus)
      .then(parseJSON)
      .then(convertToProjectModels)
      .catch((error: TypeError) => {
        console.log('log client error ' + error);
        throw new Error(
          'There was an error retrieving the projects. Please try again.'
        );
      });
  },
};

export { projectAPI };

...
 function ProjectsPage() {
   const [projects, setProjects] = useState<Project[]>(MOCK_PROJECTS);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | undefined>(undefined);
...
}

- import { MOCK_PROJECTS } from './MockProjects';
...
 function ProjectsPage() {
-  const [projects, setProjects] = useState<Project[]>(MOCK_PROJECTS);
+  const [projects, setProjects] = useState<Project[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | undefined>(undefined);
...
}

import React, { Fragment, useState,
+ useEffect } from 'react';
+ import { projectAPI } from './projectAPI';

function ProjectsPage() {
  const [projects, setProjects] = useState<Project[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | undefined>(undefined);

//#region 方法1: 使用 promise then
//  useEffect(() => {
//    setLoading(true);
//    projectAPI
//      .get(1)
//      .then((data) => {
//        setError('');
//        setLoading(false);
//        setProjects(data);
//      })
//      .catch((e) => {
//        setLoading(false);
//        setError(e.message);
//        if (e instanceof Error) {
//           setError(e.message);
//        }
//      });
//  }, []);
//#endregion

+  //#region 方法2: 使用 async/await
+  useEffect(() => {
+    async function loadProjects() {
+      setLoading(true);
+      try {
+        const data = await projectAPI.get(1);
+        setError('');
+        setProjects(data);
+      }
+       catch (e) {
+        if (e instanceof Error) {
+          setError(e.message);
+        }
+        } finally {
+        setLoading(false);
+      }
+    }
+    loadProjects();
+  }, []);
+  //#endregion

...
}

function ProjectsPage() {
  const [projects, setProjects] = useState<Project[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | undefined>(undefined);

  ...

  return (
    <Fragment>
      <h1>Projects</h1>

      <ProjectList onSave={saveProject} projects={projects} />

+      {loading && (
+        <div className="center-page">
+          <span className="spinner primary"></span>
+          <p>Loading...</p>
+        </div>
+      )}
    </Fragment>
  );
}

export default ProjectsPage;

... //add below existing styles

html,
body,
#root,
.container,
.center-page {
  height: 100%;
}

.center-page {
  display: flex;
  justify-content: center;
  align-items: center;
}

function ProjectsPage() {
  const [projects, setProjects] = useState<Project[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | undefined>(undefined);

  ...

  return (
  <>
      <h1>Projects</h1>

+      {error && (
+        <div className="row">
+          <div className="card large error">
+            <section>
+              <p>
+                <span className="icon-alert inverse "></span>
+                {error}
+              </p>
+            </section>
+          </div>
+        </div>
+      )}

      <ProjectList onSave={saveProject} projects={projects} />

      {loading && (
        <div className="center-page">
          <span className="spinner primary"></span>
          <p>Loading...</p>
        </div>
      )}
    </>
  );
}

export default ProjectsPage;

return fetch(`${url}?_page=${page}&_limit=${limit}&_sort=name`)
- .then(delay(600))
  .then(checkStatus)
  .then(parseJSON);

const baseUrl = 'http://localhost:4000';
- const url = `${baseUrl}/projects`;
+ const url = `${baseUrl}/fail`;
...

...
const baseUrl = 'http://localhost:4000';
+ const url = `${baseUrl}/projects`;
- const url = `${baseUrl}/fail`;
...

...
function ProjectsPage() {
  const [projects, setProjects] = useState<Project[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | undefined>(undefined);
+ const [currentPage, setCurrentPage] = useState(1);
  ...
}

...
function ProjectsPage() {
  const [projects, setProjects] = useState<Project[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | undefined>(undefined);
  const [currentPage, setCurrentPage] = useState(1);

  useEffect(() => {
    async function loadProjects() {
      setLoading(true);
      try {
-        const data = await projectAPI.get(1);
+        const data = await projectAPI.get(currentPage);
-        setProjects(data);
+      if (currentPage === 1) {
+          setProjects(data);
+        } else {
+          setProjects((projects) => [...projects, ...data]);
+        }
      } catch (e) {
        if (e instanceof Error) {
          setError(e.message);
        }
      } finally {
        setLoading(false);
      }
    }
    loadProjects();
-  }, []);
+  }, [currentPage]);
...
}

...
function ProjectsPage() {
  ...
  const [currentPage, setCurrentPage] = useState(1);
  ...

+  const handleMoreClick = () => {
+    setCurrentPage((currentPage) => currentPage + 1);
+  };
  ...
}

...
function ProjectsPage() {
...

  return (
    <Fragment>
      <h1>Projects</h1>
      {error && (
        <div className="row">
          <div className="card large error">
            <section>
              <p>
                <span className="icon-alert inverse "></span>
                {error}
              </p>
            </section>
          </div>
        </div>
      )}
      <ProjectList onSave={saveProject} projects={projects} />

+      {!loading && !error && (
+        <div className="row">
+          <div className="col-sm-12">
+            <div className="button-group fluid">
+              <button className="button default" onClick={handleMoreClick}>
+                More...
+              </button>
+            </div>
+          </div>
+        </div>
+      )}

      {loading && (
        <div className="center-page">
          <span className="spinner primary"></span>
          <p>Loading...</p>
        </div>
      )}
    </Fragment>
  );
}

export default ProjectsPage;

const projectAPI = {
...

+  put(project: Project) {
+    return fetch(`${url}/${project.id}`, {
+      method: 'PUT',
+      body: JSON.stringify(project),
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    })
+      .then(checkStatus)
+      .then(parseJSON)
+      .catch((error: TypeError) => {
+        console.log('log client error ' + error);
+        throw new Error(
+          'There was an error updating the project. Please try again.'
+        );
+      });
+  },

};

import { Project } from './Project';
...
function ProjectsPage() {
  ...

  const saveProject = (project: Project) => {
-    let updatedProjects = projects.map((p: Project) => {
-      return p.id === project.id ? project : p;
-    });
-    setProjects(updatedProjects);

+   projectAPI
+     .put(project)
+     .then((updatedProject) => {
+       let updatedProjects = projects.map((p: Project) => {
+         return p.id === project.id ? new Project(updatedProject) : p;
+       });
+       setProjects(updatedProjects);
+     })
+     .catch((e) => {
+        if (e instanceof Error) {
+         setError(e.message);
+        }
+     });
  };

  return (
    ...
  );
}

export default ProjectsPage;

import React from 'react';

function HomePage() {
  return <h2>Home</h2>;
}

export default HomePage;

yarn add react-router-dom@6.3

npm install react-router-dom@6.3

import React from 'react';
import './App.css';
import ProjectsPage from './projects/ProjectsPage';

+ import { BrowserRouter as Router, Routes, Route, NavLink} from 'react-router-dom';
+ import HomePage from './home/HomePage';

  function App() {
-  return (
-    <div className="container">
-      <ProjectsPage />
-    </div>
- );

+  return (
+    <Router>
+      <div className="container">
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/projects" element={<ProjectsPage />} />
+        </Routes>
+      </div>
+    </Router>
+  );
};

export default App;

header {
  height: 5.1875rem;
}

a.button.active {
  border: 1px solid var(--fore-color);
}

...

function App() {
  return (
    <Router>
+      <header className="sticky">
+        <span className="logo">
+          <img src="/assets/logo-3.svg" alt="logo" width="49" height="99" />
+        </span>
+        <NavLink to="/"  className="button rounded">
+          <span className="icon-home"></span>
+          Home
+        </NavLink>
+        <NavLink to="/projects" className="button rounded">
+          Projects
+        </NavLink>
+      </header>
       <div className="container">
         ...
       </div>
    </Router>
  );
};
...

const projectAPI = {
...

+  find(id: number) {
+    return fetch(`${url}/${id}`)
+      .then(checkStatus)
+      .then(parseJSON)
+      .then(convertToProjectModel);
+  },
+
...
};

import React from 'react';
import { Project } from './Project';

interface ProjectDetailProps {
  project: Project;
}
export default function ProjectDetail({ project }: ProjectDetailProps) {
  return (
    <div className="row">
      <div className="col-sm-6">
        <div className="card large">
          <img
            className="rounded"
            src={project.imageUrl}
            alt={project.name}
          />
          <section className="section dark">
            <h3 className="strong">
              <strong>{project.name}</strong>
            </h3>
            <p>{project.description}</p>
            <p>Budget : {project.budget}</p>

            <p>Signed: {project.contractSignedOn.toLocaleDateString()}</p>
            <p>
              <mark className="active">
                {' '}
                {project.isActive ? 'active' : 'inactive'}
              </mark>
            </p>
          </section>
        </div>
      </div>
    </div>
  );
}

import React, { useEffect, useState } from 'react';
import { projectAPI } from './projectAPI';
import ProjectDetail from './ProjectDetail';
import { Project } from './Project';
import { useParams } from 'react-router-dom';

function ProjectPage(props: any) {
  const [loading, setLoading] = useState(false);
  const [project, setProject] = useState<Project | null>(null);
  const [error, setError] = useState<string | null>(null);
  const params = useParams();
  const id = Number(params.id);

  useEffect(() => {
    setLoading(true);
    projectAPI
      .find(id)
      .then((data) => {
        setProject(data);
        setLoading(false);
      })
      .catch((e) => {
        setError(e);
        setLoading(false);
      });
  }, [id]);

  return (
    <div>
      <>
        <h1>Project Detail</h1>

        {loading && (
          <div className="center-page">
            <span className="spinner primary"></span>
            <p>Loading...</p>
          </div>
        )}

        {error && (
          <div className="row">
            <div className="card large error">
              <section>
                <p>
                  <span className="icon-alert inverse "></span> {error}
                </p>
              </section>
            </div>
          </div>
        )}

        {project && <ProjectDetail project={project} />}
      </>
    </div>
  );
}

export default ProjectPage;

import ProjectsPage from './projects/ProjectsPage';
+ import ProjectPage from './projects/ProjectPage';

function App() {
  return (
    <Router>
      <header className="sticky">
        <span className="logo">
          <img src="/assets/logo-3.svg" alt="logo" width="49" height="99" />
        </span>
        <NavLink to="/"  className="button rounded">
          <span className="icon-home"></span>
          Home
        </NavLink>
        <NavLink to="/projects/" className="button rounded">
          Projects
        </NavLink>
      </header>
      <div className="container">
        <Routes>
          <Route path="/"  element={<HomePage />} />
          <Route path="/projects"  element={<ProjectsPage /> } />
+         <Route path="/projects/:id" element={<ProjectPage />} />
        </Routes>
      </div>
    </Router>
  );
}

+ import { Link } from 'react-router-dom';
...
  <section className="section dark">
+  <Link to={'/projects/' + project.id}>
    <h5 className="strong">
    <strong>{project.name}</strong>
    </h5>
    <p>{formatDescription(project.description)}</p>
    <p>Budget : {project.budget.toLocaleString()}</p>
+  </Link>
  <button
    type="button"
    className=" bordered"
    onClick={() => {
    handleEditClick(project);
    }}
   >
    <span className="icon-edit "></span>
    Edit
  </button>
  </section>
...

# yarn 全局安装 serve
yarn global add serve

# npm 全局安装 serve
npm install -g serve

yarn build

serve build

serve -s build

yarn add redux react-redux redux-devtools-extension redux-thunk
yarn add --dev @types/react-redux

# npm
npm install redux react-redux redux-devtools-extension redux-thunk
npm install --save-dev @types/react-redux

import { createStore, applyMiddleware } from "redux";
import ReduxThunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
import { combineReducers } from "redux";

const reducer = combineReducers({});

export default function configureStore(preloadedState: any) {
  const middlewares = [ReduxThunk];
  const middlewareEnhancer = applyMiddleware(...middlewares);

  //Thunk is middleware
  //DevTools is an enhancer (actually changes Redux)
  //applyMiddleware wraps middleware and returns an enhancer

  // to use only thunk middleware
  // const enhancer = compose(middlewareEnhancer);

  //to use thunk & devTools
  const enhancer = composeWithDevTools(middlewareEnhancer);

  const store = createStore(reducer, preloadedState, enhancer);
  return store;
}

export interface AppState {}

export const initialAppState: AppState = {};

export const store = configureStore(initialAppState);

import { Project } from '../Project';

//action types
export const LOAD_PROJECTS_REQUEST = 'LOAD_PROJECTS_REQUEST';
export const LOAD_PROJECTS_SUCCESS = 'LOAD_PROJECTS_SUCCESS';
export const LOAD_PROJECTS_FAILURE = 'LOAD_PROJECTS_FAILURE';
export const SAVE_PROJECT_REQUEST = 'SAVE_PROJECT_REQUEST';
export const SAVE_PROJECT_SUCCESS = 'SAVE_PROJECT_SUCCESS';
export const SAVE_PROJECT_FAILURE = 'SAVE_PROJECT_FAILURE';
export const DELETE_PROJECT_REQUEST = 'DELETE_PROJECT_REQUEST';
export const DELETE_PROJECT_SUCCESS = 'DELETE_PROJECT_SUCCESS';
export const DELETE_PROJECT_FAILURE = 'DELETE_PROJECT_FAILURE';

interface LoadProjectsRequest {
  type: typeof LOAD_PROJECTS_REQUEST;
}

interface LoadProjectsSuccess {
  type: typeof LOAD_PROJECTS_SUCCESS;
  payload: { projects: Project[]; page: number };
}

interface LoadProjectsFailure {
  type: typeof LOAD_PROJECTS_FAILURE;
  payload: { message: string };
}

interface SaveProjectRequest {
  type: typeof SAVE_PROJECT_REQUEST;
}

interface SaveProjectSuccess {
  type: typeof SAVE_PROJECT_SUCCESS;
  payload: Project;
}

interface SaveProjectFailure {
  type: typeof SAVE_PROJECT_FAILURE;
  payload: { message: string };
}

interface DeleteProjectRequest {
  type: typeof DELETE_PROJECT_REQUEST;
}

interface DeleteProjectSuccess {
  type: typeof DELETE_PROJECT_SUCCESS;
  payload: Project;
}

interface DeleteProjectFailure {
  type: typeof DELETE_PROJECT_FAILURE;
  payload: { message: string };
}

export type ProjectActionTypes =
  | LoadProjectsRequest
  | LoadProjectsSuccess
  | LoadProjectsFailure
  | SaveProjectRequest
  | SaveProjectSuccess
  | SaveProjectFailure
  | DeleteProjectRequest
  | DeleteProjectSuccess
  | DeleteProjectFailure;

export interface ProjectState {
  loading: boolean;
  projects: Project[];
  error: string | undefined;
  page: number;
}

import { Action } from 'redux';
import { ThunkAction } from 'redux-thunk';
import { projectAPI } from '../projectAPI';
import { Project } from '../Project';
import {
  LOAD_PROJECTS_REQUEST,
  LOAD_PROJECTS_SUCCESS,
  LOAD_PROJECTS_FAILURE,
  SAVE_PROJECT_REQUEST,
  SAVE_PROJECT_SUCCESS,
  SAVE_PROJECT_FAILURE,
  ProjectState,
} from './projectTypes';

//action creators
export function loadProjects(
  page: number
): ThunkAction<void, ProjectState, null, Action<string>> {
  return (dispatch: any) => {
    dispatch({ type: LOAD_PROJECTS_REQUEST });
    return projectAPI
      .get(page)
      .then((data) => {
        dispatch({
          type: LOAD_PROJECTS_SUCCESS,
          payload: { projects: data, page },
        });
      })
      .catch((error) => {
        dispatch({ type: LOAD_PROJECTS_FAILURE, payload: error });
      });
  };
}

export function saveProject(
  project: Project
): ThunkAction<void, ProjectState, null, Action<string>> {
  return (dispatch: any) => {
    dispatch({ type: SAVE_PROJECT_REQUEST });
    return projectAPI
      .put(project)
      .then((data) => {
        dispatch({ type: SAVE_PROJECT_SUCCESS, payload: data });
      })
      .catch((error) => {
        dispatch({ type: SAVE_PROJECT_FAILURE, payload: error });
      });
  };
}

import {
  ProjectActionTypes,
  LOAD_PROJECTS_REQUEST,
  LOAD_PROJECTS_SUCCESS,
  LOAD_PROJECTS_FAILURE,
  DELETE_PROJECT_REQUEST,
  DELETE_PROJECT_SUCCESS,
  DELETE_PROJECT_FAILURE,
  SAVE_PROJECT_REQUEST,
  SAVE_PROJECT_SUCCESS,
  SAVE_PROJECT_FAILURE,
  ProjectState,
} from './projectTypes';
import { Project } from '../Project';

export const initialProjectState: ProjectState = {
  projects: [],
  loading: false,
  error: undefined,
  page: 1,
};

export function projectReducer(
  state = initialProjectState,
  action: ProjectActionTypes
) {
  switch (action.type) {
    case LOAD_PROJECTS_REQUEST:
      return { ...state, loading: true, error: '' };
    case LOAD_PROJECTS_SUCCESS:
      let projects: Project[];
      const { page } = action.payload;
      if (page === 1) {
        projects = action.payload.projects;
      } else {
        projects = [...state.projects, ...action.payload.projects];
      }
      return {
        ...state,
        loading: false,
        page,
        projects,
        error: '',
      };
    case LOAD_PROJECTS_FAILURE:
      return { ...state, loading: false, error: action.payload.message };
    case SAVE_PROJECT_REQUEST:
      return { ...state };
    case SAVE_PROJECT_SUCCESS:
      if (action.payload.isNew) {
        return {
          ...state,
          projects: [...state.projects, action.payload],
        };
      } else {
        return {
          ...state,
          projects: state.projects.map((project: Project) => {
            return project.id === action.payload.id
              ? Object.assign({}, project, action.payload)
              : project;
          }),
        };
      }

    case SAVE_PROJECT_FAILURE:
      return { ...state, error: action.payload.message };
    case DELETE_PROJECT_REQUEST:
      return { ...state };
    case DELETE_PROJECT_SUCCESS:
      return {
        ...state,
        projects: state.projects.filter(
          (project: Project) => project.id !== action.payload.id
        ),
      };
    case DELETE_PROJECT_FAILURE:
      return { ...state, error: action.payload.message };
    default:
      return state;
  }
}

import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import { combineReducers } from 'redux';

+ import { ProjectState } from './projects/state/projectTypes';
+ import { initialProjectState } from './projects/state/projectReducer';
+ import { projectReducer } from './projects/state/projectReducer';

const reducer = combineReducers({
+  projectState: projectReducer
});

...

export interface AppState {
+  projectState: ProjectState;
}

export const initialAppState: AppState = {
+  projectState: initialProjectState
};

export const store = configureStore(initialAppState);

- import React, { useState, useEffect } from 'react';
+ import React, { useEffect } from 'react';
import ProjectList from './ProjectList';
import { Project } from './Project';
+ import { useSelector, useDispatch } from 'react-redux';
+ import { AppState } from '../state';

function ProjectsPage() {
-  const [projects, setProjects] = useState<Project[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | undefined>(undefined);
-  const [currentPage, setCurrentPage] = useState(1);

+  const loading = useSelector(
+    (appState: AppState) => appState.projectState.loading
+  );
+  const projects = useSelector(
+    (appState: AppState) => appState.projectState.projects
+  );
+  const error = useSelector(
+    (appState: AppState) => appState.projectState.error
+  );
+  const currentPage = useSelector(
+    (appState: AppState) => appState.projectState.page
+  );
+  const dispatch = useDispatch<ThunkDispatch<ProjectState, any, AnyAction>>();

...
}

...
- import { Project } from './Project';
- import { projectAPI } from './projectAPI';

+ import { loadProjects } from './state/projectActions';
+ import { AnyAction } from 'redux';
+ import { ThunkDispatch } from 'redux-thunk';
+ import { ProjectState } from './state/projectTypes';

function ProjectsPage() {
  ...
+  const dispatch = useDispatch<ThunkDispatch<ProjectState, any, AnyAction>>();

-  useEffect(() => {
-    setLoading(true);
-    projectAPI
-      .get(currentPage)
-      .then((data) => {
-        setLoading(false);
-        if (currentPage === 1) {
-          setProjects(data);
-        } else {
-          setProjects((projects) => [...projects, ...data]);
-        }
-      })
-      .catch((e) => {
-        setLoading(false);
-         if (e instanceof Error) {
-             setError(e.message);
-        }
-      });
-  }, [currentPage]);

+  useEffect(() => {
+    dispatch(loadProjects(1));
+  }, [dispatch]);

  const handleMoreClick = () => {
-    setCurrentPage((currentPage) => currentPage + 1);
+    dispatch(loadProjects(currentPage + 1));
  };

-  const saveProject = (project: Project) => {
-    projectAPI
-      .put(project)
-      .then((updatedProject) => {
-        let updatedProjects = projects.map((p: Project) => {
-          return p.id === project.id ? project : p;
-        });
-        setProjects(updatedProjects);
-      })
-      .catch((e) => {
-         if (e instanceof Error) {
-             setError(e.message);
-        }
-      });
-  };

  return (
    <Fragment>
      ...
-      <ProjectList onSave={saveProject} projects={projects} />
+      <ProjectList projects={projects} />
      ...
    </Fragment>
  );
}
...

import ProjectPage from './projects/ProjectPage';
+ import { Provider } from 'react-redux';
+ import { store } from './state';

function App() {
  return (
+    <Provider store={store}>
      <Router>
        <header className="sticky">
          <span className="logo">
            <img src="/assets/logo-3.svg" alt="logo" width="49" height="99" />
          </span>
          <NavLink to="/" className="button rounded">
            <span className="icon-home"></span>
            Home
          </NavLink>
          <NavLink to="/projects/" className="button rounded">
            Projects
          </NavLink>
        </header>
        <div className="container">
          <Routes>
            <Route path="/"  component={HomePage} />
            <Route path="/projects" component={ProjectsPage} />
            <Route path="/projects/:id" component={ProjectPage} />
          </Routes>
        </div>
      </Router>
+   </Provider>
  );
};

export default App;

import React, { SyntheticEvent, useState } from 'react';
import { Project } from './Project';
+ import { useDispatch } from 'react-redux';
+ import { saveProject } from './state/projectActions';
+ import { ThunkDispatch } from 'redux-thunk';
+ import { ProjectState } from './state/projectTypes';
+ import { AnyAction } from 'redux';

interface ProjectFormProps {
  project: Project;
- onSave: (project: Project) => void;
  onCancel: () => void;
}

function ProjectForm({
  project: initialProject,
- onSave,
  onCancel,
}: ProjectFormProps) {
  const [project, setProject] = useState(initialProject);
  const [errors, setErrors] = useState({
    name: '',
    description: '',
    budget: '',
  });

+  const dispatch = useDispatch<ThunkDispatch<ProjectState, any, AnyAction>>();

  const handleSubmit = (event: SyntheticEvent) => {
    event.preventDefault();
    if (!isValid()) return;
-    onSave(project);
+    dispatch(saveProject(project));
  };

  const handleChange = (event: any) => {
    ...
  };

  function validate(project: Project) {
  ...
  }

  function isValid() {
    ...
  }

  return (
    <form className="input-group vertical" onSubmit={handleSubmit}>
    ...
    </form>
  );
}

export default ProjectForm;

import React, { useState } from 'react';
import { Project } from './Project';
import ProjectCard from './ProjectCard';
import ProjectForm from './ProjectForm';

interface ProjectListProps {
  projects: Project[];
-  onSave: (project: Project) => void;
}

- function ProjectList({ projects, onSave }: ProjectListProps) {
+ function ProjectList({ projects }: ProjectListProps) {
  const [projectBeingEdited, setProjectBeingEdited] = useState({});

  const handleEdit = (project: Project) => {
    setProjectBeingEdited(project);
  };

  const cancelEditing = () => {
    setProjectBeingEdited({});
  };

  return (
    <div className="row">
      {projects.map((project) => (
        <div key={project.id} className="cols-sm">
          {project === projectBeingEdited ? (
            <ProjectForm project={project}
-             onSave={onSave}
              onCancel={cancelEditing} />
          ) : (
            <ProjectCard project={project} onEdit={handleEdit} />
          )}
        </div>
      ))}
    </div>
  );
}

export default ProjectList;

yarn test

npm test
npm run test

import React from 'react';
import { render } from '@testing-library/react';
import App from './App';

- test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

+ test('should render without crashing', () => {
+ render(<App />);
+ });

yarn test

import React from 'react';
import { render, screen } from '@testing-library/react';
import HomePage from './HomePage';

test('renders home heading', () => {
  render(<HomePage />);
  expect(screen.getByRole('heading')).toHaveTextContent('Home');
});

yarn test

yarn add --dev react-test-renderer
yarn add --dev @types/react-test-renderer

npm i react-test-renderer --save-dev
npm i @types/react-test-renderer --save-dev

import React from 'react';
import HomePage from './HomePage';
+ import renderer from 'react-test-renderer';

+ describe('<HomePage />', () => {

  test('should render without crashing', () => {
    render(<HomePage />);
  });

+  test('snapshot', () => {
+    const tree = renderer.create(<HomePage />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });

+ });

yarn test

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<HomePage /> snapshot 1`] = `
<h2>
  Home
</h2>
`;

import { render, screen } from "@testing-library/react";
import React from "react";
import { Project } from "../Project";
import ProjectCard from "../ProjectCard";

describe("<ProjectCard />", () => {
  let project: Project;
  let handleEdit: jest.Mock;
  beforeEach(() => {
    project = new Project({
      id: 1,
      name: "Mission Impossible",
      description: "This is really difficult",
      budget: 100,
    });
    handleEdit = jest.fn();
  });

  it("should initially render", () => {
    render(<ProjectCard project={project} onEdit={handleEdit} />);
  });
});

yarn test

import { render, screen } from '@testing-library/react';
import React from 'react';
+ import { MemoryRouter } from 'react-router-dom';
import { Project } from '../Project';
import ProjectCard from '../ProjectCard';

describe('<ProjectCard />', () => {
  let project: Project;
  let handleEdit: jest.Mock;
  beforeEach(() => {
    project = new Project({
      id: 1,
      name: 'Mission Impossible',
      description: 'This is really difficult',
      budget: 100,
    });
    handleEdit = jest.fn();
  });

  it('should initially render', () => {
    render(
+      <MemoryRouter>
        <ProjectCard project={project} onEdit={handleEdit} />
+      </MemoryRouter>
    );
  });
});

yarn test

yarn remove @testing-library/user-event
yarn add --dev @testing-library/user-event @testing-library/dom

...

describe('<ProjectCard />', () => {
  let project: Project;
  let handleEdit: jest.Mock;
  beforeEach(() => {
    project = new Project({
      id: 1,
      name: 'Mission Impossible',
      description: 'This is really difficult',
      budget: 100,
    });
    handleEdit = jest.fn();
  });

  it('should initially render', () => {
    render(
      <MemoryRouter>
        <ProjectCard project={project} onEdit={handleEdit} />
      </MemoryRouter>
    );
  });

+  it('renders project properly', () => {
+    render(
+      <MemoryRouter>
+        <ProjectCard project={project} onEdit={handleEdit} />
+      </MemoryRouter>
+    );
+    expect(screen.getByRole('heading')).toHaveTextContent(project.name);
+    // screen.debug(document);
+    screen.getByText(/this is really difficult\.\.\./i);
+    screen.getByText(/budget : 100/i);
+  });

});

import { render, screen } from '@testing-library/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { Project } from '../Project';
import ProjectCard from '../ProjectCard';
+ import userEvent from '@testing-library/user-event';

describe('<ProjectCard />', () => {
  let project: Project;
  let handleEdit: jest.Mock;
  beforeEach(() => {
    project = new Project({
      id: 1,
      name: 'Mission Impossible',
      description: 'This is really difficult',
      budget: 100,
    });
    handleEdit = jest.fn();
  });

  it('should initially render', () => {
    render(
      <MemoryRouter>
        <ProjectCard project={project} onEdit={handleEdit} />
      </MemoryRouter>
    );
  });

  it('renders project properly', () => {
    render(
      <MemoryRouter>
        <ProjectCard project={project} onEdit={handleEdit} />
      </MemoryRouter>
    );
    expect(screen.getByRole('heading')).toHaveTextContent(project.name);
    // screen.debug(document);
    screen.getByText(/this is really difficult\.\.\./i);
    screen.getByText(/budget : 100/i);
  });

+  it('handler called when edit clicked', async () => {
+    render(
+      <MemoryRouter>
+        <ProjectCard project={project} onEdit={handleEdit} />
+      </MemoryRouter>
+    );
+    // this query works screen.getByText(/edit/i)
+    // but using role is better
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: /edit/i }));
+    expect(handleEdit).toBeCalledTimes(1);
+    expect(handleEdit).toBeCalledWith(project);
+  });
});

import { render, screen } from "@testing-library/react";
import React from "react";
import { MemoryRouter } from "react-router-dom";
import { Project } from "../Project";
import ProjectCard from "../ProjectCard";
import userEvent from "@testing-library/user-event";
import renderer from "react-test-renderer";

describe("<ProjectCard />", () => {
  let project: Project;
  let handleEdit: jest.Mock;

  const setup = () =>
    render(
      <MemoryRouter>
        <ProjectCard project={project} onEdit={handleEdit} />
      </MemoryRouter>
    );

  beforeEach(() => {
    project = new Project({
      id: 1,
      name: "Mission Impossible",
      description: "This is really difficult",
      budget: 100,
    });
    handleEdit = jest.fn();
  });

  it("should initially render", () => {
    setup();
  });

  it("renders project properly", () => {
    setup();
    expect(screen.getByRole("heading")).toHaveTextContent(project.name);
    // screen.debug(document);
    screen.getByText(/this is really difficult\.\.\./i);
    screen.getByText(/budget : 100/i);
  });

  it("handler called when edit clicked", async () => {
    setup();
    // this query works screen.getByText(/edit/i)
    // but using role is better
    // eslint-disable-next-line testing-library/render-result-naming-convention
    const user = userEvent.setup();
    await user.click(screen.getByRole("button", { name: /edit/i }));
    expect(handleEdit).toBeCalledTimes(1);
    expect(handleEdit).toBeCalledWith(project);
  });

  test("snapshot", () => {
    const tree = renderer
      .create(
        <MemoryRouter>
          <ProjectCard project={project} onEdit={handleEdit} />
        </MemoryRouter>
      )
      .toJSON();
    expect(tree).toMatchSnapshot();
  });
});

import { render, screen } from '@testing-library/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { Project } from '../Project';
import ProjectCard from '../ProjectCard';
import userEvent from '@testing-library/user-event';
+ import renderer from 'react-test-renderer';

describe('<ProjectCard />', () => {
  let project: Project;
  let handleEdit: jest.Mock;
  beforeEach(() => {
    ...
  });

...

+  test('snapshot', () => {
+    const tree = renderer
+      .create(
+        <MemoryRouter>
+          <ProjectCard project={project} onEdit={handleEdit} />
+        </MemoryRouter>
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
});

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<ProjectCard /> snapshot 1`] = `
<div
  className="card"
>
  <img
    alt="Mission Impossible"
    src=""
  />
  <section
    className="section dark"
  >
    <a
      href="/projects/1"
      onClick={[Function]}
    >
      <h5
        className="strong"
      >
        <strong>
          Mission Impossible
        </strong>
      </h5>
      <p>
        This is really difficult...
      </p>
      <p>
        Budget : 
        100
      </p>
    </a>
    <button
      className="bordered"
      onClick={[Function]}
    >
      <span
        className="icon-edit"
      />
      Edit
    </button>
  </section>
</div>
`;

yarn start

ERROR in src/App.test.tsx:8:23
TS2339: Property 'toBeInTheDocument' does not exist on type 'JestMatchers<HTMLElement>'.
     6 |   render(<App />);
     7 |   const linkElement = screen.getByText(/learn react/i);
  >  8 |   expect(linkElement).toBeInTheDocument();
       |                       ^^^^^^^^^^^^^^^^^
     9 | });
    10 |

yarn remove @testing-library/jest-dom
yarn add -D @testing-library/jest-dom@^4.2.4

"dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
},

yarn add --dev @testing-library/jest-dom@^5.16.4

yarn add --dev @testing-library/react
#  等同于 下方
yarn add -D @testing-library/react
# npm
npm install --save-dev @testing-library/react

🦄  yarn global add serve
Usage Error: The 'yarn global' commands have been removed in 2.x - consider using 'yarn dlx' or a third-party plugin instead

$ yarn run [--inspect] [--inspect-brk] [-T,--top-level] [-B,--binaries-only] <scriptName> ...

(alias) function createStore<S, A extends Action<any>, Ext, StateExt>(reducer: Reducer<S, A>, enhancer?: StoreEnhancer<Ext, StateExt>): Store<S & StateExt, A> & Ext (+1 overload)
import createStore

import { legacy_createStore as createStore} from 'redux'

function wrapper(arg) {
  // 内部返回的函数就叫`thunk`
  return function thunk() {
    console.log('thunk running, arg: ', arg)
  }
}
// 我们通过调用wrapper来获得thunk
const thunk = wrapper('wrapper arg')

// 然后在需要的地方再去执行thunk
thunk()

corepack enable

corepack prepare yarn@stable --activate

🦄  corepack enable
Internal Error: EPERM: operation not permitted, open 'D:\Program Files\nodejs\pnpm'
Error: EPERM: operation not permitted, open 'D:\Program Files\nodejs\pnpm'

yarn add --dev --exact prettier

echo {}> .prettierrc.json

# Ignore artifacts:
build
coverage

yarn prettier --write .

npx prettier --check .