add route for project workspace, add placeholder component for projec… (#231)

* add route for project workspace, add placeholder component for project workspace

* add test for project workspace

Author: roymoran

src/api/api-service.ts

@@ -43,6 +43,15 @@ export class ApiService {
     return result;
   }
 
+  public async getProject(projectId: string) {
+    const endpoint = `${this.apiEndpoint}/projects/${projectId}`;
+    this.profiler.setReportInfo(endpoint, 'getProject');
+    this.profiler.startTimeRecord();
+    const result = await HttpClient.get(endpoint, this.headers);
+    this.profiler.endTimeRecord();
+    return result;
+  }
+
   public async getProjects() {
     const endpoint = `${this.apiEndpoint}/projects`;
     this.profiler.setReportInfo(endpoint, 'getProjects');

src/components/projects/index.ts

@@ -1 +1,2 @@
-export * from './project-gallery';
+export * from './projects-gallery/projects-gallery';
+export * from './project-workspace/project-workspace';

src/components/projects/project-gallery/index.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ProjectWorkspace } from './project-workspace';
+import { MockThemeProvider } from '@mocks';
+
+describe('project gallery tests', () => {
+  test('render placeholder project workspace', async () => {
+    // Arrange
+    const { findByText } = render(
+      <MockThemeProvider>
+        <ProjectWorkspace projectId={'test-id'} />
+      </MockThemeProvider>,
+    );
+    // Act
+    const text = await findByText('Project workspace pages coming soon.');
+    // Assert
+    expect(text).toBeDefined();
+    expect(text).toBeInTheDocument();
+    expect(text).toBeVisible();
+  });
+});

src/components/projects/project-workspace/project-workspace.spec.tsx

@@ -0,0 +1,59 @@
+import { RouteComponentProps } from '@reach/router';
+import React, { FC, Fragment, useEffect, useState } from 'react';
+
+import { Wrapper, Seo, Loader } from '@components/shared';
+import { FeedbackForm } from '@components/shared/form';
+import { ServiceResolver, Project, ApiResponse, ErrorResponse } from '@api';
+import { useSiteMetadata } from '@hooks';
+
+interface ProjectWorkspaceParams {
+  projectId?: string;
+}
+
+type ProjectWorkspaceProps = ProjectWorkspaceParams & RouteComponentProps;
+
+export const ProjectWorkspace: FC<ProjectWorkspaceProps> = (props) => {
+  const siteMetadata = useSiteMetadata();
+  const [project, setProject] = useState<Project | undefined>(undefined);
+  const [error, setError] = useState<string>('');
+
+  useEffect(() => {
+    const api = ServiceResolver.apiResolver();
+    async function fetchProject() {
+      try {
+        if (props.projectId == undefined) {
+          return;
+        }
+        const response = (await api.getProject(props.projectId)) as ApiResponse<
+          Project | ErrorResponse
+        >;
+        const project = response.data as Project;
+        setProject(project);
+      } catch (err) {
+        setError(err.message);
+      }
+    }
+
+    fetchProject();
+  });
+
+  return (
+    <Fragment>
+      <Seo
+        title={`${project == undefined ? 'Project' : project.name} Workspace`}
+        description={`Project Workspace for ${siteMetadata.title} website`}
+      />
+
+      <FeedbackForm page="project page" />
+
+      <Wrapper>
+        {project == undefined ? (
+          // waiting for project api response
+          <Loader />
+        ) : (
+          <div>Project workspace pages coming soon.</div>
+        )}
+      </Wrapper>
+    </Fragment>
+  );
+};

src/components/projects/project-workspace/project-workspace.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, waitFor } from '@testing-library/react';
-import ProjectGallery from '../project-gallery';
+import { ProjectsGallery } from '../projects-gallery';
 import { MockThemeProvider } from '@mocks';
 import { getProjects } from '@mocks/responses/get-projects-response';
 
@@ -12,7 +12,7 @@ describe('project gallery tests', () => {
     // Arrange
     const { getAllByTestId } = render(
       <MockThemeProvider>
-        <ProjectGallery />
+        <ProjectsGallery />
       </MockThemeProvider>,
     );
     // Act