From 3955b2e3429cf74a33c9bb8a57fe6caf0ec61117 Mon Sep 17 00:00:00 2001
From: The Jared Wilcurt <TheJaredWilcurt@users.noreply.github.com>
Date: Tue, 29 Oct 2019 12:27:04 -0400
Subject: [PATCH] Add File System Example

---
 src/components/FsExample.vue  | 85 +++++++++++++++++++++++++++++++++++
 src/components/HelloWorld.vue |  8 +++-
 2 files changed, 92 insertions(+), 1 deletion(-)
 create mode 100644 src/components/FsExample.vue

diff --git a/src/components/FsExample.vue b/src/components/FsExample.vue
new file mode 100644
index 0000000..ee6bb5d
--- /dev/null
+++ b/src/components/FsExample.vue
@@ -0,0 +1,85 @@
+<template>
+  <div>
+    <div v-if="error">
+      There was an error attempting to read from the file system.
+    </div>
+
+    <button
+      data-test="fs-example-button"
+      @click="getCurrentDirectory"
+    >
+      <template v-if="!error">
+        Click for File System example
+      </template>
+      <template v-else>
+        Try again for File System example
+      </template>
+    </button>
+
+    <template v-if="contents">
+      <p>
+        The contents of the current working directory:
+      </p>
+      <div class="contents">
+        <div
+          v-for="(file, fileIndex) in contents"
+          class="file"
+          :key="'file' + fileIndex"
+        >
+          {{ file }}
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'FsExample',
+  data: function () {
+    return {
+      contents: null,
+      error: false
+    };
+  },
+  methods: {
+    getCurrentDirectory: function () {
+      const fs = window.nw.require('fs');
+      try {
+        this.contents = fs.readdirSync('.');
+        this.error = false;
+      } catch (err) {
+        this.error = true;
+      }
+    }
+  },
+  computed: {}
+};
+</script>
+
+<style scoped>
+button {
+  background: linear-gradient(0deg, #2EB277, #65E6AC);
+  border-width: 3.4px;
+  border-color: #35495E;
+  border-radius: 8px;
+  margin: 22px 0px 6px 0px;
+  padding: 11px 17px;
+  color: #050709;
+  font-family: 'Trebuchet MS', Verdana, sans-serif;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.contents {
+  display: flex;
+  flex-flow: wrap;
+}
+.file {
+  flex-grow: 1;
+  min-width: 200px;
+  background: #DDD;
+  margin: 5px;
+  padding: 11px;
+}
+</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 66acda2..8a72ad6 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -37,17 +37,23 @@
 
     <h3>Ecosystem</h3>
     <LinkList :links="ecosystemLinks" />
+
+    <hr />
+
+    <FsExample />
   </div>
 </template>
 
 <script>
 import Vue from 'vue';
 
+import FsExample from '@/components/FsExample.vue';
 import LinkList from '@/components/LinkList.vue';
 
 export default {
   name: 'HelloWorld',
   components: {
+    FsExample,
     LinkList
   },
   props: {
@@ -157,7 +163,7 @@ export default {
   },
   computed: {
     devMode: function () {
-      return window.process.env.NODE_ENV === 'development';
+      return window.process.versions['nw-flavor'] === 'sdk';
     },
     versions: function () {
       return window.process.versions;