├── .prettierrc.js
├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── views
    │   ├── About.vue
    │   ├── ErrorDisplay.vue
    │   ├── EventDetails.vue
    │   ├── EventList.vue
    │   └── EventCreate.vue
    ├── main.js
    ├── services
    │   └── EventService.js
    ├── components
    │   └── EventCard.vue
    ├── router
    │   └── index.js
    ├── store
    │   └── index.js
    └── App.vue
├── .gitignore
├── README.md
├── db.json
└── package.json


/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   singleQuote: true,
3 |   semi: false
4 | }
5 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/cli-plugin-babel/preset"]
3 | };
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Pop/Vuex_Fundamentals/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Pop/Vuex_Fundamentals/HEAD/src/assets/logo.png


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="about">
3 |     <p>A site for events to better the world.</p>
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/views/ErrorDisplay.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h4>Oops! There was an error:</h4>
 3 |   <p>{{ error }}</p>
 4 | </template>
 5 | 
 6 | <script>
 7 | export default {
 8 |   props: ['error']
 9 | }
10 | </script>
11 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | 
 6 | createApp(App)
 7 |   .use(store)
 8 |   .use(router)
 9 |   .mount('#app')
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Intro to State Management
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/src/services/EventService.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios'
 2 | 
 3 | const apiClient = axios.create({
 4 |   baseURL: 'http://localhost:3000',
 5 |   withCredentials: false,
 6 |   headers: {
 7 |     Accept: 'application/json',
 8 |     'Content-Type': 'application/json'
 9 |   }
10 | })
11 | 
12 | export default {
13 |   getEvents() {
14 |     return apiClient.get('/events')
15 |   },
16 |   getEvent(id) {
17 |     return apiClient.get('/events/' + id)
18 |   },
19 |   postEvent(event) {
20 |     return apiClient.post('/events', event)
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/views/EventDetails.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-if="event">
 3 |     <h1>{{ event.title }}</h1>
 4 |     <p>{{ event.time }} on {{ event.date }} @ {{ event.location }}</p>
 5 |     <p>{{ event.description }}</p>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   props: ['id'],
12 |   created() {
13 |     this.$store.dispatch('fetchEvent', this.id)
14 |     .catch(error => {
15 |       this.$router.push({
16 |         name: 'ErrorDisplay',
17 |         params: { error: error }
18 |       })
19 |     })
20 |   },
21 |   computed: {
22 |     event() {
23 |       return this.$store.state.event
24 |     }
25 |   }
26 | }
27 | </script>
28 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/views/EventList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h1>Events for Good</h1>
 3 |   <div class="events">
 4 |     <EventCard v-for="event in events" :key="event.id" :event="event" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import EventCard from '@/components/EventCard.vue'
10 | 
11 | export default {
12 |   name: 'EventList',
13 |   components: {
14 |     EventCard
15 |   },
16 |   created() {
17 |     this.$store.dispatch('fetchEvents')
18 |     .catch(error => {
19 |       this.$router.push({
20 |         name: 'ErrorDisplay',
21 |         params: { error: error }
22 |       })
23 |     })
24 |   },
25 |   computed: {
26 |     events() {
27 |       return this.$store.state.events
28 |     }
29 |   }
30 | }
31 | </script>
32 | 
33 | <style scoped>
34 | .events {
35 |   display: flex;
36 |   flex-direction: column;
37 |   align-items: center;
38 | }
39 | </style>
40 | 


--------------------------------------------------------------------------------
/src/components/EventCard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <router-link
 3 |     class="event-link"
 4 |     :to="{ name: 'EventDetails', params: { id: event.id } }"
 5 |   >
 6 |     <div class="event-card">
 7 |       <span>@{{ event.time }} on {{ event.date }}</span>
 8 |       <h4>{{ event.title }}</h4>
 9 |     </div>
10 |   </router-link>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   props: {
16 |     event: {
17 |       type: Object,
18 |       required: true
19 |     }
20 |   }
21 | }
22 | </script>
23 | 
24 | <style scoped>
25 | .event-card {
26 |   padding: 20px;
27 |   width: 250px;
28 |   cursor: pointer;
29 |   border: 1px solid #39495c;
30 |   margin-bottom: 18px;
31 | }
32 | 
33 | .event-card:hover {
34 |   transform: scale(1.01);
35 |   box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
36 | }
37 | 
38 | .event-link {
39 |   color: #2c3e50;
40 |   text-decoration: none;
41 | }
42 | </style>
43 | 


