diff --git a/todo-web/.vscode/launch.json b/todo-web/.vscode/launch.json
new file mode 100644
index 0000000..baa801d
--- /dev/null
+++ b/todo-web/.vscode/launch.json
@@ -0,0 +1,11 @@
+{
+ "configurations": [
+ {
+ "command": "yarn run start",
+ "name": "Run yarn start",
+ "request": "launch",
+ "type": "node-terminal"
+ }
+
+ ]
+}
\ No newline at end of file
diff --git a/todo-web/package.json b/todo-web/package.json
index d4367f6..4471db6 100644
--- a/todo-web/package.json
+++ b/todo-web/package.json
@@ -17,7 +17,7 @@
"scripts": {
"start": "yarn run relay && react-scripts start",
"build": "yarn run relay && react-scripts build",
- "relay": "yarn run relay-compiler --schema schema.graphql --src ./src/ --watchman false $@",
+ "relay": "yarn run relay-compiler --schema schema.graphql --src ./src/ --extensions=js --watchman false $@",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
diff --git a/todo-web/src/App.js b/todo-web/src/App.js
index 4cc85cd..163d055 100644
--- a/todo-web/src/App.js
+++ b/todo-web/src/App.js
@@ -1,22 +1,52 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
+import fetchGraphQL from './fetchGraphQL';
import { nanoid } from "nanoid";
import Form from "./components/Form";
import FilterButton from "./components/FilterButton";
import Todo from "./components/Todo";
function App(props) {
- const [tasks, setTasks] = useState(props.tasks);
- const taskList = tasks.map(task => (
-
- ));
+ const [tasks, setTasks] = useState(null);
+ const [headingText, setHeadingText] = useState(null);
+ useEffect(() => {
+ let isMounted = true;
+ fetchGraphQL(`
+ query {
+ allTodos {
+ id
+ reference
+ description
+ }
+ }
+ `).then(response => {
+ // Avoid updating state if the component unmounted before the fetch completes
+ if (!isMounted) {
+ return;
+ }
+ console.log(response.data.allTodos);
+ const taskList = response.data.allTodos.map(task => (
+
+ ));
+ setTasks(taskList);
+ const tasksNoun = taskList.length !== 1 ? 'tasks' : 'task';
+ setHeadingText(`${taskList.length} ${tasksNoun} remaining`);
+ console.log(headingText);
+ }).catch(error => {
+ console.error(error);
+ });
+
+ return () => {
+ isMounted = false;
+ };
+ }, [fetchGraphQL]);
function addTask(name) {
const newTask = { id: "todo-" + nanoid(), name: name, completed: false };
setTasks([...tasks, newTask]);
@@ -51,8 +81,6 @@ function App(props) {
setTasks(editedTaskList);
console.log(editedTaskList);
}
- const tasksNoun = taskList.length !== 1 ? 'tasks' : 'task';
- const headingText = `${taskList.length} ${tasksNoun} remaining`;
return (
TodoMatic
@@ -63,14 +91,14 @@ function App(props) {
- {headingText}
+ {headingText != null? headingText : "Loading"}
- {taskList}
+ {tasks != null? tasks : "Loading"}
);
diff --git a/todo-web/src/RelayEnvironment.js b/todo-web/src/RelayEnvironment.js
new file mode 100644
index 0000000..575f6b2
--- /dev/null
+++ b/todo-web/src/RelayEnvironment.js
@@ -0,0 +1,16 @@
+// your-app-name/src/RelayEnvironment.js
+import {Environment, Network, RecordSource, Store} from 'relay-runtime';
+import fetchGraphQL from './fetchGraphQL';
+
+// Relay passes a "params" object with the query name and text. So we define a helper function
+// to call our fetchGraphQL utility with params.text.
+async function fetchRelay(params, variables) {
+ console.log(`fetching query ${params.name} with ${JSON.stringify(variables)}`);
+ return fetchGraphQL(params.text, variables);
+}
+
+// Export a singleton instance of Relay Environment configured with our network function:
+export default new Environment({
+ network: Network.create(fetchRelay),
+ store: new Store(new RecordSource()),
+});
\ No newline at end of file
diff --git a/todo-web/src/fetchGraphQL.js b/todo-web/src/fetchGraphQL.js
index 8061a80..1e1a316 100644
--- a/todo-web/src/fetchGraphQL.js
+++ b/todo-web/src/fetchGraphQL.js
@@ -1,6 +1,6 @@
async function fetchGraphQL(text, variables) {
// fetch data from the rails server
- const response = await fetch('http://localhost:3000/graphql', {
+ const response = await fetch('http://localhost:3001/graphql', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
diff --git a/todo-web/src/index.js b/todo-web/src/index.js
index 3a82e69..6e4439b 100644
--- a/todo-web/src/index.js
+++ b/todo-web/src/index.js
@@ -10,7 +10,7 @@ const DATA = [
{ id: "todo-2", name: "Repeat", completed: false }
];
-ReactDOM.render(, document.getElementById("root"));
+ReactDOM.render(, document.getElementById("root"));
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
diff --git a/todoItems/Gemfile b/todoItems/Gemfile
index cf0fd0e..eb7ebd9 100644
--- a/todoItems/Gemfile
+++ b/todoItems/Gemfile
@@ -30,6 +30,8 @@ gem 'bootsnap', '>= 1.4.4', require: false
gem "graphql", '~> 1.13.0'
+gem 'rack-cors'
+
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
diff --git a/todoItems/Gemfile.lock b/todoItems/Gemfile.lock
index 5aba5d5..7faef83 100644
--- a/todoItems/Gemfile.lock
+++ b/todoItems/Gemfile.lock
@@ -116,6 +116,8 @@ GEM
nio4r (~> 2.0)
racc (1.6.0)
rack (2.2.3)
+ rack-cors (1.1.1)
+ rack (>= 2.0.0)
rack-mini-profiler (2.3.3)
rack (>= 1.2.0)
rack-proxy (0.7.0)
@@ -219,6 +221,7 @@ DEPENDENCIES
listen (~> 3.3)
pg (~> 1.1)
puma (~> 5.0)
+ rack-cors
rack-mini-profiler (~> 2.0)
rails (~> 6.1.4, >= 6.1.4.1)
sass-rails (>= 6)
diff --git a/todoItems/config/application.rb b/todoItems/config/application.rb
index 8029455..2091182 100644
--- a/todoItems/config/application.rb
+++ b/todoItems/config/application.rb
@@ -18,5 +18,11 @@ class Application < Rails::Application
#
# config.time_zone = "Central Time (US & Canada)"
# config.eager_load_paths << Rails.root.join("extras")
+ config.middleware.insert_before 0, Rack::Cors do
+ allow do
+ origins '*'
+ resource '*', :headers => :any, :methods => [:get, :post, :options]
+ end
+ end
end
end
diff --git a/todoItems/config/initializers/cors.rb b/todoItems/config/initializers/cors.rb
new file mode 100644
index 0000000..99bd247
--- /dev/null
+++ b/todoItems/config/initializers/cors.rb
@@ -0,0 +1,8 @@
+Rails.application.config.middleware.insert_before 0, Rack::Cors do
+ allow do
+ origins '*'
+ resource '*',
+ headers: :any,
+ methods: [:get, :post, :put, :patch, :delete, :options, :head]
+ end
+end
\ No newline at end of file