Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Daniel0 #10

Merged
merged 6 commits into from
Oct 8, 2023
Merged

Daniel0 #10

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5e7accd
ui overhall
larkindaniel Oct 8, 2023
e0f284c
frontend integration
larkindaniel Oct 8, 2023
b9243c4
front end- integration
larkindaniel Oct 8, 2023
d5286dd
merge conflict fix
larkindaniel Oct 8, 2023
071714b
routing change
larkindaniel Oct 8, 2023
9eb0fe9
finished front end
larkindaniel Oct 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
front end- integration
  • Loading branch information
@larkindaniel
larkindaniel committed Oct 8, 2023
commit b9243c4e59fafffa10b04212eb7d68deefa25f66
4 changes: 1 addition & 3 deletions client/src/components/AppLayout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,7 @@ const AppLayout = () => {
<div className="flex">
<TopBar />
</div>
<div className="flex">
<Upload />
</div>

<div className="content">
<Outlet />
</div>
Expand Down
18 changes: 9 additions & 9 deletions client/src/components/Deck.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import React from 'react';
import React from "react";

const Deck = ({ deck }) => {
return (
<div className='max-w-sm mx-auto bg-white rounded-xl overflow-hidden shadow-lg p-4 mb-4'>
<h3 className='text-xl font-semibold mb-2'>{deck.name}</h3>
<p className='text-gray-600'>{deck.createdAt}</p>
<a
href='/app/study'
className='mt-2 bg-primary-light hover:bg-primary-main text-white font-semibold py-2 px-4 rounded-full inline-block'
>
<div className="max-w-sm mx-auto bg-secondary-light rounded-xl overflow-hidden shadow-lg p-4 mb-4">
<h3 className="text-xl font-semibold mb-2">{deck.name}</h3>
<p className="text-primary-dark">{deck.createdAt}</p>
<a
href="/app/study"
className="mt-2 bg-primary-light hover:bg-primary-dark text-primary-background font-semibold py-2 px-4 rounded-full inline-block"
>
Study Now
</a>
</a>
</div>
);
};
Expand Down
75 changes: 42 additions & 33 deletions client/src/components/Decks.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,47 @@
import React, {useState, useEffect} from 'react'
import Deck from './Deck'
import axios from '../requests/axios'
import React, { useState, useEffect } from "react";
import Deck from "./Deck";
import axios from "../requests/axios";

const Decks = () => {
const [decks, setDecks] = useState([{'deck_id': 1, 'name': 'Greek Mythology', 'createdAt': '2023 Jan 24'}, {'deck_id': 1, 'name': 'Greek Mythology', 'createdAt': '2023 Jan 24'}, {'deck_id': 1, 'name': 'Greek Mythology', 'createdAt': '2023 Jan 24'}, {'deck_id': 1, 'name': 'Greek Mythology', 'createdAt': '2023 Jan 24'}, {'deck_id': 1, 'name': 'Greek Mythology', 'createdAt': '2023 Jan 24'}, {'deck_id': 1, 'name': 'Greek Mythology', 'createdAt': '2023 Jan 24'}])
const [decks, setDecks] = useState([
{ deck_id: 1, name: "Greek Mythology", createdAt: "2023 Jan 24" },
{ deck_id: 1, name: "Greek Mythology", createdAt: "2023 Jan 24" },
{ deck_id: 1, name: "Greek Mythology", createdAt: "2023 Jan 24" },
{ deck_id: 1, name: "Greek Mythology", createdAt: "2023 Jan 24" },
{ deck_id: 1, name: "Greek Mythology", createdAt: "2023 Jan 24" },
{ deck_id: 1, name: "Greek Mythology", createdAt: "2023 Jan 24" },
]);

useEffect(() => {
console.log(process.env.REACT_APP_API_URL)
const apiUrl = '/decks';

const fetchData = async () => {
try {
const response = await axios.get(apiUrl);

setDecks(response.data);
} catch (error) {
console.error('Error:', error);
}
};

// Call the async function
fetchData();
}, []);
useEffect(() => {
console.log(process.env.REACT_APP_API_URL);
const apiUrl = "/decks";

return (
<div className='relative flex flex-wrap justify-center drop-shadow-2xl' style={{ paddingLeft: '9rem', paddingTop: '2rem' }}>
{decks.map((deck, index) => (
<div key={deck.deck_id} className='w-1/4 p-4'>
<Deck deck={deck}/>
</div>
))}
</div>
);

}
const fetchData = async () => {
try {
const response = await axios.get(apiUrl);

export default Decks
setDecks(response.data);
} catch (error) {
console.error("Error:", error);
}
};

// Call the async function
fetchData();
}, []);

return (
<div
className="relative flex flex-wrap justify-center drop-shadow-2xl"
style={{ paddingLeft: "9rem", paddingTop: "2rem" }}
>
{decks.map((deck, index) => (
<div key={deck.deck_id} className="w-1/3 p-4 mt-20 ">
<Deck deck={deck} />
</div>
))}
</div>
);
};

