Long overdue initial commit, created Layout(Header and Footer), TaskL…

…ist, TaskCard, and ButtonForm components, along with redux folders, and stylings for all components etc.
Alan-eMartin · Oct 21, 2020 · e4a2098 · e4a2098
1 parent 7353d47
commit e4a2098
Show file tree

Hide file tree

Showing 28 changed files with 15,569 additions and 10,951 deletions.
diff --git a/.gitignore b/.gitignore
@@ -17,6 +17,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.vscode
 
 npm-debug.log*
 yarn-debug.log*

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,12 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "node-sass": "^4.14.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "react-scripts": "3.4.3"
+    "react-redux": "^7.2.1",
+    "react-scripts": "3.4.3",
+    "redux": "^4.0.5",
+    "uuid": "^8.3.1"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -24,6 +24,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Pacifico&display=swap"
+      rel="stylesheet">
     <title>React App</title>
   </head>
   <body>

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.js b/src/App.js
diff --git a/src/app/App.js b/src/app/App.js
@@ -0,0 +1,36 @@
+import React  from 'react';
+import '../styles/App.scss';
+// Components
+import Layout from '../components/Layout/index';
+import TaskList from '../components/TaskList';
+import ButtonForm from '../components/ButtonForm/index'
+// Redux
+import { connect } from 'react-redux'
+
+const App = (props) => {
+
+  const { list } = props;
+
+  return (
+    <div className='App'>
+      <Layout>
+        {
+          list.map(list => (
+            <TaskList
+              title={list.title}
+              cards={list.cards}
+              key={list.id}
+            />
+          ))
+        }
+        <ButtonForm list/>
+      </Layout>
+    </div>
+  );
+}
+
+const mapStateToProps = state => ({
+  list: state.list,
+})
+
+export default connect(mapStateToProps) (App);
diff --git a/src/App.test.js → src/app/App.test.js b/src/App.test.js → src/app/App.test.js
diff --git a/src/components/ButtonForm/index.js b/src/components/ButtonForm/index.js
@@ -0,0 +1,98 @@
+import React, {useState, useEffect } from 'react';
+import AddIcon from '@material-ui/icons/Add';
+import CloseIcon from '@material-ui/icons/Close';
+import './style.scss';
+
+const ButtonForm = (props) => {
+  // State
+  const [openForm, setOpenForm] = useState(false)
+  const [text, setText] = useState('')
+
+  // Props
+  const { list } = props;
+
+  // Open
+  const open = () => {
+    setOpenForm(!openForm)
+  }
+
+  // Close
+  const close = () => {
+    setOpenForm(false)
+  }
+
+  // Handle Textfield Change
+  const handleInputChange = (e) => {
+    setText(e.target.value)
+  }
+
+  // Handle Textfield Submit
+  const handleSubmit = (e) => {
+    e.preventDefault()
+  }
+
+  // Conditional Button
+  const renderButton = () => {
+    const buttonText = list ? 'Add another list' : 'Add another card';
+
+    return (
+      <button 
+        className={list ? 'add-list-button' : 'add-card-button'}
+        onClick={() => open()}
+      >
+        <span className="add-button-text">
+          <AddIcon /> {buttonText}
+        </span>
+      </button>
+    )
+  } 
+
+  // Conditional Form
+  const renderForm = () => {
+
+    const placeholder = list 
+      ? 'Enter a title for this list...' 
+      : 'Enter a title for this card...'; 
+
+    const title = list
+      ? 'Add List' 
+      : 'Add Card';
+
+    return (
+      <>
+        <form 
+          className={list ? 'add-list-form' : 'add-card-form'}
+        >
+          <textarea
+            className={list ? 'task-list add-list-input' :'add-card-input'}
+            placeholder={placeholder}
+            value={text}
+            onBlur={() => close()}
+            onChange={handleInputChange}
+            autoFocus
+          />
+          <div className="form-button-container">
+            <button
+              className={list ? 'add-list-input-button' : 'add-card-input-button'}
+              title={title}
+              onSubmit={() => handleSubmit()}
+            >
+              {title}
+            </button>
+            <button 
+              className="close-form-button"
+              onClick={() => close()}
+            >
+              <CloseIcon fontSize={"large"}/>
+            </button>
+          </div>
+
+        </form>
+      </>
+    );
+  }
+
+  return  openForm ? renderForm() : renderButton()
+}
+
+export default ButtonForm;
diff --git a/src/components/ButtonForm/style.scss b/src/components/ButtonForm/style.scss
@@ -0,0 +1,103 @@
+// Button Styles
+button {
+  padding: none;
+  font-size: 1.5rem;
+  padding: 1rem;
+  transition: all 0.2s;
+  border: none;
+  background-color: transparent;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.add-card-button,
+.add-list-button {
+  width: 100%;
+  border-radius: 0.5rem;
+  transition: all 0.05s ease-in;
+  text-align: left;
+  transition: all 0.2s;
+}
+
+.add-card-button {
+  span {
+    opacity: 0.7;
+
+    &:focus,
+    &:hover {
+      opacity: 1;
+      cursor: pointer;
+    }
+  }
+
+  &:focus,
+  &:hover {
+    background-color: #d9dce2;
+  }
+}
+
+.add-list-button {
+  margin-top: 1rem;
+  background-color: #ebecf080;
+  width: 300px;
+  height: 100%;
+
+  &:focus,
+  &:hover {
+    background-color: #ebecf095;
+  }
+
+  span {
+    color: #fff;
+  }
+}
+
+// Form Styles
+
+.add-card-input-button,
+.add-list-input-button {
+  background-color: #5aac44;
+  color: #fff;
+  border: 0.05rem solid #bbbbbb;
+  border-radius: 0.5rem;
+
+  &:focus,
+  &:hover {
+    background-color: lighten(#5aac44, 10%);
+  }
+}
+
+.form-button-container {
+  display: flex;
+}
+
+.close-form-button {
+  color: lighten(#000, 30%);
+
+  &:focus,
+  &:hover {
+    color: #000;
+  }
+}
+
+.add-list-form {
+  margin-top: 1rem;
+  height: 100%;
+  background-color: #ffffffdc;
+  padding: 1rem;
+}
+
+.add-list-form,
+.add-list-input {
+  border-radius: 0.5rem;
+}
+
+.add-list-input {
+  width: 100%;
+  min-width: 300px;
+  margin-bottom: 1rem;
+  padding: 1rem;
+  border: 0.2rem solid #0079bf;
+}
diff --git a/src/components/Layout/Footer/index.js b/src/components/Layout/Footer/index.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import './style.scss';
+
+const Footer = () => {
+  return (
+    <footer className="footer">
+      <p className="copyright">
+        Created by <a href="alan-martin.dev" title='Click here to visit alan-martin.dev'>Alan Martin &copy;</a>
+      </p>
+    </footer>
+  )
+}
+
+export default Footer;
diff --git a/src/components/Layout/Footer/style.scss b/src/components/Layout/Footer/style.scss
@@ -0,0 +1,14 @@
+.footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  height: 3rem;
+
+  a {
+    color: black;
+  }
+}
diff --git a/src/components/Layout/Header/index.js b/src/components/Layout/Header/index.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import './style.scss';
+
+const Header = () => {
+  return (
+    <header className="header">
+        <h1 className='site-title'>Trello Clone</h1>
+    </header>
+  )
+}
+
+export default Header;