--------------------------------------------------------------------------------
/db.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "events": [
 3 |     {
 4 |       "id": 123,
 5 |       "category": "animal welfare",
 6 |       "title": "Cat Adoption Day",
 7 |       "description": "Find your new feline friend at this event.",
 8 |       "location": "Meow Town",
 9 |       "date": "January 28, 2022",
10 |       "time": "12:00",
11 |       "organizer": "Kat Laydee"
12 |     },
13 |     {
14 |       "id": 456,
15 |       "category": "food",
16 |       "title": "Community Gardening",
17 |       "description": "Join us as we tend to the community edible plants.",
18 |       "location": "Flora City",
19 |       "date": "March 14, 2022",
20 |       "time": "10:00",
21 |       "organizer": "Fern Pollin"
22 |     },
23 |     {
24 |       "id": 789,
25 |       "category": "sustainability",
26 |       "title": "Beach Cleanup",
27 |       "description": "Help pick up trash along the shore.",
28 |       "location": "Playa Del Carmen",
29 |       "date": "July 22, 2022",
30 |       "time": "11:00",
31 |       "organizer": "Carey Wales"
32 |     }
33 |   ]
34 | }


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router'
 2 | import EventList from '../views/EventList.vue'
 3 | import EventDetails from '../views/EventDetails.vue'
 4 | import EventCreate from '../views/EventCreate.vue'
 5 | import ErrorDisplay from '../views/ErrorDisplay.vue'
 6 | import About from '../views/About.vue'
 7 | 
 8 | const routes = [
 9 |   {
10 |     path: '/',
11 |     name: 'EventList',
12 |     component: EventList
13 |   },
14 |   {
15 |     path: '/event/:id',
16 |     name: 'EventDetails',
17 |     props: true,
18 |     component: EventDetails
19 |   },
20 |   {
21 |     path: '/event/create',
22 |     name: 'EventCreate',
23 |     component: EventCreate
24 |   },
25 |   {
26 |     path: '/error/:error',
27 |     name: 'ErrorDisplay',
28 |     props: true,
29 |     component: ErrorDisplay
30 |   },
31 |   {
32 |     path: '/about',
33 |     name: 'About',
34 |     component: About
35 |   }
36 | ]
37 | 
38 | const router = createRouter({
39 |   history: createWebHistory(process.env.BASE_URL),
40 |   routes
41 | })
42 | 
43 | export default router
44 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "real-world-vue",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "uuid": "^8.3.2",
13 |     "vue": "^3.5.25",
14 |     "vue-router": "^4.6.3",
15 |     "vuex": "^4.1.0"
16 |   },
17 |   "devDependencies": {
18 |     "@vue/cli-plugin-babel": "~5.0.9",
19 |     "@vue/cli-plugin-eslint": "~5.0.9",
20 |     "@vue/cli-plugin-router": "~5.0.9",
21 |     "@vue/cli-plugin-vuex": "~5.0.9",
22 |     "@vue/cli-service": "~5.0.9",
23 |     "@vue/compiler-sfc": "^3.0.0-0",
24 |     "@vue/eslint-config-prettier": "^6.0.0",
25 |     "axios": "^0.21.1",
26 |     "babel-eslint": "^10.1.0",
27 |     "eslint": "^7.5.0",
28 |     "eslint-plugin-prettier": "^3.1.3",
29 |     "eslint-plugin-vue": "^7.0.0-0",
30 |     "json-server": "^0.17.4",
31 |     "prettier": "^1.19.1",
32 |     "whatwg-fetch": "^3.6.20"
33 |   },
34 |   "eslintConfig": {
35 |     "root": true,
36 |     "env": {
37 |       "node": true
38 |     },
39 |     "extends": [
40 |       "plugin:vue/vue3-essential",
41 |       "eslint:recommended",
42 |       "@vue/prettier"
43 |     ],
44 |     "parserOptions": {
45 |       "parser": "babel-eslint"
46 |     },
47 |     "rules": {}
48 |   },
49 |   "browserslist": [
50 |     "> 1%",
51 |     "last 2 versions",
52 |     "not dead"
53 |   ]
54 | }
55 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import EventService from '@/services/EventService'
 2 | import { createStore } from 'vuex'
 3 | 
 4 | export default createStore({
 5 |   state: {
 6 |     user: 'Adam Jahr',
 7 |     events: [],
 8 |     event: null
 9 |   },
10 |   mutations: {
11 |     ADD_EVENT(state, event) {
12 |       state.events.push(event)
13 |     },
14 |     SET_EVENTS(state, events) {
15 |       state.events = events
16 |     },
17 |     SET_EVENT(state, event) {
18 |       state.event = event
19 |     }
20 |   },
21 |   actions: {
22 |     createEvent({ commit }, event) {
23 |       return EventService.postEvent(event)
24 |         .then(() => {
25 |           commit('ADD_EVENT', event)
26 |           commit('SET_EVENT', event)
27 |         })
28 |         .catch(error => {
29 |           throw error
30 |         })
31 |     },
32 |     fetchEvents({ commit }) {
33 |       return EventService.getEvents()
34 |         .then(response => {
35 |           commit('SET_EVENTS', response.data)
36 |         })
37 |         .catch(error => {
38 |           throw error
39 |         })
40 |     },
41 |     fetchEvent({ commit, state }, id) {
42 |       const event = state.events.find(event => event.id === id)
43 |       if (event) {
44 |         commit('SET_EVENT', event)
45 |       } else {
46 |         return EventService.getEvent(id)
47 |           .then(response => {
48 |             commit('SET_EVENT', response.data)
49 |           })
50 |           .catch(error => {
51 |             throw error
52 |           })
53 |       }
54 |     }
55 |   }
56 | })
57 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="app">
  3 |     <div id="nav">
  4 |       <router-link :to="{ name: 'EventList' }">Events</router-link> |
  5 |       <router-link :to="{ name: 'About' }">About</router-link>
  6 |        |
  7 |       <router-link :to="{ name: 'EventCreate' }">Create Event</router-link>
  8 |     </div>
  9 |     <router-view />
 10 |   </div>
 11 | </template>
 12 | 
 13 | <style>
 14 | #app {
 15 |   font-family: Avenir, Helvetica, Arial, sans-serif;
 16 |   -webkit-font-smoothing: antialiased;
 17 |   -moz-osx-font-smoothing: grayscale;
 18 |   text-align: center;
 19 |   color: #2c3e50;
 20 | }
 21 | 
 22 | button {
 23 |   align-items: center;
 24 |   height: 50px;
 25 |   padding: 0 40px;
 26 |   background: linear-gradient(to right, #16c0b0, #84cf6a);
 27 |   color: #ffffff;
 28 |   border: none;
 29 |   border-radius: 6px;
 30 |   font-size: 18px;
 31 |   font-weight: 800;
 32 |   cursor: pointer;
 33 |   transition: all 0.2s linear;
 34 | }
 35 | 
 36 | button:hover {
 37 |   -webkit-transform: scale(1.02);
 38 |   transform: scale(1.01);
 39 |   box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.2);
 40 | }
 41 | 
 42 | h2 {
 43 |   font-size: 40px;
 44 |   font-weight: 700;
 45 | }
 46 | 
 47 | h3 {
 48 |   font-size: 25px;
 49 |   font-weight: 700;
 50 | }
 51 | 
 52 | h4 {
 53 |   font-size: 20px;
 54 |   font-weight: 700;
 55 | }
 56 | 
 57 | input {
 58 |   display: block;
 59 |   width: 100%;
 60 |   height: 30px;
 61 |   margin-bottom: 24px;
 62 | }
 63 | 
 64 | input[type=text] {
 65 |   padding: 0px 10px;
 66 | }
 67 | 
 68 | input:focus {
 69 |   border-color: #16c0b0;
 70 |   outline: 0;
 71 | }
 72 | 
 73 | 
 74 | #nav {
 75 |   padding: 30px;
 76 | }
 77 | 
 78 | #nav a {
 79 |   font-weight: bold;
 80 |   color: #2c3e50;
 81 | }
 82 | 
 83 | #nav a.router-link-exact-active {
 84 |   color: #42b983;
 85 | }
 86 | 
 87 | 
 88 | .form-container {
 89 |   display: flex;
 90 |   justify-content: center;
 91 |   flex-direction: column;
 92 |   align-items: center;
 93 |   margin-bottom: 10%;
 94 | }
 95 | 
 96 | select:focus {
 97 |   border-color: #16c0b0;
 98 |   outline: 0;
 99 | }
