🚀 Initial project seed

pwolf15 · Nov 12, 2017 · a9d5e6c · a9d5e6c
commit a9d5e6c
Show file tree

Hide file tree

Showing 14 changed files with 2,909 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,20 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,8 @@
+_site
+.git
+.sass-cache
+.jekyll-metadata
+node_modules
+.DS_Store
+.idea
+npm-debug.log
diff --git a/README.md b/README.md
@@ -0,0 +1,50 @@
+<h1 align="center">Simple Redux Store</h1>
+<h4 align="center">Vanilla TypeScript example of a Redux Store</h4>
+
+---
+
+<a href="https://ultimateangular.com" target="_blank"><img src="https://ultimateangular.com/assets/img/banner.jpg"></a>
+
+---
+
+> This repo serves as the seed project for the Ultimate Angular NGRX Store + Effects course, as well as stepped solutions in separate branches, come and [learn NGRX](https://ultimateangular.com/ngrx-store-effects) with us!
+
+## Prerequisites
+
+* Install [Node.js](https://nodejs.org/en/download/)
+
+* Install TypeScript
+
+```bash
+npm install -g typescript
+```
+
+* Install Yarn (optional)
+
+If you want to roll with npm, feel free to do so. If you'd like to try Yarn, run the following or [another installation method](https://yarnpkg.com/lang/en/docs/install/):
+
+```bash
+npm install -g yarn
+```
+
+## Setup
+
+#### Installing dependencies
+
+```bash
+cd <redux-store-project>
+
+yarn install
+# OR
+npm install
+```
+
+#### Local server
+
+```bash
+yarn start
+# OR
+npm start
+```
+
+Visit [localhost:8000](localhost:8000) in your browser.
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Store</title>
+  </head>
+  <body>
+    <div id="app">
+      <p>You have <span></span> todos.</p>
+      <input type="text">
+      <button type="button">Add todo</button>
+      <ul class="todos"></ul>
+      <button type="button" class="unsubscribe">Unsubscribe</button>
+    </div>
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "store",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "start": "webpack-dev-server"
+  },
+  "devDependencies": {
+    "awesome-typescript-loader": "3.2.3",
+    "typescript": "2.5.3",
+    "webpack": "2.2.0",
+    "webpack-dev-server": "2.2.0"
+  }
+}
diff --git a/src/app.ts b/src/app.ts
@@ -0,0 +1,27 @@
+import { renderTodos } from './utils';
+
+const input = document.querySelector('input') as HTMLInputElement;
+const button = document.querySelector('button') as HTMLButtonElement;
+const destroy = document.querySelector('.unsubscribe') as HTMLButtonElement;
+const todoList = document.querySelector('.todos') as HTMLLIElement;
+
+button.addEventListener(
+  'click',
+  () => {
+    if (!input.value.trim()) return;
+
+    const payload = { label: input.value, complete: false };
+
+    console.log(payload);
+
+    input.value = '';
+  },
+  false
+);
+
+todoList.addEventListener('click', function(event) {
+  const target = event.target as HTMLButtonElement;
+  if (target.nodeName.toLowerCase() === 'button') {
+    console.log(target);
+  }
+});
diff --git a/src/store/actions.ts b/src/store/actions.ts
diff --git a/src/store/index.ts b/src/store/index.ts
diff --git a/src/store/reducers.ts b/src/store/reducers.ts
diff --git a/src/store/store.ts b/src/store/store.ts
diff --git a/src/utils.ts b/src/utils.ts
@@ -0,0 +1,17 @@
+const span = document.querySelector('span') as HTMLSpanElement;
+const todoList = document.querySelector('.todos') as HTMLLIElement;
+
+export function renderTodos(collection) {
+  span.innerHTML = collection.length;
+  todoList.innerHTML = '';
+  for (const item of collection) {
+    todoList.innerHTML += `
+    	<li>
+	      ${item.label}
+        <button type="button" data-todo='${JSON.stringify(item)}'>
+          Delete
+        </button>
+      </li>
+     `;
+  }
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "allowJs": true,
+    "outDir": "dist",
+    "noEmitOnError": true,
+    "strictNullChecks": true,
+    "sourceMap": false,
+    "experimentalDecorators": true
+  }
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,21 @@
+module.exports = {
+  entry: './src/app.ts',
+  output: {
+    filename: 'app.js',
+    path: __dirname + '/dist/',
+  },
+  devServer: {
+    port: 8000,
+  },
+  resolve: {
+    extensions: ['.ts', '.js'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        use: 'awesome-typescript-loader',
+      },
+    ],
+  },
+};