Skip to content

Commit

Permalink
new Navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@fenilSB
fenilSB committed Feb 23, 2024
1 parent c8fe3c3 commit 9bd1e7e
Show file tree
Hide file tree
Showing 5 changed files with 127 additions and 78 deletions.
5 changes: 1 addition & 4 deletions src/components/Content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,10 +171,7 @@ function Content() {
onChange={(e) => setIsChecked(e.target.checked)}
/>
</div>
{/* <div className="form-outline quill-editor-full mb-4">
<label className="form-label" htmlFor="form4Example3">Message</label>
<ReactQuill theme="snow" value={content} onChange={value => handlechange(value)} modules={modules} formats={formats} />
</div> */}

<div
id="editor-container"
value={content}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ function Home() {
}
else {
try {
axiosInstance.get(`/init/${subdomain}`)
axiosInstance.get(`/init/getdata/${subdomain}`)
.then((response) => {
console.log("init.response =", response);
setContent(response.data.content);
Expand Down
55 changes: 39 additions & 16 deletions src/components/ViewContent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,20 @@ import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import ReactQuill, { Quill } from 'react-quill';
import newEvent from '../api/postHog';
import { socket } from "../api/socket";
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Card from 'react-bootstrap/Card';

function ViewContent() {
const [editor, setEditor] = useState(null);
const userInfo = useSelector((state) => state.auth.userInfo)
const dispatch = useDispatch()
const userId = userInfo.id
const [hasContent, sethasContent] =useState(false)
const [permission, setPermission] =useState(0)
const [content, setContent] =useState(`Edit me!`)

const [hasContent, sethasContent] = useState(false)
const [permission, setPermission] = useState(0)
const [content, setContent] = useState(`Edit me!`)
var parsed = psl.parse(window.location.hostname);
const subdomain = parsed.subdomain
const [date, setDate] = useState(new Date());
Expand All @@ -33,7 +37,7 @@ function ViewContent() {
const handlePermission = (e) => {
setPermission(e.target.value);
}

const handleSubmit = (e) => {
console.log("permission =", permission);
e.preventDefault();
Expand Down Expand Up @@ -61,17 +65,17 @@ function ViewContent() {
toolbar: [
],
};
const formats = [ ];
const formats = [];
useEffect(() => {

newEvent("view content", "view content", "/view-content");

socket.emit('join_room', userInfo.username);
socket.on('message', (data) => {
console.log("data from server",data);
newEvent("view content", "view content", "/view-content");

socket.emit('join_room', userInfo.username);
socket.on('message', (data) => {
console.log("data from server", data);
setContent(data.content);
});

if (subdomain === null) {
// remove this
// alert("subdomain is null")
Expand Down Expand Up @@ -141,11 +145,11 @@ function ViewContent() {
<div className="row mt-3">
<div className="col-md-24 card-body">
<label className="labels" >content</label>

<ReactQuill
modules={modules}
formats={formats}
style={{ height: "auto", marginBottom: "50px",border:"none" }}
style={{ height: "auto", marginBottom: "50px", border: "none" }}

readOnly={true}
value={content}
Expand Down Expand Up @@ -184,8 +188,27 @@ function ViewContent() {
</>
) : (
<>
<h1>has no content</h1>
<Link className="btn btn-primary btn-block mb-4" to="/create-content">Content</Link>
<Container style={{ minHeight: "715px", marginTop: "50px" }}>
<Row >

<Col>
<Card style={{ width: '18rem' }}>
<Card.Body>
<Card.Title>No Content</Card.Title>
<Card.Text>
Add new content clieck on the button below
</Card.Text>
</Card.Body>
</Card>
</Col>


</Row>
<Link className="btn btn-primary btn-block mb-4" to="/create-content"> Add new Content</Link>


</Container>

</>
)
}
Expand Down
27 changes: 27 additions & 0 deletions src/store/slices/theamSlice.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { createSlice } from '@reduxjs/toolkit'

const initialState = {
theamInfo: {theam: 'light'},
}

const theamSlice = createSlice({
name: 'theam',
initialState,
reducers: {
addNewTheam: (state, action) => {
state.theamInfo = action.payload
},
removeTheam: (state) => {
state.theamInfo = {theam: 'light'}
},
updateTheam: (state, action) => {
state.theamInfo = action.payload
}
},
})


// // Action creators are generated for each case reducer function
export const { addNewTheam, removeTheam, updateTheam } = theamSlice.actions

export default theamSlice.reducer
116 changes: 59 additions & 57 deletions src/templates/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,17 @@ import { Link, useNavigate } from "react-router-dom";
import { useSelector, useDispatch } from 'react-redux'
import { removeUser } from '../store/slices/authSlice'
import axiosInstance from '../api/api'
import 'bootstrap/dist/css/bootstrap.min.css'
// import 'bootstrap/dist/css/bootstrap.min.css'
import React from 'react'
import "../assets/button.css"
import "../assets/navbar.css"
import "../assets/bizland.css"

// import "../assets/button.css"
// import "../assets/navbar.css"
// import "../assets/bizland.css"
import Button from 'react-bootstrap/Button';
import Container from 'react-bootstrap/Container';
import Form from 'react-bootstrap/Form';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';


const Header = () => {
Expand All @@ -32,7 +37,54 @@ const Header = () => {

return (
<>
<header id="header" className="d-flex align-items-center">
<Navbar expand="lg" className="bg-body-tertiary" >
<Container fluid>
<Navbar.Brand ><Link to="/" className="logo"><img src="assets/img/old.png" alt="" /></Link></Navbar.Brand>
<Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll">
<Nav
className="me-auto my-2 my-lg-0"
style={{ maxHeight: '150px' }}
navbarScroll
>
</Nav>
{!isLoggedIn && (
<>
<Nav className="d-flex">
<Link className="nav-link active" to="/login">Login</Link>
<Link className="nav-link " to="/register">Sign Up</Link>
</Nav>
</>
)}
{isLoggedIn && (
<>
<Nav className="d-flex">

<Link className="nav-link mx-2 " to="/content">Content</Link>


<Link className="nav-link mx-2 " to="/add-domain">Add Domain</Link>

<NavDropdown title={<span>
<img
style={{ width: 30, height: 30 }}
src="https://mdbcdn.b-cdn.net/img/new/avatars/2.webp"
className="rounded-circle"
alt="Black and White Portrait of a Man"
/>
</span>} drop="start">
<NavDropdown.Item><Link to="/profile">Profile</Link></NavDropdown.Item>
<NavDropdown.Item onClick={logout}>Log Out</NavDropdown.Item>
<NavDropdown.Item>Contact us</NavDropdown.Item>
</NavDropdown>

</Nav>
</>
)}
</Navbar.Collapse>
</Container>
</Navbar>
{/* <header id="header" className="d-flex align-items-center">
<div className="container d-flex align-items-center justify-content-between">
<Link to="/" className="logo"><img src="assets/img/old.png" alt="" /></Link>
Expand Down Expand Up @@ -70,58 +122,8 @@ const Header = () => {
</nav>
</div>
</header>

{/* <nav className="navbar navbar-expand-lg text-dark p-2" >
<div className="container-fluid">
<Link className="navbar-brand" to="/"><img src="assets/img/old.png" style={{ height: "50px" }}></img></Link>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown"
aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className=" collapse navbar-collapse" id="navbarNavDropdown">
<ul className=" nav navbar-nav ms-auto ">
{!isLoggedIn && (
<>
<li className="nav-item">
<Link className="nav-link mx-2 active button-54" aria-current="page" to="/login">Login</Link>
</li>
<li className="nav-item">
<Link className="nav-link mx-2 active button-54" to="/register">Sign Up</Link>
</li>
</>)}
{isLoggedIn && (<>
<li className="nav-item">
<Link className="nav-link mx-2 active " to="/content">Content</Link>
</li>
<li className="nav-item">
<Link className="nav-link mx-2 active " to="/add-domain">Add Domain</Link>
</li>
<li className="nav-item dropdown">
<a className="nav-link mx-2 dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<img
style={{ width: 30, height: 30 }}
src="https://mdbcdn.b-cdn.net/img/new/avatars/2.webp"
className="rounded-circle"
alt="Black and White Portrait of a Man"
/>
</a>
</header> */}

<ul className="dropdown-menu mx-2" >
<li><Link className="dropdown-item mx-2" to="/profile">Profile</Link></li>
<li><a className="dropdown-item" onClick={logout}>Log Out</a></li>
<li><a className="dropdown-item" href="#">Contact us</a></li>
</ul>
</li>
</>)}
</ul>
</div>
</div>
</nav> */}
</>
)
}
Expand Down

0 comments on commit 9bd1e7e

Please sign in to comment.