From 11975c888a99a4499d695365a92d1345d5edf55b Mon Sep 17 00:00:00 2001
From: Brian Franco <mastastealth+git@gmail.com>
Date: Wed, 29 Mar 2023 23:09:55 -0400
Subject: [PATCH] Ember "Context" Example (#160)

* Ember "Context" Example

* Forgot backing class
---
 .../5-context/ember/app.hbs                   |  1 +
 .../5-context/ember/user-profile.hbs          |  8 +++++++
 .../5-context/ember/user-profile.js           | 10 +++++++++
 .../5-context/ember/user-service.js           | 22 +++++++++++++++++++
 4 files changed, 41 insertions(+)
 create mode 100644 content/4-component-composition/5-context/ember/app.hbs
 create mode 100644 content/4-component-composition/5-context/ember/user-profile.hbs
 create mode 100644 content/4-component-composition/5-context/ember/user-profile.js
 create mode 100644 content/4-component-composition/5-context/ember/user-service.js

diff --git a/content/4-component-composition/5-context/ember/app.hbs b/content/4-component-composition/5-context/ember/app.hbs
new file mode 100644
index 00000000..bbbdd3cf
--- /dev/null
+++ b/content/4-component-composition/5-context/ember/app.hbs
@@ -0,0 +1 @@
+<UserProfile />
\ No newline at end of file
diff --git a/content/4-component-composition/5-context/ember/user-profile.hbs b/content/4-component-composition/5-context/ember/user-profile.hbs
new file mode 100644
index 00000000..b8b77a8c
--- /dev/null
+++ b/content/4-component-composition/5-context/ember/user-profile.hbs
@@ -0,0 +1,8 @@
+<div>
+  <h2>My Profile</h2>
+  <p>Username: {{this.user.username}}</p>
+  <p>Email: {{this.user.email}}</p>
+  <button {{on "click" (fn this.userService.updateUserName "Jane")}}>
+    Update username to Jane
+  </button>
+</div>
\ No newline at end of file
diff --git a/content/4-component-composition/5-context/ember/user-profile.js b/content/4-component-composition/5-context/ember/user-profile.js
new file mode 100644
index 00000000..64a3e037
--- /dev/null
+++ b/content/4-component-composition/5-context/ember/user-profile.js
@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+
+export default class UserProfileComponent extends Component {
+  @service userService;
+
+  get user() {
+    return this.userService.user;
+  }
+}
diff --git a/content/4-component-composition/5-context/ember/user-service.js b/content/4-component-composition/5-context/ember/user-service.js
new file mode 100644
index 00000000..fac7602c
--- /dev/null
+++ b/content/4-component-composition/5-context/ember/user-service.js
@@ -0,0 +1,22 @@
+import Service from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class UserServiceService extends Service {
+  @tracked id = 1;
+  @tracked username = 'unicorn42';
+  @tracked email = 'unicorn42@example.com';
+
+  get user() {
+    return {
+      id: this.id,
+      username: this.username,
+      email: this.email,
+    };
+  }
+
+  @action
+  updateUserName(newUsername) {
+    this.username = newUsername;
+  }
+}