export default Decks;
12 changes: 6 additions & 6 deletions client/src/components/smaller_components/Upload.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,21 @@ const Upload = () => {
return (
<div>
<div class="bg-primary-background h-[80vh] w-screen flex items-center justify-center">
<div class="max-w-lg w-4/5 max-h-lg bg-white p-8 rounded-lg shadow-lg">
<div class="max-w-lg w-4/5 max-h-lg bg-secondary-light p-8 rounded-lg shadow-lg">
<div className="mr-4 ml-4">
<div class="mb-10 mt-12">
<label
for="postContent"
class="block text-primary-dark text-sm font-bold mb-2"
class="block text-primary-dark bg-secondary-light text-sm font-bold mb-2"
>
Title:
</label>
<textarea
id="postContent"
name="postContent"
rows="1"
class="w-full border-2 rounded-md pt-4 pb-4 px-4 py-2 leading-5 transition duration-150 ease-in-out sm:text-sm
sm:leading-5 resize-none focus:outline-none focus:border-primary-main"
class="w-full border-2 border-secondary-main rounded-md pt-4 pb-4 px-4 py-2 leading-5 transition duration-150 ease-in-out sm:text-sm
sm:leading-5 resize-none focus:outline-none focus:border-primary-main bg-secondary-light"
placeholder=""
></textarea>
</div>
Expand All @@ -30,7 +30,7 @@ const Upload = () => {
>
Photo:
</label>
<div class="relative border-2 rounded-md px-4 py-3 bg-white flex items-center justify-between hover:border-primary-main transition duration-150 ease-in-out">
<div class="relative border-2 border-secondary-main rounded-md px-4 py-3 bg-secondary-light flex items-center justify-between hover:border-primary-main transition duration-150 ease-in-out">
<input
type="file"
id="fileAttachment"
Expand Down Expand Up @@ -62,7 +62,7 @@ const Upload = () => {
<div class="flex items-center justify-between mb-12">
<button
type="submit"
class="flex justify-center items-center bg-primary-main hover:bg-primary-dark focus:outline-none focus:shadow-outline-blue text-primary-background py-2 px-4 rounded-md transition duration-300 gap-2 active:scale-[.98] active:duration-75 hover:scale-[1.02] ease-in-out "
class="flex justify-center items-center bg-primary-light hover:bg-primary-dark focus:outline-none focus:shadow-outline-blue text-primary-background py-2 px-4 rounded-md transition duration-300 gap-2 active:scale-[.98] active:duration-75 hover:scale-[1.02] ease-in-out "
>
{" "}
Create Deck{" "}
Expand Down
2 changes: 1 addition & 1 deletion client/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
@apply relative flex items-center justify-center h-16 w-16 mt-4 mb-4 mx-auto shadow-lg bg-primary-main text-secondary-light hover:bg-primary-dark rounded-2xl hover:rounded-md transition-all duration-300 ease-linear cursor-pointer;
}
.sidebar-icon-top {
@apply relative flex items-center justify-center drop-shadow-2xl h-16 w-16 mt-auto mb-auto ml-auto mr-10 shadow-lg bg-primary-background text-primary-dark hover:bg-white rounded-2xl hover:rounded-md transition-all duration-300 ease-linear cursor-pointer;
@apply relative flex items-center justify-center drop-shadow-2xl h-16 w-16 mt-auto mb-auto ml-auto mr-10 shadow-lg bg-primary-background text-primary-dark hover:bg-secondary-light rounded-2xl hover:rounded-md transition-all duration-300 ease-linear cursor-pointer;
}
}

Expand Down