Skip to content

Commit

Permalink
1st
Browse files Browse the repository at this point in the history
  • Loading branch information
@Bishal097
Bishal097 committed Mar 8, 2024
1 parent 11f1552 commit 8d05815
Show file tree
Hide file tree
Showing 32 changed files with 2,207 additions and 21 deletions.
1,078 changes: 1,070 additions & 8 deletions 12MegaBlog/package-lock.json
View file

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions 12MegaBlog/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,13 @@
"@types/react": "^18.2.56",
"@types/react-dom": "^18.2.19",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.17",
"eslint": "^8.56.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"postcss": "^8.4.35",
"tailwindcss": "^3.4.1",
"vite": "^5.1.4"
}
}
6 changes: 6 additions & 0 deletions 12MegaBlog/postcss.config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
44 changes: 33 additions & 11 deletions 12MegaBlog/src/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,38 @@
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import React, { useState, useEffect } from 'react'
import { useDispatch } from 'react-redux'
import './App.css'
import authService from "./appwrite/auth"
import {login, logout} from "./store/authSlice"
import { Footer, Header } from './components'
import { Outlet } from 'react-router-dom'

function App() {
const [count, setCount] = useState(0)
console.log(import.meta.env.VITE_APPWRITE_URL);
return (
<>
<h1>Blog with appwrite</h1>
</>
)
const [loading, setLoading] = useState(true)
const dispatch = useDispatch()

useEffect(() => {
authService.getCurrentUser()
.then((userData) => {
if (userData) {
dispatch(login({userData}))
} else {
dispatch(logout())
}
})
.finally(() => setLoading(false))
}, [])

return !loading ? (
<div className='min-h-screen flex flex-wrap content-between bg-gray-400'>
<div className='w-full block'>
<Header />
<main>
<Outlet/>
</main>
<Footer />
</div>
</div>
) : null
}

export default App
export default App
Empty file removed 12MegaBlog/src/appwrite/config
View file
Empty file.
24 changes: 24 additions & 0 deletions 12MegaBlog/src/components/AuthLayout.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import React ,{useEffect} from 'react'
import {useSelector} from 'react-redux'
import {useNavigate} from 'react-router-dom'

export default function Protected({children, authentication})
{
const navigate =useNavigate()
const [loader, setLoader] =useState(true)
const authStatus=useSelector(state=> state.auth.status)

useEffect(() =>{
if(authentication && authStatus!==authentication )
{
navigate("/login")
}
else if(!authentication && authStatus !== authentication)
{
navigate("/")
}
setLoader(false)
},[authStatus, navigate,authentication])

return loader ? <h1>Loading...</h1> : <>{children}</>
}
16 changes: 16 additions & 0 deletions 12MegaBlog/src/components/Button.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from "react";

export default function Button({
children,
type = "button",
bgColor = "bg-blue-600",
textColor = "text-white",
className = "",
...props
}) {
return (
<button className={`px-4 py-2 rounded-lg ${bgColor} ${textColor} ${className}`} {...props}>
{children}
</button>
);
}
143 changes: 143 additions & 0 deletions 12MegaBlog/src/components/Footer/Footer.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
import React from 'react'
import { Link } from 'react-router-dom'
import Logo from '../Logo'

