Skip to content

Commit

Permalink
modified PetPage (#123)
Browse files Browse the repository at this point in the history
  • Loading branch information
@yasuaki-kumazaki
yasuaki-kumazaki authored Jun 16, 2024
2 parents 47b3473 + 6cda1b2 commit a4baf5a
Show file tree
Hide file tree
Showing 7 changed files with 206 additions and 174 deletions.
35 changes: 17 additions & 18 deletions frontend/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React from "react";
import { useAuth } from "react-oidc-context";
import { useState } from 'react'
import './App.css'
import Pet from "./Components/Pet/Pet";
import LinkDevice from './Components/LinkDevice'
import Footer from './Components/Footer';
import Navbar from './Components/Navbar/Navbar'
import Settings from './Components/Settings'
import { useState } from "react";
import "./App.css";
import LinkDevice from "./Components/LinkDevice";
import Footer from "./Components/Footer";
import Navbar from "./Components/Navbar/Navbar";
import Settings from "./Components/Settings";
import PetPage from "./Components/PetPage";

function App() {
const auth = useAuth();
Expand All @@ -30,11 +30,12 @@ function App() {

if (auth.isAuthenticated) {
return (

<div style={{ backgroundColor: '#F5F5DC'}}>
<div style={{ backgroundColor: "#F5F5DC" }}>
<div>
<div><Navbar /> </div>
{/*
<div>
<Navbar />{" "}
</div>
{/*
<h1 >WELCOME TO TEAMAGOCHI GANG</h1>
<h1 className='font-extrabold text-9xl' >
<a href="https://www.youtube.com/watch?v=sf0PJsknZiM">CARTI </a>
Expand All @@ -46,16 +47,14 @@ function App() {
<img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} />
<img src={"./android-chrome-384x384.png"} alt="Logo" style={{ width: '384px', height: '384px', marginLeft: '5px' }} /> */}
</div>

<div>Hello USERNAME: {auth.user?.profile?.preferred_username || 'User'}</div>
<Footer/ >,
<div>
Hello USERNAME: {auth.user?.profile?.preferred_username || "User"}
</div>
<Footer />,
</div>
);
}
return[
<Navbar/>,
<Footer/>,
];
return [<Navbar />, <PetPage />, <Footer />];
}

export default App;
207 changes: 141 additions & 66 deletions frontend/src/Components/Navbar/Navbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,151 @@
import React, { useState } from "react";
import {BrowserRouter as Router, Link, Route, Routes} from "react-router-dom";
import Inventory from '../Inventory.tsx';
import Settings from '../Settings.tsx';
import Friends from '../Friends.tsx';
import PetPage from '../PetPage.tsx';
import { BrowserRouter as Router, Link, Route, Routes } from "react-router-dom";
import Inventory from "../Inventory.tsx";
import Settings from "../Settings.tsx";
import Friends from "../Friends.tsx";
import PetPage from "../PetPage.tsx";
import { useAuth } from "react-oidc-context";
import './navbar.css';
import "./navbar.css";

const Navbar = () => {
const auth = useAuth();
const [activePage, setActivePage] = useState("Pet Page");
const auth = useAuth();
const [activePage, setActivePage] = useState("Pet Page");

const loginButtonStyles = {
color: '#fff',
backgroundColor: '#006400',
fontWeight: 'bold',
};
const loginButtonStyles = {
color: "#fff",
backgroundColor: "#006400",
fontWeight: "bold",
};

const navbarItemStyles = {
marginRight: '20px',
};
const navbarItemStyles = {
marginRight: "20px",
};

const handlePageClick = (page) => {
setActivePage(page);
};
const handlePageClick = (page) => {
setActivePage(page);
};

return (
<div>
<Router>
<nav className="navbar navbar-expand-lg navbar-dark bg-success">
<img src={"./android-chrome-192x192.png"} alt="Logo" style={{ width: '30px', height: '30px', marginLeft: '5px' }} />
<a className="navbar-brand" href="#">TEAMAGOCHI</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
return (
<div>
<Router>
<nav className="navbar navbar-expand-lg navbar-dark bg-success">
<img
src={"./android-chrome-192x192.png"}
alt="Logo"
style={{ width: "30px", height: "30px", marginLeft: "5px" }}
/>
<a className="navbar-brand px-2" href="#">
TEAMAGOCHI
</a>
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>

<div className="collapse navbar-collapse flex-row-reverse" id="navbarSupportedContent" style={navbarItemStyles}>
<ul className="navbar-nav">
{auth.isAuthenticated ? (
<>
<li className={`nav-item ${activePage === 'Pet Page' ? 'active' : ''}`}>
<Link className="nav-link" to="/PetPage" style={navbarItemStyles} onClick={() => handlePageClick('Pet Page')}>Pet Page</Link>
</li>
<li className={`nav-item ${activePage === 'Inventory' ? 'active' : ''}`}>
<Link className="nav-link" to="/inventory" style={navbarItemStyles} onClick={() => handlePageClick('Inventory')}>Inventory</Link>
</li>
<li className={`nav-item ${activePage === 'Friends' ? 'active' : ''}`}>
<Link className="nav-link" to="/Friends" style={navbarItemStyles} onClick={() => handlePageClick('Friends')}>Friends</Link>
</li>
<li className={`nav-item ${activePage === 'Settings' ? 'active' : ''}`}>
<Link className="nav-link" to="/Settings" style={navbarItemStyles} onClick={() => handlePageClick('Settings')}>Settings</Link>
</li>
<li className="navbar-item">
<button className="nav-link" onClick={() => auth.removeUser()} style={loginButtonStyles}>Log out</button>
</li>
</>
) : (
<li className="navbar-item">
<a className="nav-link" href="#" onClick={() => auth.signinRedirect()} style={loginButtonStyles}>Log in</a>
</li>
)}
</ul>
</div>
</nav>
<Routes>
<Route path="/inventory" element={<Inventory />} />
<Route path="/Settings" element={<Settings />} />
<Route path="/Friends" element={<Friends />} />
<Route path="/PetPage" element={<PetPage />} />
</Routes>
</Router>
</div>
)
}
<div
className="collapse navbar-collapse flex-row-reverse"
id="navbarSupportedContent"
style={navbarItemStyles}
>
<ul className="navbar-nav">
{auth.isAuthenticated ? (
<>
<li
className={`nav-item ${
activePage === "Pet Page" ? "active" : ""
}`}
>
<Link
className="nav-link"
to="/PetPage"
style={navbarItemStyles}
onClick={() => handlePageClick("Pet Page")}
>
Pet Page
</Link>
</li>
<li
className={`nav-item ${
activePage === "Inventory" ? "active" : ""
}`}
>
<Link
className="nav-link"
to="/inventory"
style={navbarItemStyles}
onClick={() => handlePageClick("Inventory")}
>
Inventory
</Link>
</li>
<li
className={`nav-item ${
activePage === "Friends" ? "active" : ""
}`}
>
<Link
className="nav-link"
to="/Friends"
style={navbarItemStyles}
onClick={() => handlePageClick("Friends")}
>
Friends
</Link>
</li>
<li
className={`nav-item ${
activePage === "Settings" ? "active" : ""
}`}
>
<Link
className="nav-link"
to="/Settings"
style={navbarItemStyles}
onClick={() => handlePageClick("Settings")}
>
Settings
</Link>
</li>
<li className="navbar-item">
<button
className="nav-link"
onClick={() => auth.removeUser()}
style={loginButtonStyles}
>
Log out
</button>
</li>
</>
) : (
<li className="navbar-item">
<a
className="nav-link"
href="#"
onClick={() => auth.signinRedirect()}
style={loginButtonStyles}
>
Log in
</a>
</li>
)}
</ul>
</div>
</nav>
<Routes>
<Route path="/inventory" element={<Inventory />} />
<Route path="/Settings" element={<Settings />} />
<Route path="/Friends" element={<Friends />} />
<Route path="/PetPage" element={<PetPage />} />
</Routes>
</Router>
</div>
);
};
export default Navbar;
48 changes: 0 additions & 48 deletions frontend/src/Components/Pet/Pet.tsx
View file

This file was deleted.

31 changes: 0 additions & 31 deletions frontend/src/Components/Pet/pet.css
View file

This file was deleted.

Loading

0 comments on commit a4baf5a

Please sign in to comment.