a4-lena-dias

.vscode/launch.json

@@ -0,0 +1,22 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Launch Chrome",
+            "request": "launch",
+            "type": "chrome",
+            "url": "http://127.0.0.1:3000",
+            "webRoot": "${workspaceFolder}"
+        },
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://127.0.0.1:3000",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

README.md

@@ -1,33 +1,14 @@
-Assignment 4 - Components
+Assignment 4 - Components (React version)
 ===
 
-Due: October 4th, by 11:59 AM.
-
-For this assignment you will re-implement the client side portion of *either* A2 or A3 using either React or Svelte components. If you choose A3 you only need to use components for the data display / updating; you can leave your login UI as is.
-
-[Svelte Tutorial](https://github.com/cs4241-21a/cs4241-21a.github.io/blob/main/using_svelte.md)  
-[React Tutorial](https://github.com/cs4241-21a/cs4241-21a.github.io/blob/main/using_react.md)  
-
-This project can be implemented on any hosting service (Glitch, DigitalOcean, Heroku etc.), however, you must include all files in your GitHub repo so that the course staff can view them.
-
-Deliverables
+Hosted at: https://a4-lena-dias.glitch.me/
 ---
 
-Do the following to complete this assignment:
-
-1. Implement your project with the above requirements.
-3. Test your project to make sure that when someone goes to your main page on Glitch/Heroku/etc., it displays correctly.
-4. Ensure that your project has the proper naming scheme `a4-firstname-lastname` so we can find it.
-5. Fork this repository and modify the README to the specifications below. Be sure to add *all* project files.
-6. Create and submit a Pull Request to the original repo. Name the pull request using the following template: `a4-firstname-lastname`.
-
-Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions)
+Student: Lena Dias
 ---
 
-## Your Web Application Title
-
-your hosting link e.g. http://a4-charlieroberts.glitch.me
-
-Include a very brief summary of your project here and what you changed / added to assignment #3. Briefly (3–4 sentences) answer the following question: did the new technology improve or hinder the development experience?
+### Summary
+A small to-do list that fetches data from a server and displays it on-screen using React. The project is basically identical to my A2 submission in function, but now uses the Snowpack bundler and React to display changes in data. This required some stripping tables from my HTML file and using the app div to insert items into a table rendered through React.
 
-Unlike previous assignments, this assignment will be solely graded on whether or not you successfully complete it. Partial credit will be generously given.
+### Did the new technology improve or hinder the development experience?
+I'd say that, at least for a project this small, the new tech was more of a hindrance than anything. While I could see React being useful for when you want to keep track of many changing elements on a page without much hassle, such as in the example, for something as simple as this is was somewhat overcomplicated. For a table of data, I had to do much more setup to achieve the same things, such as making the table update. Snowpack also made compiling on Glitch take quite a while.

build/App.js

@@ -0,0 +1,80 @@
+import React from "./_snowpack/pkg/react.js";
+class Todo extends React.Component {
+  render() {
+    return /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", null, this.props.taskname), /* @__PURE__ */ React.createElement("td", null, this.props.date), /* @__PURE__ */ React.createElement("td", null, this.props.timeleft));
+  }
+}
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {todos: []};
+    this.load();
+  }
+  load() {
+    fetch("/read", {method: "get", "no-cors": true}).then((response) => response.json()).then((json) => {
+      this.setState({todos: json});
+    });
+  }
+  render() {
+    return /* @__PURE__ */ React.createElement("div", {
+      className: "App"
+    }, /* @__PURE__ */ React.createElement("input", {
+      type: "text",
+      id: "taskname"
+    }), /* @__PURE__ */ React.createElement("input", {
+      type: "date",
+      id: "date"
+    }), /* @__PURE__ */ React.createElement("button", {
+      id: "add",
+      onClick: (e) => this.add(e)
+    }, "add"), /* @__PURE__ */ React.createElement("button", {
+      id: "remove",
+      onClick: (e) => this.remove(e)
+    }, "remove"), /* @__PURE__ */ React.createElement("div", {
+      class: "taskTableDiv"
+    }, /* @__PURE__ */ React.createElement("table", {
+      id: "taskTable"
+    }, this.state.todos.map((todo, i) => /* @__PURE__ */ React.createElement(Todo, {
+      key: i,
+      taskname: todo.taskname,
+      date: todo.date,
+      timeleft: todo.timeleft
+    })))));
+  }
+  add(evt) {
+    const task = document.querySelector("#taskname"), date = document.querySelector("#date"), json = {
+      taskname: task.value,
+      date: date.value
+    }, bodyToSend = JSON.stringify(json);
+    if (json.taskname === "" || json.date === "") {
+      alert("Cannot use empty task name or date");
+    } else {
+      fetch("/add", {
+        method: "POST",
+        body: bodyToSend,
+        headers: {"Content-Type": "application/json"}
+      }).then((response) => response.json()).then((json2) => {
+        this.setState({todos: json2});
+      });
+    }
+  }
+  remove(evt) {
+    evt.preventDefault();
+    const task = document.querySelector("#taskname"), date = document.querySelector("#date"), json = {
+      taskname: task.value,
+      date: date.value
+    }, body = JSON.stringify(json);
+    if (json.taskname === "") {
+      alert("Cannot use empty task name");
+    } else {
+      fetch("/remove", {
+        method: "POST",
+        body,
+        headers: {"Content-Type": "application/json"}
+      }).then((response) => response.json()).then((json2) => {
+        this.setState({todos: json2});
+      });
+    }
+  }
+}
+export default App;