function Footer() {
return (
<section className="relative overflow-hidden py-10 bg-gray-400 border border-t-2 border-t-black">
<div className="relative z-10 mx-auto max-w-7xl px-4">
<div className="-m-6 flex flex-wrap">
<div className="w-full p-6 md:w-1/2 lg:w-5/12">
<div className="flex h-full flex-col justify-between">
<div className="mb-4 inline-flex items-center">
<Logo width="100px" />
</div>
<div>
<p className="text-sm text-gray-600">
&copy; Copyright 2023. All Rights Reserved by DevUI.
</p>
</div>
</div>
</div>
<div className="w-full p-6 md:w-1/2 lg:w-2/12">
<div className="h-full">
<h3 className="tracking-px mb-9 text-xs font-semibold uppercase text-gray-500">
Company
</h3>
<ul>
<li className="mb-4">
<Link
className=" text-base font-medium text-gray-900 hover:text-gray-700"
to="/"
>
Features
</Link>
</li>
<li className="mb-4">
<Link
className=" text-base font-medium text-gray-900 hover:text-gray-700"
to="/"
>
Pricing
</Link>
</li>
<li className="mb-4">
<Link
className=" text-base font-medium text-gray-900 hover:text-gray-700"
to="/"
>
Affiliate Program
</Link>
</li>
<li>
<Link
className=" text-base font-medium text-gray-900 hover:text-gray-700"
to="/"
>
Press Kit
</Link>
</li>
</ul>
</div>
</div>
<div className="w-full p-6 md:w-1/2 lg:w-2/12">
<div className="h-full">
<h3 className="tracking-px mb-9 text-xs font-semibold uppercase text-gray-500">
Support
</h3>
<ul>
<li className="mb-4">
<Link
className=" text-base font-medium text-gray-900 hover:text-gray-700"
to="/"
>
Account
</Link>
</li>
<li className="mb-4">
<Link
className=" text-base font-medium text-gray-900 hover:text-gray-700"
to="/"
>
Help
</Link>
</li>
<li className="mb-4">
<Link
className=" text-base font-medium text-gray-900 hover:text-gray-700"
to="/"
>
Contact Us
</Link>
</li>
<li>
<Link
className=" text-base font-medium text-gray-900 hover:text-gray-700"
to="/"
>
Customer Support
</Link>
</li>
</ul>
</div>
</div>
<div className="w-full p-6 md:w-1/2 lg:w-3/12">
<div className="h-full">
<h3 className="tracking-px mb-9 text-xs font-semibold uppercase text-gray-500">
Legals
</h3>
<ul>
<li className="mb-4">
<Link
className=" text-base font-medium text-gray-900 hover:text-gray-700"
to="/"
>
Terms &amp; Conditions
</Link>
</li>
<li className="mb-4">
<Link
className=" text-base font-medium text-gray-900 hover:text-gray-700"
to="/"
>
Privacy Policy
</Link>
</li>
<li>
<Link
className=" text-base font-medium text-gray-900 hover:text-gray-700"
to="/"
>
Licensing
</Link>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
)
}

export default Footer
73 changes: 73 additions & 0 deletions 12MegaBlog/src/components/Header/Header.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
import React from 'react'
import {Container, Logo, LogoutBtn} from '../index'
import { Link } from 'react-router-dom'
import {useSelector} from 'react-redux'
import { useNavigate } from 'react-router-dom'

function Header() {
const authStatus = useSelector((state) => state.auth.status)
const navigate = useNavigate()

const navItems = [
{
name: 'Home',
slug: "/",
active: true
},
{
name: "Login",
slug: "/login",
active: !authStatus,
},
{
name: "Signup",
slug: "/signup",
active: !authStatus,
},
{
name: "All Posts",
slug: "/all-posts",
active: authStatus,
},
{
name: "Add Post",
slug: "/add-post",
active: authStatus,
},
]


return (
<header className='py-3 shadow bg-gray-500'>
<Container>
<nav className='flex'>
<div className='mr-4'>
<Link to='/'>
<Logo width='70px' />

</Link>
</div>
<ul className='flex ml-auto'>
{navItems.map((item) =>
item.active ? (
<li key={item.name}>
<button
onClick={() => navigate(item.slug)}
className='inline-bock px-6 py-2 duration-200 hover:bg-blue-100 rounded-full'
>{item.name}</button>
</li>
) : null
)}
{authStatus && (
<li>
<LogoutBtn />
</li>
)}
</ul>
</nav>
</Container>
</header>
)
}

export default Header
21 changes: 21 additions & 0 deletions 12MegaBlog/src/components/Header/LogoutBtn.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import React from 'react'
import {useDispatch} from 'react-redux'
import authService from '../../appwrite/auth'
import {logout} from '../../store/authSlice'

function LogoutBtn() {
const dispatch = useDispatch()
const logoutHandler = () => {
authService.logout().then(() => {
dispatch(logout())
})
}
return (
<button
className='inline-bock px-6 py-2 duration-200 hover:bg-blue-100 rounded-full'
onClick={logoutHandler}
>Logout</button>
)
}

export default LogoutBtn
29 changes: 29 additions & 0 deletions 12MegaBlog/src/components/Input.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import React, {useId} from 'react'

const Input = React.forwardRef( function Input({
label,
type = "text",
className = "",
...props
}, ref){
const id = useId()
return (
<div className='w-full'>
{label && <label
className='inline-block mb-1 pl-1'
htmlFor={id}>
{label}
</label>
}
<input
type={type}
className={`px-3 py-2 rounded-lg bg-white text-black outline-none focus:bg-gray-50 duration-200 border border-gray-200 w-full ${className}`}
ref={ref}
{...props}
id={id}
/>
</div>
)
})

export default Input
Loading

0 comments on commit 8d05815

Please sign in to comment.