100 | </style>
101 | 


--------------------------------------------------------------------------------
/src/views/EventCreate.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <h1>Create an event</h1>
  3 | <div class="form-container">
  4 |   <form @submit.prevent="onSubmit">
  5 |     <label>Select a category: </label>
  6 |     <select v-model="event.category">
  7 |       <option
  8 |         v-for="option in categories"
  9 |         :value="option"
 10 |         :key="option"
 11 |         :selected="option === event.category"
 12 |       >{{ option }}</option>
 13 |     </select>
 14 | 
 15 |     <h3>Name & describe your event</h3>
 16 | 
 17 |     <label>Title</label>
 18 |     <input
 19 |       v-model="event.title"
 20 |       type="text"
 21 |       placeholder="Title"
 22 |     >
 23 | 
 24 |     <label>Description</label>
 25 |     <input
 26 |       v-model="event.description"
 27 |       type="text"
 28 |       placeholder="Description"
 29 |     />
 30 | 
 31 |     <h3>Where is your event?</h3>
 32 | 
 33 |     <label>Location</label>
 34 |     <input
 35 |       v-model="event.location"
 36 |       type="text"
 37 |       placeholder="Location"
 38 |     />
 39 | 
 40 |     <h3>When is your event?</h3>
 41 |     <label>Date</label>
 42 |     <input
 43 |       v-model="event.date"
 44 |       type="text"
 45 |       placeholder="Date"
 46 |     />
 47 | 
 48 |     <label>Time</label>
 49 |     <input
 50 |       v-model="event.time"
 51 |       type="text"
 52 |       placeholder="Time"
 53 |     />
 54 | 
 55 |     <button type="submit">Submit</button>
 56 |   </form>
 57 | </div>
 58 | </template>
 59 | 
 60 | <script>
 61 | import { v4 as uuidv4 } from 'uuid'
 62 | export default {
 63 |   data () {
 64 |     return {
 65 |       categories: [
 66 |         'sustainability',
 67 |         'nature',
 68 |         'animal welfare',
 69 |         'housing',
 70 |         'education',
 71 |         'food',
 72 |         'community'
 73 |       ],
 74 |       event: this.freshEventObject()
 75 |     }
 76 |   },
 77 |   methods: {
 78 |     onSubmit() {
 79 |       this.$store.dispatch('createEvent', this.event)
 80 |       .then( () => {
 81 |         this.freshEventObject() // correct placement?
 82 |         this.$router.push({
 83 |           name: 'EventDetails',
 84 |           params: { id: this.event.id }
 85 |         })
 86 |       })
 87 |       .catch( error => {
 88 |         this.$router.push({
 89 |           name: 'ErrorDisplay',
 90 |           params: { error: error }
 91 |         })
 92 |       })
 93 |     },
 94 |     freshEventObject() {
 95 |       const id = uuidv4()
 96 |       const user = this.$store.state.user
 97 | 
 98 |       return {
 99 |         id: id,
100 |         category: '',
101 |         title: '',
102 |         description: '',
103 |         location: '',
104 |         date: '',
105 |         time: '',
106 |         organizer: user
107 |       }
108 |     }
109 |   }
110 | }
111 | </script>


--------------------------------------------------------------------------------