build/_snowpack/pkg/common/index-3d8027a6.js

@@ -0,0 +1,87 @@
+function createCommonjsModule(fn, basedir, module) {
+	return module = {
+		path: basedir,
+		exports: {},
+		require: function (path, base) {
+			return commonjsRequire(path, (base === undefined || base === null) ? module.path : base);
+		}
+	}, fn(module, module.exports), module.exports;
+}
+
+function commonjsRequire () {
+	throw new Error('Dynamic requires are not currently supported by @rollup/plugin-commonjs');
+}
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var l=Symbol.for("react.element"),n=Symbol.for("react.portal"),p=Symbol.for("react.fragment"),q=Symbol.for("react.strict_mode"),r=Symbol.for("react.profiler"),t=Symbol.for("react.provider"),u=Symbol.for("react.context"),v=Symbol.for("react.forward_ref"),w=Symbol.for("react.suspense"),x=Symbol.for("react.memo"),y=Symbol.for("react.lazy"),z=Symbol.iterator;function A(a){if(null===a||"object"!==typeof a)return null;a=z&&a[z]||a["@@iterator"];return "function"===typeof a?a:null}
+var B={isMounted:function(){return !1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},C=Object.assign,D={};function E(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B;}E.prototype.isReactComponent={};
+E.prototype.setState=function(a,b){if("object"!==typeof a&&"function"!==typeof a&&null!=a)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,a,b,"setState");};E.prototype.forceUpdate=function(a){this.updater.enqueueForceUpdate(this,a,"forceUpdate");};function F(){}F.prototype=E.prototype;function G(a,b,e){this.props=a;this.context=b;this.refs=D;this.updater=e||B;}var H=G.prototype=new F;
+H.constructor=G;C(H,E.prototype);H.isPureReactComponent=!0;var I=Array.isArray,J=Object.prototype.hasOwnProperty,K={current:null},L={key:!0,ref:!0,__self:!0,__source:!0};
+function M(a,b,e){var d,c={},k=null,h=null;if(null!=b)for(d in void 0!==b.ref&&(h=b.ref),void 0!==b.key&&(k=""+b.key),b)J.call(b,d)&&!L.hasOwnProperty(d)&&(c[d]=b[d]);var g=arguments.length-2;if(1===g)c.children=e;else if(1<g){for(var f=Array(g),m=0;m<g;m++)f[m]=arguments[m+2];c.children=f;}if(a&&a.defaultProps)for(d in g=a.defaultProps,g)void 0===c[d]&&(c[d]=g[d]);return {$$typeof:l,type:a,key:k,ref:h,props:c,_owner:K.current}}
+function N(a,b){return {$$typeof:l,type:a.type,key:b,ref:a.ref,props:a.props,_owner:a._owner}}function O(a){return "object"===typeof a&&null!==a&&a.$$typeof===l}function escape(a){var b={"=":"=0",":":"=2"};return "$"+a.replace(/[=:]/g,function(a){return b[a]})}var P=/\/+/g;function Q(a,b){return "object"===typeof a&&null!==a&&null!=a.key?escape(""+a.key):b.toString(36)}
+function R(a,b,e,d,c){var k=typeof a;if("undefined"===k||"boolean"===k)a=null;var h=!1;if(null===a)h=!0;else switch(k){case "string":case "number":h=!0;break;case "object":switch(a.$$typeof){case l:case n:h=!0;}}if(h)return h=a,c=c(h),a=""===d?"."+Q(h,0):d,I(c)?(e="",null!=a&&(e=a.replace(P,"$&/")+"/"),R(c,b,e,"",function(a){return a})):null!=c&&(O(c)&&(c=N(c,e+(!c.key||h&&h.key===c.key?"":(""+c.key).replace(P,"$&/")+"/")+a)),b.push(c)),1;h=0;d=""===d?".":d+":";if(I(a))for(var g=0;g<a.length;g++){k=
+a[g];var f=d+Q(k,g);h+=R(k,b,e,f,c);}else if(f=A(a),"function"===typeof f)for(a=f.call(a),g=0;!(k=a.next()).done;)k=k.value,f=d+Q(k,g++),h+=R(k,b,e,f,c);else if("object"===k)throw b=String(a),Error("Objects are not valid as a React child (found: "+("[object Object]"===b?"object with keys {"+Object.keys(a).join(", ")+"}":b)+"). If you meant to render a collection of children, use an array instead.");return h}
+function S(a,b,e){if(null==a)return a;var d=[],c=0;R(a,d,"","",function(a){return b.call(e,a,c++)});return d}function T(a){if(-1===a._status){var b=a._result;b=b();b.then(function(b){if(0===a._status||-1===a._status)a._status=1,a._result=b;},function(b){if(0===a._status||-1===a._status)a._status=2,a._result=b;});-1===a._status&&(a._status=0,a._result=b);}if(1===a._status)return a._result.default;throw a._result;}
+var U={current:null},V={transition:null},W={ReactCurrentDispatcher:U,ReactCurrentBatchConfig:V,ReactCurrentOwner:K};var Children={map:S,forEach:function(a,b,e){S(a,function(){b.apply(this,arguments);},e);},count:function(a){var b=0;S(a,function(){b++;});return b},toArray:function(a){return S(a,function(a){return a})||[]},only:function(a){if(!O(a))throw Error("React.Children.only expected to receive a single React element child.");return a}};var Component=E;var Fragment=p;
+var Profiler=r;var PureComponent=G;var StrictMode=q;var Suspense=w;var __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=W;
+var cloneElement=function(a,b,e){if(null===a||void 0===a)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+a+".");var d=C({},a.props),c=a.key,k=a.ref,h=a._owner;if(null!=b){void 0!==b.ref&&(k=b.ref,h=K.current);void 0!==b.key&&(c=""+b.key);if(a.type&&a.type.defaultProps)var g=a.type.defaultProps;for(f in b)J.call(b,f)&&!L.hasOwnProperty(f)&&(d[f]=void 0===b[f]&&void 0!==g?g[f]:b[f]);}var f=arguments.length-2;if(1===f)d.children=e;else if(1<f){g=Array(f);
+for(var m=0;m<f;m++)g[m]=arguments[m+2];d.children=g;}return {$$typeof:l,type:a.type,key:c,ref:k,props:d,_owner:h}};var createContext=function(a){a={$$typeof:u,_currentValue:a,_currentValue2:a,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null};a.Provider={$$typeof:t,_context:a};return a.Consumer=a};var createElement=M;var createFactory=function(a){var b=M.bind(null,a);b.type=a;return b};var createRef=function(){return {current:null}};
+var forwardRef=function(a){return {$$typeof:v,render:a}};var isValidElement=O;var lazy=function(a){return {$$typeof:y,_payload:{_status:-1,_result:a},_init:T}};var memo=function(a,b){return {$$typeof:x,type:a,compare:void 0===b?null:b}};var startTransition=function(a){var b=V.transition;V.transition={};try{a();}finally{V.transition=b;}};var unstable_act=function(){throw Error("act(...) is not supported in production builds of React.");};
+var useCallback=function(a,b){return U.current.useCallback(a,b)};var useContext=function(a){return U.current.useContext(a)};var useDebugValue=function(){};var useDeferredValue=function(a){return U.current.useDeferredValue(a)};var useEffect=function(a,b){return U.current.useEffect(a,b)};var useId=function(){return U.current.useId()};var useImperativeHandle=function(a,b,e){return U.current.useImperativeHandle(a,b,e)};
+var useInsertionEffect=function(a,b){return U.current.useInsertionEffect(a,b)};var useLayoutEffect=function(a,b){return U.current.useLayoutEffect(a,b)};var useMemo=function(a,b){return U.current.useMemo(a,b)};var useReducer=function(a,b,e){return U.current.useReducer(a,b,e)};var useRef=function(a){return U.current.useRef(a)};var useState=function(a){return U.current.useState(a)};var useSyncExternalStore=function(a,b,e){return U.current.useSyncExternalStore(a,b,e)};
+var useTransition=function(){return U.current.useTransition()};var version="18.2.0";
+
+var react_production_min = {
+	Children: Children,
+	Component: Component,
+	Fragment: Fragment,
+	Profiler: Profiler,
+	PureComponent: PureComponent,
+	StrictMode: StrictMode,
+	Suspense: Suspense,
+	__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+	cloneElement: cloneElement,
+	createContext: createContext,
+	createElement: createElement,
+	createFactory: createFactory,
+	createRef: createRef,
+	forwardRef: forwardRef,
+	isValidElement: isValidElement,
+	lazy: lazy,
+	memo: memo,
+	startTransition: startTransition,
+	unstable_act: unstable_act,
+	useCallback: useCallback,
+	useContext: useContext,
+	useDebugValue: useDebugValue,
+	useDeferredValue: useDeferredValue,
+	useEffect: useEffect,
+	useId: useId,
+	useImperativeHandle: useImperativeHandle,
+	useInsertionEffect: useInsertionEffect,
+	useLayoutEffect: useLayoutEffect,
+	useMemo: useMemo,
+	useReducer: useReducer,
+	useRef: useRef,
+	useState: useState,
+	useSyncExternalStore: useSyncExternalStore,
+	useTransition: useTransition,
+	version: version
+};
+
+var react = createCommonjsModule(function (module) {
+
+{
+  module.exports = react_production_min;
+}
+});
+
+export { createCommonjsModule as c, react as r };

build/_snowpack/pkg/import-map.json

@@ -0,0 +1,6 @@
+{
+  "imports": {
+    "react": "./react.js",
+    "react-dom": "./react-dom.js"
+  }
+}