From 5ce23541c770f7ae9179f8b6b771045b6ab4113b Mon Sep 17 00:00:00 2001 From: msenechal Date: Mon, 15 Jan 2024 21:25:11 +0000 Subject: [PATCH 1/2] Getting started documentation + example --- docs/modules/ROOT/pages/contributing.adoc | 4 +- docs/modules/ROOT/pages/examples.adoc | 83 +++++++++++++++++++++++ docs/modules/ROOT/pages/index.adoc | 2 +- 3 files changed, 86 insertions(+), 3 deletions(-) diff --git a/docs/modules/ROOT/pages/contributing.adoc b/docs/modules/ROOT/pages/contributing.adoc index 58873d8d4..63bebf016 100644 --- a/docs/modules/ROOT/pages/contributing.adoc +++ b/docs/modules/ROOT/pages/contributing.adoc @@ -5,10 +5,10 @@ If you extend the starter kit with your own (reusable) components, consider crea For your feature to be accepted, ensure: -- There is a matching https://github.com/neo4j-labs/needle-starter-kit/issues[issue] on GitHub. +- There is a matching https://github.com/neo4j-labs/neo4j-needle-starterkit/issues[issue] on GitHub. - Your code is formatted and linted correctly. (See `yarn run lint`). - The component is well documented in the documentation portal (if applicable). ## Feature Requests / Bugs -If you have a request for a feature, or have found a bug, creating an https://github.com/neo4j-labs/needle-starter-kit/issues[issue on GitHub] is the best way to reach out. \ No newline at end of file +If you have a request for a feature, or have found a bug, creating an https://github.com/neo4j-labs/neo4j-needle-starterkit/issues[issue on GitHub] is the best way to reach out. \ No newline at end of file diff --git a/docs/modules/ROOT/pages/examples.adoc b/docs/modules/ROOT/pages/examples.adoc index 7c18ba9a1..50aa5b180 100644 --- a/docs/modules/ROOT/pages/examples.adoc +++ b/docs/modules/ROOT/pages/examples.adoc @@ -1,5 +1,88 @@ # Examples +## Getting started +As an example to get you started, here are the steps to retrieve and display data from a Neo4j database for the Movie graph. + +### Retrieve data +First, to retrieve data, we can create a function that will return the data we need in the `src/utils/Driver.tsx` file. +In this example, we will focus on getting all the actors for the movie `The Matrix`. + +.Driver.tsx +[source, typescript] +---- +export async function getMatrixActors() { + const session = driver.session(); + const result = await session.run( + 'MATCH (actor:Person)-[:ACTED_IN]-(movie:Movie {title: "The Matrix"}) RETURN actor.name AS actorName' + ); + session.close(); + let listActors : string[] = []; + result.records.map((record) => ( + listActors.push(record.get('actorName')) + )); + return listActors; +} +---- + +In this function, we execute a cypher query to retrieve all the actors that acted in the movie `The Matrix`, and return their name. +We then return an array, containing all the actors' names. + +### Display data + +To display the data, we will have to update the `src/components/Content.tsx` file. + +.Content.tsx +[source, typescript] +---- +... +import { setDriver, disconnect, getMatrixActors } from '../utils/Driver'; // <1> + +export default function Content() { +... + const [listActors, setListActors] = useState>([]); // <2> + + ... +// <3> + function retrieveMatrixActors() { + getMatrixActors().then((actors) => { + setListActors(actors); + }); + }; + + ... +// <4> + {!connectionStatus ? ( + + ) : ( +
+ +
+ The Matrix actors: +
+ {listActors.length > 0 ? ( +
    + {listActors.map((actor) => ( +
  • {actor}
    • + ))} +
+ ) : ( + No actors found + )} +
+
+ +
+ )} +... + +---- + +<1> Import our new function `getMatrixActors` in the existing import statement. +<2> Create a new state variable to store the list of actors we will retrieve from the database. +<3> Create a button click handler that will call our `getMatrixActors` function and update the state variable with the result when we click. +<4> Display the data in a simple list. + +## Templates This page will contain a set of example applications built using the Needle starter kit. Looking for inspiration on what to build? Check out https://neo4j.com/developer-blog/needle-neo4j-design-system/[this post] on the Neo4j Developer Blog. diff --git a/docs/modules/ROOT/pages/index.adoc b/docs/modules/ROOT/pages/index.adoc index 03927c5f8..1cbed0ae8 100644 --- a/docs/modules/ROOT/pages/index.adoc +++ b/docs/modules/ROOT/pages/index.adoc @@ -1,6 +1,6 @@ # Neo4j Needle StarterKit -Reactjs Responsive Starter Kit for building an app using [Neo4j Needle](https://www.neo4j.design/) for accelerating your Neo4j-powered front-end tools. +Reactjs Responsive Starter Kit for building an app using https://www.neo4j.design/[Neo4j Needle] for accelerating your Neo4j-powered front-end tools. image::FeaturedImg.jpg[Featured Image] From f7a842d96dba2e8755742ec9352d0872a2d4e6ef Mon Sep 17 00:00:00 2001 From: msenechal Date: Tue, 16 Jan 2024 09:43:14 +0000 Subject: [PATCH 2/2] Updated UI link for doc --- docs/preview.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/preview.yml b/docs/preview.yml index 2867c1b77..25fe24164 100644 --- a/docs/preview.yml +++ b/docs/preview.yml @@ -12,7 +12,7 @@ content: - '!**/README.adoc' ui: bundle: - url: https://s3-eu-west-1.amazonaws.com/static-content.neo4j.com/build/ui-bundle.zip + url: https://static-content.neo4j.com/build/ui-bundle-latest.zip snapshot: true urls: html_extension_style: indexify