adding latest

links.md

@@ -1,30 +1,78 @@
-Vue resources/references
+# Vue resources/references
+
+## Javascript
+
+Babel ES2015 guide (good overview to JS)
+<https://babeljs.io/docs/en/learn>
+
+## Interesting projects/things
+
+### Strapi
+
+<https://strapi.io/>
+
+Strapi is a opensource headless CMS. You can self-host and use it as an admin page to generate content. You can then write a front-end, and have it consume your Strapi endpoints to display content.
+
+A good tutorial to follow is:
+
+<https://strapi.io/blog/build-a-blog-using-nuxt-strapi-and-apollo/>
+
+This will use Nuxt and Strapi to create a blog.
+
+### Pug
+
+<https://itnext.io/pug-js-to-make-your-life-easier-with-html-templates-9c62273626e0?gi=1d44eb088155>
+
+Pug is a HTML templating engine that lets you write simplified HTML which it will render into full html. It has additional features, like loops/condititons/includes to do fancier stuff than with pure HTML.
+
+## Vuejs
+
+### General (vue)
 
 Awesome Vue
-https://github.com/ais-one/vue-crud-x
+<https://github.com/ais-one/vue-crud-x>
+
+### Extensions
 
 Real time data-table editing in Vue:
-https://www.freecodecamp.org/news/how-to-build-a-real-time-editable-data-table-in-vue-js-46b7f0b11684/
+<https://www.freecodecamp.org/news/how-to-build-a-real-time-editable-data-table-in-vue-js-46b7f0b11684/>
 
 Integrating a datetime into a datatable CRUD:
-https://www.reddit.com/r/vuejs/comments/apdm4u/how_to_integrate_a_datepicker_like_this_in/
+<https://www.reddit.com/r/vuejs/comments/apdm4u/how_to_integrate_a_datepicker_like_this_in/>
 
 Vuetify CRUD datatables:
-https://github.com/ais-one/vue-crud-x
+<https://github.com/ais-one/vue-crud-x>
 
 Loading bar component for top of page:
-https://medium.com/js-dojo/how-to-visualize-application-loading-state-in-vuetify-44f0f0242094
-https://gist.github.com/AlexeyIsavnin/c24d7ae75bfdb599907bd36d6bfc0344
+<https://medium.com/js-dojo/how-to-visualize-application-loading-state-in-vuetify-44f0f0242094>
+<https://gist.github.com/AlexeyIsavnin/c24d7ae75bfdb599907bd36d6bfc0344>
+
+### Tutorials/Guides (vue)
 
 Using AJAX and rate limiting with lodash:
-https://vuejs.org/v2/guide/computed.html#Watchers
+<https://vuejs.org/v2/guide/computed.html#Watchers>
+
+### References
 
 Composition API in Vue3:
-https://css-tricks.com/an-early-look-at-the-vue-3-composition-api-in-the-wild/?ref=madewithvuejs.com
+<https://css-tricks.com/an-early-look-at-the-vue-3-composition-api-in-the-wild/?ref=madewithvuejs.com>
 
-Libraries that work with Vue:
+## Interesting designs
 
-JS library to simplify working with arrays, numbers, objects, strings, etc.
+### Sites
 
+- <https://binbytes.com>
 
-- Document steps of creating js files for aws
+### Fonts
+
+- `Rene bieder campton`
+
+## Nuxt
+
+### General (nuxt)
+
+<https://github.com/nuxt-community/awesome-nuxt>
+
+### Tutorials/Guides (nuxt)
+
+<https://strapi.io/blog/build-a-blog-using-nuxt-strapi-and-apollo/>

notes.md

@@ -333,3 +333,113 @@ Portals will literally render the data where it needs to, then transport it to w
 
 Advanced Vue Component Design course
 https://adamwathan.me/advanced-vue-component-design/
