US-16_startpage

[catdieval]

Startpage

Value Proposition

As a user I want to visit the startpage So that I can read what is the App about and to get involved.

Description

Acceptance Criteria

• [x] Title at the top with the name of the website and a logo.
• [x] Paragraph with text "With PlotData you can easily make customisable publication-quality graphs, all without programming skills.".
• [x] List of example images for different types of charts.
• [x] Heading with text "Overview:".
• [x] Unordered list containing all the steps:
• [x] Paragraph with text "Et voila! An interactive graph gets generated, with the help of the Plotly JavaScript library" and where "Plotly" is a link directing to https://plotly.com/javascript/basic-charts/.
• [x] Unordered list containing the different actions.
• [x] A "Get started" button where a click causes a render of the UploadData component.

Tasks

• [x] Create a feature branch "Homepage".

• [x] In the public folder create a "plot-examples" folder and inside add png images downloaded from graphs created in plotly corresponding to different plot examples.

• [x] In the lib folder create a file "examplePlotsArray.js".

  • [x] In the file declare a examplePlotsArray array which contains objects corresponding to each example of plot.
  • [x] Each object contains the name / path key which takes as value the name / path of the plot example.

• [x] In the lib folder create a file "listsofBulletPoints.js":

  • [x] Create an arrayOfSteps / arrayOfActions array which contains strings for the different steps / actions.

• [x] Create an UnorderedList component:

  • [x] It takes arrayOfBulletPoints as prop.
  • [x] The component returns a ul element and nested inside is a mapping over arrayOfBulletsPoints using a bulletPoint argument to render a li element.
  • [x] The li has for text bulletPoint and takes bulletPoint as value to the key attribute.

• [x] Create a StartPage component:

  • [x] useState for the hasClickedGetStarted variable with initial value set to false.
  • [x] Write a handleGetStarted function which sets setHasClickedGetStarted to true.
  • [x] HomePage renders these components: Paragraph, Container, Heading, Container, Paragraph and Container.
  • [x] The first / second / third render of Container has the $wrap / $centered / $centered attribute set to "wrap" / "center" / "center".
  • [x] The first / second / third render of Container has nested inside of it: mapping over examplePlotsArray / UnorderedList / UnorderedList and Button.
  • [x] The mapping over examplePlotsArray uses item as argument to render an Image component with the key / alt attribute set to item.name and the src attribute set to item.path.
  • [x] The first / second render of UnorderedList takes arrayOfSteps / arrayOfActions as prop to the arrayOfBulletPoints attribute.
  • [x] Button has for text "Get started" and has handleGetStarted as prop to the onClick attribute.

• [x] In the index.js, add the StartPage component (before UploadData).

• [x] In UploadData access hasClickedGetStarted.

  • [x] In the return of UploadData, use a conditional rendering such that the component is displayed only if hasClickedGetStarted is true.

[stellanw]

Looks good to me. Only suggestion might be to use the template requirements for the "Value proposition": As a <user/role> I want to <feature/goal> In order to <benefit/purpose>