Created pop-up window for card, started coding fetch requests

anetlyorg · Feb 20, 2022 · cb66279 · cb66279
1 parent fa005a9
commit cb66279
Show file tree

Hide file tree

Showing 9 changed files with 184 additions and 29 deletions.
diff --git a/client/App.jsx b/client/App.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
-import GithubText from './GithubTest';
+import Login from './components/Login.jsx';
 import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
 import Dashboard from './containers/Dashboard.jsx';
 
 function App() {
   return (
     <div className='App'>
-      <GithubText />
+      <Login />
       <CssBaseline />
       {/* <h1>Test</h1> */}
       <Dashboard />

diff --git a/client/components/Card.jsx b/client/components/Card.jsx
@@ -1,12 +1,15 @@
 import React, { useState, useEffect } from 'react';
 
 function Card(props) {
+  function handleClick () {
+    console.log('Hello Card', props.cards);
+  }  
 
-    return(
-        <div>
-            <h3>{ props.cards }</h3>
-        </div>
-    )
+  return(
+    <div onClick={handleClick} style={{cursor : 'pointer'}}>
+      <h3>{ props.cards }</h3>
+    </div>
+  );
 }
 
 export default Card;
diff --git a/client/components/ExpandedCard.css b/client/components/ExpandedCard.css
@@ -0,0 +1,25 @@
+.ExpandedCard {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.2);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.ExpandedCard-inner {
+    position: relative;
+    padding: 32px;
+    width: 100%;
+    max-width: 640px;
+    background-color: white
+}
+
+.ExpandedCard-inner .close-btn {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+}
diff --git a/client/components/ExpandedCard.jsx b/client/components/ExpandedCard.jsx
@@ -0,0 +1,21 @@
+import React, { useState, useEffect } from 'react';
+import './ExpandedCard.css';
+
+function ExpandedCard(props) {
+
+  return (props.trigger) ? (
+    <div className="ExpandedCard">
+      <div className="ExpandedCard-inner">
+        <button className="close-btn" onClick={() => props.setTrigger(false)}>close</button>
+        <form action='' onSubmit={(e) => props.cardSubmit(e)}>
+          <input type='text' placeholder='Select emoji...' onChange={(e) => props.emojiTextEntry(e)} value={props.emojiText}/><br></br>
+          <input type='text' placeholder='Add subtopic title...' onChange={(e) => props.cardTextEntry(e)} value={props.cardText}/><br></br>
+          <input type='text' placeholder='Add subtopic body...' onChange={(e) => props.bodyTextEntry(e)} value={props.bodyText}/><br></br>
+          <input type='submit' value="Save Subtopic"/>
+        </form>
+      </div>
+    </div>
+  ) : '';
+}
+
+export default ExpandedCard;
diff --git a/client/components/Login.jsx b/client/components/Login.jsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+export default function App() {
+
+  const handleClick = () => {
+    const CLIENT_ID = '27337f49cf34f7d2d21b';
+    const url = 'https://github.com/login/oauth/authorize?' 
+    + 'scope=user,repo&'
+    + 'redirect_uri=http://localhost:3000/github/callback&'
+    + 'client_id=' + CLIENT_ID;
+    window.location.href = url;
+  };
+  return (
+    <>
+      <button onClick={handleClick}>github</button>
+    </>
+  );
+}
diff --git a/client/components/Topic.jsx b/client/components/Topic.jsx
@@ -1,12 +1,15 @@
 import React, { useState, useEffect } from 'react';
 
 function Topic(props) {
-
-    return(
-        <div>
-            <h3>{ props.topics }</h3>
-        </div>
-    )
+  function handleClick () {
+    console.log('Hello Topic', props.topics);
+    fetch(`http://localhost:3000/api/subtopic/${topic_id}`)
+  }
+  return(
+    <div onClick={handleClick} style={{cursor : 'pointer'}}>
+      <h3>{ props.topics }</h3>
+    </div>
+  );
 }
 
 export default Topic;
diff --git a/client/containers/CardContainer.jsx b/client/containers/CardContainer.jsx
@@ -1,23 +1,35 @@
 import React, { useState } from 'react';
 import Card from '../components/Card.jsx';
+import ExpandedCard from '../components/ExpandedCard.jsx';
 
 function CardContainer(props) {
+  const [ buttonPopup, setButtonPopup ] = useState(false);
   const cardsFeed = [];
-  // iterate through props.cards
   for (let i = 0; i < props.cards.length; i++) {
     cardsFeed.push(<Card key={i} cards={props.cards[i]} />);
   }
 
   return(
-    <div>
-      <h2>Card Container</h2>
-      <form action='' onSubmit={(e) => props.cardSubmit(e)}>
-        <input type='text' onChange={(e) => props.cardTextEntry(e)} value={props.cardText}/>
-        <input type='submit' />
-      </form> 
+    <div className="CardContainer">
+      <h2>Resources</h2>
+      <button onClick={() => setButtonPopup(true)}>Add Subtopic</button>
       {cardsFeed}
+      <ExpandedCard 
+        trigger={buttonPopup} 
+        setTrigger={setButtonPopup}
+        bodyText={props.bodyText} 
+        emojis={props.emojis} 
+        emojiText={props.emojiText} 
+        bodies={props.bodies} 
+        cards={props.cards} 
+        cardSubmit={props.cardSubmit} 
+        cardTextEntry={props.cardTextEntry} 
+        cardText={props.cardText}
+        bodyTextEntry={props.bodyTextEntry}
+        emojiTextEntry={props.emojiTextEntry}
+      />
     </div>
-  )
+  );
 }
 
 export default CardContainer;
diff --git a/client/containers/Dashboard.jsx b/client/containers/Dashboard.jsx
@@ -6,39 +6,112 @@ function Dashboard() {
 
   const [ topics, setTopics ] = useState(['Javascript']);
   const [ cards, setCards ] = useState(['React']);
+  const [ emojis, setEmojis ] = useState([]);
+  const [ bodies, setBodies ] = useState([]);
+  // const [ topicId]
+
   const [ topicText, setTopicText ] = useState('');
   const [ cardText, setCardText ] = useState('');
+  const [ emojiText, setEmojiText ] = useState(''); //might be dropdown later
+  const [ bodyText, setBodyText ] = useState('');
 
   const topicSubmit = (e) => {
-    // prevent default just for submits
+    const topicTitle = e.target[0].value;
     e.preventDefault();
     setTopics([...topics, topicText]);
     setTopicText('');
+    fetch('http://localhost:3000/api/topic', {
+      method: 'Post',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: {
+        topic_name: topicTitle,
+      }
+    })
+      .then((data) => data.json())
+      .then((data) => data[_id])
+      // .then((data) => JSON.parse(data))
   };
 
+  // fx cardSubmit will submit the card, the body, the emoji
   const cardSubmit = (e) => {
     e.preventDefault();
+    const emojiValue = e.target[0].value;
+    const cardTitleValue = e.target[1].value;
+    const bodyValue = e.target[2].value;
+    console.log(e.target[0].value);
     setCards([...cards, cardText]);
     setCardText('');
+    // bodySubmit();
+    // emojiSubmit();
+    // fetch('http://localhost:3000/subtopic', {
+    //   method: 'Post',
+    //   headers: {
+    //     'Content-Type': 'application/json'
+    //   },
+    //   body: {
+          // Emoji: emojiValue,
+          // SubTopic: cardTitleValue,
+          // body: bodyValue  
+    //   }
+    // })
+
+  };
+
+  // cardSubmit inner functions
+  const emojiSubmit = (e) => {
+    e.preventDefault();
+    setEmojis([...emojis, emojiText]);
+    setEmojiText('');
+  }; 
+
+  const bodySubmit = (e) => {
+    e.preventDefault();
+    setBodies([...bodies, bodyText]);
+    setBodyText('');
   };
 
   const topicTextEntry = (e) => {
     // console.log(e);
     setTopicText(e.target.value);
   };
 
+  const bodyTextEntry = (e) => {
+    setBodyText(e.target.value);
+  };
+
+  const emojiTextEntry = (e) => {
+    setEmojiText(e.target.value);
+  };
+
   const cardTextEntry = (e) => {
-    console.log(e);
     setCardText(e.target.value);
-  }
+  };
 
   return (
     <div>
       <header>
         <h1>GITGOOD</h1>
       </header>
-      <Nav topics={topics} topicSubmit={topicSubmit} topicTextEntry={topicTextEntry} topicText={topicText} />
-      <CardContainer cards={cards} cardSubmit={cardSubmit} cardTextEntry={cardTextEntry} cardText={cardText} />        
+      <Nav
+        topics={topics}
+        topicSubmit={topicSubmit}
+        topicTextEntry={topicTextEntry}
+        topicText={topicText} 
+      />
+      <CardContainer 
+        bodyText={bodyText} 
+        emojis={emojis} 
+        emojiText={emojiText} 
+        bodies={bodies} 
+        cards={cards} 
+        cardSubmit={cardSubmit} 
+        cardTextEntry={cardTextEntry} 
+        cardText={cardText}
+        bodyTextEntry={bodyTextEntry}
+        emojiTextEntry={emojiTextEntry}
+      />        
     </div>
   );
 }

diff --git a/client/containers/Nav.jsx b/client/containers/Nav.jsx
@@ -10,14 +10,14 @@ function Nav(props) {
 
   return(
     <div>
-      <h2>Nav</h2>
+      <h2>Topics</h2>
       <form action='' onSubmit={(e) => props.topicSubmit(e)}>
-        <input type='text' onChange={(e) => props.topicTextEntry(e)} value={props.topicText}/>
+        <input type='text' placeholder='Add Topic...' onChange={(e) => props.topicTextEntry(e)} value={props.topicText}/>
         <input type='submit' />
       </form> 
       {topicsFeed}
     </div>
-  )
+  );
 }
 
 export default Nav;