+
+
+
+## javascript
+
+### new
+
+Javascript isn't like python where you can map an object to something else using ducktyping. In javascript if you want to map an object to something else, you need to use `new`.
+
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new
+
+```javascript
+function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+
+const car1 = new Car('Eagle', 'Talon TSi', 1993);
+
+console.log(car1.make);
+// expected output: "Eagle"
+```
+
+## Adding custom CSS site-wide
+https://css-tricks.com/how-to-import-a-sass-file-into-every-vue-component-in-an-app/
+https://joshuatz.com/posts/2019/vue-mixing-sass-with-scss-with-vuetify-as-an-example/#easy-solution
+
+Custom css (to apply a font for example) can be done so you don't need to import a `css` file in each component.
+
+All fonts should go in `./src/assets/fonts`.
+
+1. Create `./src/scss/_variables.scss`
+2. In here create any custom css you need
+
+```scss
+@font-face {
+  font-family: "Campton";
+  src: url("~@/assets/fonts/Rene_Bieder-Campton_Medium.otf") format("opentype");
+}
+
+$my-font-family: "Campton", sans-serif !default;
+
+@import "~vuetify/src/styles/styles.sass";
+$body-font-family: "Times New Roman", Times, serif;
+
+@import "~vuetify/src/styles/settings/variables";
+$body-font-family: "Times New Roman", Times, serif;
+
+$mycol: purple;
+```
+
+3. Create `vue.config.js` in the root of the project (next to `package.json`).
+4. Add the following to compile custom css:
+
+```javascript
+module.exports = {
+  css: {
+    loaderOptions: {
+      scss: {
+        // sassOptions: { indentedSyntax: true },
+        prependData: `
+          @import "@/scss/_variables.scss";
+        `
+      }
+    }
+  },
+  transpileDependencies: ["vuetify"]
+};
+```
+5. In `App.vue` you can set the font for the whole project.
+
+```scss
+#app {
+  font-family: "Campton", sans-serif, Arial, Helvetica,;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: $mycol;
+  margin-top: 60px;
+}
+```
+
+## Import shortcuts using `@`
+
+Both `~@` and `@` resolve to `./src`.
+
+You use `~@` when in Vue components/js when set up with the vue cli.
+
+You use `@` when in `scss`/`css` files - it's provided by webpack.
+
+
+## Import and syntax
+https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
+
+https://vueschool.io/articles/vuejs-tutorials/lazy-loading-and-code-splitting-in-vue-js/
+
+In javascript you can use several ways to import modules.
+
+`import { function } from "module";` is used if you want to import a specific function/class etc from a `.js` file. You can chain the imports with a comma between them. These have to be javascript objects.
+
+`import defaultExport from "module";` is used to import the default exports from a `.js` file. The name you give it you will use to reference it (like doing `import module as name` in python).
+
+You can also use lazy loading - only loading the components/modules you need when you need them. You can see this being used in the `./src/router/index.js`
+
+```javascript
+component: () =>
+      import(/* webpackChunkName: "signup" */ "../views/SignUp.vue")
+```
+
+The difference between `require` and `import`: `import` is better to use as it's a function, whereas `require` is a js library. `require` is synchronous but `import` can be asynchronous, and supports lazy loading.

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <v-card color="grey lighten-4" flat height="200px">
+    <v-card color="grey lighten-4" flat height="100px">
       <v-toolbar :color="''" :dark="true">
         <v-app-bar-nav-icon></v-app-bar-nav-icon>
         <v-toolbar-title>AWS Login Tutorial</v-toolbar-title>
@@ -16,27 +16,75 @@
         </v-btn>
       </v-toolbar>
     </v-card>
+    <v-app>
       <div id="nav">
-      <!-- <router-link to="/">Home</router-link> -->
+        <router-link to="/">Home</router-link>
         <router-link to="/about">About</router-link>
         <router-link to="/signUp">Sign Up</router-link>
         <router-link to="/signupConfirm">Confirm</router-link>
         <router-link to="/signIn">Sign In</router-link>
       </div>
       <router-view></router-view>
+      <br />
+      <!-- <h1 v-if="this.email != null"> -->
+      <h1 v-if="this.userEmail != null">Hello {{ this.userEmail }}</h1>
+      <h1 v-else>Welcome!</h1>
+      <v-col cols="2">
+        <v-row justify-center>
+          <v-card class="pa-2 ma-2"
+            ><v-btn large color="primary" @click="dosignOut"
+              >Sign Out</v-btn
+            ></v-card
+          ></v-row
+        ></v-col
+      >
+    </v-app>
   </div>
 </template>
 
 <script>
-export default {};
+import { signOut } from "./utils/auth";
+// import { mapGetters } from "vuex";
+export default {
+  data() {
+    return {
+      email: null
+    };
+  },
+computed: {
+  userEmail() {
+    return this.$store.state.userEmail
+  }
+},
+  async created() {
+    try {
+      await this.$store.dispatch("fetchUser");
+    } catch (error) {
+      console.log(error);
+    } finally {
+      console.log("finally")
+      console.log(this.email)
+      console.log(this.$store.state.userEmail)
+      // this.email = this.$store.state.userEmail;
+    }
+  },
+  methods: {
+    async dosignOut() {
+      signOut();
+      this.$store.commit("user", null);
+      this.$store.commit("userEmail", null);
+      this.email = this.$store.userEmail;
+    }
+  }
+};
 </script>
 
-<style scoped>
+<style lang="scss">
 #app {
-  font-family: "Avenir", Arial, Helvetica, sans-serif;
+  font-family: "Campton", sans-serif, Arial, Helvetica;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
+  color: $mycol;
   margin-top: 60px;
 }
 </style>

src/router/index.js

@@ -81,7 +81,7 @@ AmplifyEventBus.$on("authState", async state => {
   }
 });
 
