-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fixed: added firebase-realtime-database
- Loading branch information
1 parent
bf2a7bb
commit fc568be
Showing
14 changed files
with
290 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -46,3 +46,4 @@ | |
| "tailwindcss": "^3.2.4" | ||
| } | ||
| } | ||
|
|
||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import { | ||
| getDatabase, | ||
| ref, | ||
| set, | ||
| push, | ||
| onValue, | ||
| remove, | ||
| update, | ||
| } from "firebase/database"; | ||
| import { useEffect, useState } from "react"; | ||
| import firebase from "./firebase"; | ||
|
|
||
| export const useFetch = () => { | ||
| const [isLoading, setIsLoading] = useState(true); | ||
| const [cardList, setCardList] = useState(); | ||
| useEffect(() => { | ||
| const db = getDatabase(firebase); | ||
| const userRef = ref(db, "user/"); | ||
| onValue(userRef, (snapshot) => { | ||
| const data = snapshot.val(); | ||
| const userArray = []; | ||
| for (let id in data) { | ||
| userArray.push({ id, ...data[id] }); | ||
| } | ||
| setCardList(userArray); | ||
| setIsLoading(false); | ||
| }); | ||
| }, []); | ||
| return { isLoading, cardList }; | ||
| }; | ||
| export const AddUser=(info,user,history)=>{ | ||
| const db=getDatabase(firebase) | ||
| const userRef=ref(db,"user/") | ||
| const newUserRef=push(userRef) | ||
| set(newUserRef,{ | ||
| Title:info.title, | ||
| ImgUrl:info.imgUrl, | ||
| content:info.content, | ||
| email:user?.email, | ||
| history:history | ||
| }) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import React from 'react' | ||
| import { useNavigate } from 'react-router-dom' | ||
| import konu from "../asset/konu.jpg" | ||
|
|
||
| const Card = ({item}) => { | ||
| const navigate =useNavigate() | ||
| return ( | ||
| <> | ||
| { | ||
| <div className="rounded-lg shadow-lg bg-white max-w-sm w-[350px] h-[350px]"> | ||
| <div className='w-[90%] h-36'> | ||
| {item.ImgUrl ? (<img className="rounded-t-lg w-48 mx-auto" src={item.ImgUrl} alt="" />) : (<img className="rounded-t-lg w-48 mx-auto" src={konu} alt="" />)} | ||
| </div> | ||
| <div className="p-6"> | ||
| <h5 className="text-gray-900 text-xl font-medium mb-2">{item.Title}</h5> | ||
| <p className="text-gray-700 text-base mb-4 w-[90%] text-ellipsis overflow-hidden"> | ||
| {item.content} | ||
| </p> | ||
| <p className="text-gray-700 text-base mb-4 w-[90%] text-ellipsis overflow-hidden"> | ||
| {item.history} | ||
| </p> | ||
| <p className="text-gray-700 text-base mb-4 w-[90%] text-ellipsis overflow-hidden"> | ||
| {item.email} | ||
| </p> | ||
| <button type="button" className=" inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out" onClick={()=>navigate(`/${item?.Title}`,{state:item})}>Button</button> | ||
| </div> | ||
| <div><svg width="32" height="32" viewBox="0 0 36 36"><path fill="currentColor" d="M18 32.43a1 1 0 0 1-.61-.21C11.83 27.9 8 24.18 5.32 20.51C1.9 15.82 1.12 11.49 3 7.64c1.34-2.75 5.19-5 9.69-3.69A9.87 9.87 0 0 1 18 7.72a9.87 9.87 0 0 1 5.31-3.77c4.49-1.29 8.35.94 9.69 3.69c1.88 3.85 1.1 8.18-2.32 12.87c-2.68 3.67-6.51 7.39-12.07 11.71a1 1 0 0 1-.61.21ZM10.13 5.58A5.9 5.9 0 0 0 4.8 8.51c-1.55 3.18-.85 6.72 2.14 10.81A57.13 57.13 0 0 0 18 30.16a57.13 57.13 0 0 0 11.06-10.83c3-4.1 3.69-7.64 2.14-10.81c-1-2-4-3.59-7.34-2.65a8 8 0 0 0-4.94 4.2a1 1 0 0 1-1.85 0a7.93 7.93 0 0 0-4.94-4.2a7.31 7.31 0 0 0-2-.29Z" class="clr-i-outline clr-i-outline-path-1"/><path fill="none" d="M0 0h36v36H0z"/></svg></div> | ||
| </div> | ||
| } | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export default Card |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import React from 'react' | ||
| import { useSelector } from 'react-redux' | ||
| import { useLocation } from 'react-router-dom' | ||
| import konu from "../asset/konu.jpg" | ||
|
|
||
| const Details = () => { | ||
| const {state} = useLocation() | ||
| const {user} =useSelector((state)=>state.auth) | ||
| console.log(user?.email); | ||
| return ( | ||
| <div> | ||
| { | ||
| <div className="rounded-lg shadow-lg bg-white max-w-sm w-[350px] h-[350px]"> | ||
| <div className='w-[90%] h-36'> | ||
| {state.ImgUrl ? (<img className="rounded-t-lg w-48 mx-auto" src={state.ImgUrl} alt="" />) : (<img className="rounded-t-lg w-48 mx-auto" src={konu} alt="" />)} | ||
| </div> | ||
| <div className="p-6"> | ||
| <h5 className="text-gray-900 text-xl font-medium mb-2">{state.Title}</h5> | ||
| <p className="text-gray-700 text-base mb-4 w-[90%] text-ellipsis overflow-hidden"> | ||
| {state.content} | ||
| </p> | ||
| <p className="text-gray-700 text-base mb-4 w-[90%] text-ellipsis overflow-hidden"> | ||
| {state.history} | ||
| </p> | ||
| <p className="text-gray-700 text-base mb-4 w-[90%] text-ellipsis overflow-hidden"> | ||
| {state.email} | ||
| </p> | ||
|
|
||
| </div> | ||
| <div><svg width="32" height="32" viewBox="0 0 36 36"><path fill="currentColor" d="M18 32.43a1 1 0 0 1-.61-.21C11.83 27.9 8 24.18 5.32 20.51C1.9 15.82 1.12 11.49 3 7.64c1.34-2.75 5.19-5 9.69-3.69A9.87 9.87 0 0 1 18 7.72a9.87 9.87 0 0 1 5.31-3.77c4.49-1.29 8.35.94 9.69 3.69c1.88 3.85 1.1 8.18-2.32 12.87c-2.68 3.67-6.51 7.39-12.07 11.71a1 1 0 0 1-.61.21ZM10.13 5.58A5.9 5.9 0 0 0 4.8 8.51c-1.55 3.18-.85 6.72 2.14 10.81A57.13 57.13 0 0 0 18 30.16a57.13 57.13 0 0 0 11.06-10.83c3-4.1 3.69-7.64 2.14-10.81c-1-2-4-3.59-7.34-2.65a8 8 0 0 0-4.94 4.2a1 1 0 0 1-1.85 0a7.93 7.93 0 0 0-4.94-4.2a7.31 7.31 0 0 0-2-.29Z" class="clr-i-outline clr-i-outline-path-1"/><path fill="none" d="M0 0h36v36H0z"/></svg></div> | ||
|
|
||
| </div> | ||
| } | ||
| {(user?.email === state?.email) ? (<button>sadık</button>) :""} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default Details |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,19 @@ | ||
| import React from 'react' | ||
| import { useDispatch } from 'react-redux' | ||
| import { useNavigate } from 'react-router-dom' | ||
| import { ToastContainer } from 'react-toastify' | ||
| import { logOut } from '../auth/firebase' | ||
| import Navbar from '../conponents/Navbar' | ||
| import React from "react"; | ||
| import Navbar from "../conponents/Navbar"; | ||
| import { useFetch } from "../auth/functions"; | ||
| import Card from "../conponents/Card"; | ||
|
|
||
| const Home = () => { | ||
| const dispatch = useDispatch() | ||
| const navigate = useNavigate() | ||
| const { isLoading, cardList } = useFetch(); | ||
| console.log(cardList); | ||
| return ( | ||
| <div> | ||
| {/* <button onClick={()=>logOut(navigate,dispatch)}>sadık</button> */} | ||
| <Navbar /> | ||
| <div className="flex flex-wrap gap-6 justify-center items-center"> | ||
| {cardList?.map((item,index)=><Card item={item} key={index}/>)} | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| ); | ||
| }; | ||
|
|
||
| export default Home | ||
| export default Home; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| import React, { useEffect, useState } from "react"; | ||
| import Navbar from "../conponents/Navbar"; | ||
| import blog from "../asset/blog.png"; | ||
| import { AddUser, useFetch } from "../auth/functions"; | ||
| import { Navigate, useNavigate } from "react-router-dom"; | ||
| import { toastWarnNotify } from "../helper/Toastfy"; | ||
| import { useSelector } from "react-redux"; | ||
|
|
||
| const New = () => { | ||
| const navigate = useNavigate(); | ||
| const initialValues = { | ||
| title: "", | ||
| imgUrl: "", | ||
| content: "", | ||
| }; | ||
| const {user} = useSelector((state)=>state.auth) | ||
| const [info, setInfo] = useState(initialValues); | ||
| const [count, setCount] = useState(); | ||
|
|
||
|
|
||
|
|
||
|
|
||
| const handleSubmit = (e) => { | ||
| e.preventDefault(); | ||
| let asd = new Date() | ||
| let date = new Date(`${asd.getFullYear()}-${asd.getMonth()+1}-${asd.getDate()}`) | ||
| let history = date.toLocaleDateString("tr-TR",{ | ||
| weekday:"long",month:"long",day:"numeric",year:"numeric" | ||
| }) | ||
| if(info.title && info.content && info.imgUrl){ | ||
| if(count?.length>2){ | ||
| AddUser(info,user,history); | ||
| setInfo(initialValues); | ||
| navigate("/"); | ||
| } | ||
| else{ | ||
| toastWarnNotify("Contente minimum 100 harf yazılmalıdır") | ||
| } | ||
|
|
||
| } | ||
| else{ | ||
| toastWarnNotify("Form Boş Bırakılamaz") | ||
| } | ||
| }; | ||
|
|
||
| const { isLoading, cardList } = useFetch(); | ||
| useEffect(() => { | ||
| setCount(info.content.split("")); | ||
| }, [info]); | ||
|
|
||
| return ( | ||
| <div> | ||
| <Navbar /> | ||
| <form onSubmit={handleSubmit}> | ||
| <div className="flex flex-col justify-center items-center mt-20 gap-4"> | ||
| <img src={blog} alt="" /> | ||
| <input | ||
| type="text" | ||
| placeholder="Title *" | ||
| className="w-[400px] border-4 outline-none py-2 indent-2 shadow-md shadow-black rounded-md" | ||
| value={info.title} | ||
| onChange={(e) => setInfo({ ...info, title: e.target.value })} | ||
| /> | ||
| <input | ||
| type="text" | ||
| placeholder="Image URL * | ||
| " | ||
| className="w-[400px] border-4 outline-none py-2 indent-2 shadow-md shadow-black rounded-md" | ||
| value={info.imgUrl} | ||
| onChange={(e) => setInfo({ ...info, imgUrl: e.target.value })} | ||
| /> | ||
| <div className="relative"> | ||
| <textarea | ||
| name="" | ||
| id="" | ||
| cols="30" | ||
| rows="10" | ||
| className=" w-[400px] h-[300px] border-4 outline-none py-2 indent-2 shadow-md shadow-black rounded-md" | ||
| placeholder="Content *" | ||
| value={info.content} | ||
| onChange={(e) => setInfo({ ...info, content: e.target.value })} | ||
| wrap="hard" | ||
| ></textarea> | ||
|
|
||
| <p className="absolute bottom-4 right-4"> | ||
| {`3000/ ${count?.length}`} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <button className="py-2 px-4 bg-teal-600 block mx-auto mt-2 rounded-lg text-white font-bold hover:bg-teal-400 hover:text-black duration-200"> | ||
| Submit | ||
| </button> | ||
| </form> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default New; |
Oops, something went wrong.