Setup Wordpress + React proof of concept

[ajdrake]

https://ghostinspector.com/blog/develop-wordpress-plugin-with-webpack-and-react/

[ajdrake]

@jwloyd01-student do you think you'll have time this week for this one?

[jwloyd01-student]

I have been trying to work on https://ghostinspector.com/blog/develop-wordpress-plugin-with-webpack-and-react/ setup and I ran into the issue screenshotted. The guide glosses over a LOT when it comes to react, which I am completely unfamiliar with. The attached screenshot is an error I found that I have not been able to fix.

You can follow the steps I have done here: https://docs.google.com/document/d/1Gw9nKGv9BzSRHlSsCcOylmFOQAu9MuKe6FzT5KC9gPg/edit

The current status of the App.js file I am trying to run is this: `import React, {useEffect, useState} from 'react' import format from 'date-fns/format'

const Dashboard = ({ suiteId, apiKey }) => { const [tests, setTests] = useState([]) const fetchTests = async (suiteId, apiKey) => { try { const response = await fetch(https://api.ghostinspector.com/v1/suites/${suiteId}/tests/?apiKey=${apiKey}) const json = await response.json() if (json.code) === 'SUCCESS') { setTests(json.data) } else { throw new Error(json.message) } } catch (error) { console.debug(error) } } useEffect(() => { if (suiteId && apiKey) { fetchTests(suiteId, apiKey) } }, [])

const tests = [] // placeholder until we fetch from API
const suite = {} // placeholder until we fetch from API

const total = tests.length
const totalPassing = tests.filter(test => test.passing === true).length
return (
    <div className="ghost_inspector_wrapper">
        <p className="ghost_inspector_header">Latest results for suite: <a href={`https://app.ghostinspector.com/suites/${suiteId}`} target="_blank" rel="noopener noreferrer" className="ghost_inspector_suite_name">{suite.name}</a> ({totalPassing}/{total} passing)</p>
        <div className="ghost_inspector_tests">
        <table>
            <thead>
            <tr>
                <th>Test Name</th>
                <th>Last Run</th>
            </tr>
            </thead>
            <tbody>
            {tests.map(test => (
            <tr key={test._id}>
                <td>
                <a href={`https://app.ghostinspector.com/tests/${test._id}`} target="_blank" rel="noopener noreferrer">{test.name}</a>
                </td>
                <td className="ghost_inspector_status">
                <span className={`dashicons dashicons-${test.passing ? 'yes' : 'no'}`}></span>
                {format(new Date(test.dateExecutionFinished), 'MMM D')}
                </td>
            </tr>
            ))}
            </tbody>
        </table>
        </div>
    </div>
)

}

export default Dashboard; `

[ajdrake]

@jwloyd01-student add a parenthesis right after the if if (json.code) === 'SUCCESS') { should be if ((json.code) === 'SUCCESS') {

[jwloyd01-student]

This fixed that issue and I am currently chugging along with some other stuff related to react

[jwloyd01-student]

I'm confused on this getting started with Docker step. I went through the process to download Docker Desktop and have been trying to work with it to figure out what the instructions are but I am still confused. It seems like this page wants me to go through the steps here to create a repository and somehow connect it to the information from their WordPress plugin repository but I am missing too many steps to see the connection.

I tried git clone https://github.com/ghost-inspector/wordpress-plugin and running docker stack deploy -c stack.yml wordpress. I was met with The system cannot find the file specified.

I think this website might help but I am still unsure of how to use the repository in the container.

[ajdrake]

@jwloyd01-student did you try copying this file to your local file system in the folder where you are running the docker command?

https://github.com/ghost-inspector/wordpress-plugin/blob/48066c47f5414dd8585ed50a9644e9088d22e362/stack.yml

[ajdrake]

@jwloyd01-student did the above comment help?

[jwloyd01-student]

It did not help me. I tried making a file with the same name and copied the code for the stack config. I copied the file into a folder called "Running_Docker" which I made just to test that. Then I ran the command docker stack deploy -c stack.yml wordpress. I got this - `Ignoring unsupported options: restart

error during connect: Get http://%2F%2F.%2Fpipe%2Fdocker_engine/v1.40/info: open //./pipe/docker_engine: The system cannot find the file specified. In the default daemon configuration on Windows, the docker client must be run elevated to connect. This error may also indicate that the docker daemon is not running.`

[jwloyd01-student]

I'm also having trouble opening the Docker Desktop app (although it runs in the background) because I had to jank it since it requires Windows Pro to run.