feat: add writeData pages to arduino onboarding (#5398)

* feat: add writeData pages to arduino onboarding

Co-authored-by: alex wang <alexwang@alexs-MacBook-Pro.local>
Co-authored-by: David R <drusnak@influxdata.com>

Author: 3 people

src/homepageExperience/components/steps/arduino/WriteData.tsx

@@ -1,71 +1,125 @@
 // Libraries
-import React, {useState} from 'react'
+import React from 'react'
 
 // Components
-import {Button, ButtonGroup, ComponentColor} from '@influxdata/clockface'
+import CodeSnippet from 'src/shared/components/CodeSnippet'
+import DataListening from 'src/homepageExperience/components/DataListening'
+import {InfluxColors, Panel} from '@influxdata/clockface'
 
-// Styles
-import './ArduinoSteps.scss'
+// Utils
+import {DEFAULT_BUCKET} from 'src/writeData/components/WriteDataDetailsContext'
+import {event} from 'src/cloud/utils/reporting'
 
-// Types
-type CurrentDataSelection = 'URL' | 'CSV'
 type OwnProps = {
   bucket: string
 }
 
-export const WriteDataComponent = (props: OwnProps) => {
+export const WriteData = (props: OwnProps) => {
   const {bucket} = props
+  const bucketName = bucket === DEFAULT_BUCKET ? 'sample-bucket' : bucket
 
-  const [currentDataSelection, setCurrentDataSelection] = useState<
-    CurrentDataSelection
-  >('URL')
+  const codeSnippetOne = `void setup() {
+    // ... code in setup() from Initialize Client
+   
+    // Add tags to the data point
+    sensor.addTag("device", DEVICE);
+    sensor.addTag("SSID", WiFi.SSID());
+   }`
+
+  const codeSnippetTwo = `void loop() {
+    // Clear fields for reusing the point. Tags will remain the same as set above.
+    sensor.clearFields();
+  
+    // Store measured value into point
+    // Report RSSI of currently connected network
+    sensor.addField("rssi", WiFi.RSSI());
+  
+    // Print what are we exactly writing
+    Serial.print("Writing: ");
+    Serial.println(sensor.toLineProtocol());
+  
+    // Check WiFi connection and reconnect if needed
+    if (wifiMulti.run() != WL_CONNECTED) {
+      Serial.println("Wifi connection lost");
+    }
+  
+    // Write point
+    if (!client.writePoint(sensor)) {
+      Serial.print("InfluxDB write failed: ");
+      Serial.println(client.getLastErrorMessage());
+    }
+  
+    Serial.println("Waiting 1 second");
+    delay(1000);
+    }`
+
+  // Events log handling
+  const logCopyCodeSnippet = () => {
+    event(`firstMile.arduinoWizard.buckets.code.copied`) // edit
+  }
 
   return (
     <>
       <h1>Write Data</h1>
-      <h2 style={{marginBottom: '8px'}}>Choose your sample data source</h2>
       <p className="small-margins">
-        We recommend choosing an option that most closely matches how you will
-        write your actual data.
+        To start writing data, append the lines of code to add tags to the Point
+        at the end of the{' '}
+        <code className="homepage-wizard--code-highlight">void setup()</code>{' '}
+        function.
+      </p>
+      <CodeSnippet
+        text={codeSnippetOne}
+        onCopy={logCopyCodeSnippet}
+        language="arduino"
+      />
+      <p>
+        Add the following{' '}
+        <code className="homepage-wizard--code-highlight">loop()</code> code
+        snippet to your sketch
+      </p>
+      <CodeSnippet
+        text={codeSnippetTwo}
+        onCopy={logCopyCodeSnippet}
+        language="arduino"
+      />
+      <p>
+        In the above code snippet, we retrive the RSSI (Received Signal Strength
+        Indicator) of your wifi connection and write it to InfluxDB using the
+        client.
+      </p>
+      <p>
+        Once the data is finished writing, you will see a confirmation below.
+      </p>
+      <Panel backgroundColor={InfluxColors.Grey15}>
+        <Panel.Body>
+          <DataListening bucket={bucketName} />
+        </Panel.Body>
+      </Panel>
+      <h2>Review data concepts</h2>
+      <p>
+        <b>Field (required)</b> <br />
+        Key-value pair for storing time-series data. For example, insect name
+        and its count. You can have one field per record (row of data), and many
+        fields per bucket. <br />
+        <i>key data type: string</i> <br />
+        <i>value data type: float, integer, string, or boolean</i>
+        <br />
+      </p>
+      <p>
+        <b>Measurement (required)</b> <br />
+        A category for your fields. In our example, it is census. You can have
+        one measurement per record (row of data), and many measurements per
+        bucket. <br />
+        <i>data type: string</i> <br />
+      </p>
+      <p style={{marginBottom: '48px'}}>
+        <b>Tag (optional)</b> <br />
+        Key-value pair for field metadata. For example, census location. You can
+        have many tags per record (row of data) and per bucket.
+        <br />
+        <i>key data type: string</i> <br />
+        <i>value data type: float, integer, string, or boolean</i>
       </p>
-      <ButtonGroup className="small-margins">
-        <Button
-          text="URL to File"
-          color={
-            currentDataSelection === 'URL'
-              ? ComponentColor.Primary
-              : ComponentColor.Default
-          }
-          onClick={() => {
-            setCurrentDataSelection('URL')
-          }}
-        />
-        <Button
-          text="Local CSV"
-          color={
-            currentDataSelection === 'CSV'
-              ? ComponentColor.Primary
-              : ComponentColor.Default
-          }
-          onClick={() => {
-            setCurrentDataSelection('CSV')
-          }}
-        />
-      </ButtonGroup>
-      {currentDataSelection === 'CSV' && (
-        <>
-          <h2 className="large-margins">Download sample data to {bucket}</h2>
-        </>
-      )}
-      {currentDataSelection === 'URL' && (
-        <>
-          <h2 className="large-margins">Review sample data</h2>
-        </>
-      )}
     </>
   )
 }
-
-export const WriteData = props => {
-  return <WriteDataComponent bucket={props.bucket} />
-}