-router.beforeResolve(async (to, from, next) => {
+router.beforeResolve(async (to, _from, next) => {
   console.log("router before resolve getting current user.")
   const user = await getUser();
   if (!user) {

src/scss/_variables.scss

@@ -0,0 +1,15 @@
+@font-face {
+  font-family: "Campton";
+  src: url("~@/assets/fonts/Rene_Bieder-Campton_Medium.otf") format("opentype");
+}
+
+// src/sass/main.scss
+$my-font-family: "Campton", sans-serif !default;
+
+@import "~vuetify/src/styles/styles.sass";
+$body-font-family: $my-font-family;
+
+@import "~vuetify/src/styles/settings/variables";
+$body-font-family: $my-font-family;
+
+$mycol: #1f366a;

src/store/index.js

@@ -4,36 +4,46 @@ import { Auth } from "aws-amplify";
 
 Vue.use(Vuex);
 
-export default new Vuex.Store({
+const store = new Vuex.Store({
   state: {
     authorized: false,
-    user: null
+    user: null,
+    userEmail: null
   },
   mutations: {
     user(state, user) {
       state.authorized =
         !!user && user.attributes && user.attributes.email_verified;
       state.user = user;
+    },
+    userEmail(state, userEmail) {
+      state.userEmail = userEmail;
     }
   },
   actions: {
     async fetchUser({ commit }) {
       try {
-        const user = await Auth.currentAuthenticatedUser()
+        const user = await Auth.currentAuthenticatedUser();
         const expires =
           user.getSignInUserSession().getIdToken().payload.exp -
           Math.floor(new Date().getTime() / 1000);
         console.log(`Token expires in ${expires} seconds.`);
         commit("user", user);
+        commit("userEmail", user.attributes.email);
       } catch (err) {
         commit("user", null);
+        commit("userEmail", null);
       }
     }
   },
   modules: {},
-  getters: {
-    userEmail: state => {
-      return state.user.attributes.email;
-    }
-  }
+  // getters: {
+  //   userEmail: state => {
+  //     return state.userEmail;
+  //   }
+  // }
 });
+
+// store.dispatch.fetchUser()
+
+export default store;

src/utils/auth.js

@@ -3,7 +3,7 @@ import { AmplifyEventBus } from "aws-amplify-vue";
 
 async function getUser() {
   console.log("getting current user")
-  return await Auth.currentAuthenticatedUser()
+  return Auth.currentAuthenticatedUser()
     .then(user => {
       if (user && user.signInUserSession) {
         console.log("returning current signed in user")
@@ -51,7 +51,7 @@ async function confirmSignUp(username, code) {
   console.log(user);
 }
 
-function resendSignUp(username) {
+async function resendSignUp(username) {
   return Auth.resendSignUp(username)
     .then(() => {
       return "Success";
@@ -89,16 +89,17 @@ async function signIn(username, password) {
   }
 }
 
-function signOut() {
-  return Auth.signOut()
-    .then(data => {
+async function signOut() {
+  try {
+    const data = await Auth.signOut();
     AmplifyEventBus.$emit("authState", "signedOut");
+    // this.$store.dispatch("fetchUser")
     return data;
-    })
-    .catch(err => {
+  }
+  catch (err) {
     console.log(err);
     return err;
-    });
+  }
 }
 
 export { getUser, signUp, confirmSignUp, resendSignUp, signIn, signOut };

src/views/Home.vue

@@ -1,28 +1,11 @@
 <template>
   <div>
-    <h1>Hello {{ this.currentUser }}</h1>
+    <!-- <h1>Hello {{ this.$store.getters.userEmail }}</h1> -->
   </div>
 </template>
 
 <script>
-import { mapGetters } from "vuex";
-export default {
-  async mounted() {
-    await this.$store.dispatch("fetchUser");
-  },
-  computed: {
-    ...mapGetters({ currentUser: "userEmail" })
-  },
-  methods: {
-    getUser() {
-      try {
-        return this.$store.getters.userEmail;
-      } catch (TypeError) {
-        // pass}
-      }
-    }
-  }
-};
+
 </script>
 
 <style lang="scss" scoped></style>

src/views/SignIn.vue

@@ -64,7 +64,13 @@ export default {
         console.log(
           `SIGN IN username: ${this.username}, password: ${this.password}`
         );
+        try {
           await signIn(this.username, this.password);
+        } catch (err) {
+          console.log(err);
+        } finally {
+          this.$store.dispatch("fetchUser");
+        }
         console.log("Signed in");
       }
     }

vue.config.js

@@ -1,5 +1,13 @@
 module.exports = {
-  "transpileDependencies": [
-    "vuetify"
-  ]
-}
+  css: {
+    loaderOptions: {
+      scss: {
+        // sassOptions: { indentedSyntax: true },
+        prependData: `
+          @import "@/scss/_variables.scss";
+        `
+      }
+    }
+  },
+  transpileDependencies: ["vuetify"]
+};