I am new in firebase I am making a simple profile with User information and I want to edit and store the data in the dp in the firebase
first I added the CDN this is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Level Up Elearning</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
<script src="/__/firebase/8.5.0/firebase-app.js"></script>
<script src="/__/firebase/8.5.0/firebase-analytics.js"></script>
<script src="/__/firebase/init.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
</body>
</html>
I tried all these scripts
and this is my firebase file
import firebase from "firebase/app";
var firebaseConfig = {...};
let fireDb = firebase.initializeApp(firebaseConfig);
export default fireDb.database().ref();
and this is where I call it
import React from "react";
import UserForm from "./UserForm";
import firebaseDb from "../firebase.js";
const UserProfile = () => {
const AddOrEdit = (obj) => {
firebaseDb.child("contacts").push(obj, (err) => {
if (err) {
console.log(err);
}
});
};
return (
<>
<div class="container py-4">
<div class="p-5 mb-4 bg-light rounded-3">
<div class="container-fluid py-5">
<h1 class="display-10 fw-bold">Profile Page</h1>
</div>
</div>
<div class="row align-items-md-stretch">
<div class="col-md-6">
<div class="h-100 p-5 text-white bg-dark rounded-3"></div>
</div>
<div class="col-md-6">
<div class="h-100 p-5 bg-light border rounded-3">
<UserForm AddOrEdit={AddOrEdit} /> // here I send the function as props to user form
</div>
</div>
</div>
</div>
</>
);
};
export default UserProfile;
this is a pic for the error
You're only importing firebase/app, which means the Realtime Database is not available in your code your.
to fix that, add:
import "firebase/database";
This then makes firebase.database() available as a side-effect.
Related
I’m having an issue while using getStaticPaths and getStaticProps to have an on demand SSG for a sharing page. I'm using Next v12.1.0 and React 17.0.2.
When I build a particular /[id] page, I get the data but the HTML is not building as it should. Here's the code:
Code from page/[postId].tsx:
const PostShare: NextPage = ({ metadata }: any): JSX.Element => {
return (
<>
<Head>
<meta name="theme-color" content="#000000" />
<meta name="og:description" content="content shared via page" />
<meta name="og:title" content={metadata.title} />
<meta name="og:type" content={metadata.type} />
<meta name="og:image" content={metadata.image} />
<meta name="description" content="content shared via page" />
<title>Page | Share</title>
</Head>
<main className="min-h-screen min-w-screen bg-js-carta grid flex-col place-content-center">
<div className="flex flex-col justify-center items-center">
<div className="flex flex-col justify-center items-center mb-[2vh] md:mb-[3vh]">
<div className="relative w-[40vw] max-w-[380px] aspect-square mb-[20px] md:mb-[35px]">
<Image
src={"/assets/logo.svg"}
layout="fill"
alt={"log"}
/>
</div>
<h1 className="mb-[20px] md:mb-[35px] text-white font-semibold text-3xl">Redirection ...</h1>
<p className="mb-[35px] text-white w-[90vw] text-[14px] md:w-[38vw] text-center md:text-[17px] font-normal leading-9">Some text/p>
</div>
<div className="flex flex-col justify-between items-center w-[90%] md:w-[40vw] m-auto max-w-[435px]">
Some Link
<div className="w-full flex justify-between items-center mb-[20px] md:mb-[30px]">
<div className="h-[1px] bg-[#9894b5] w-[20%] md:w-[20%] lg:w-[28%]"></div>
<p className="text-center text-white text-[13px] font-normal md:text-[15px]">Some text</p>
<div className="h-[1px] bg-[#9894b5] w-[20%] md:w-[20%] lg:w-[28%]"></div>
</div>
Go
</div>
</div>
</main>
</>
);
};
export async function getStaticPaths() {
return {
paths: [{ params: { postId: '1' } }, { params: { postId: '2' } }],
fallback: 'blocking',
};
};
export async function getStaticProps({ params }) {
const postId: number = parseInt(params?.postId.toString());
const { data: metadata, error } = await getContentMetadataForShareRequest(postId);
return {
props: {
metadata,
},
};
};
This should create a new page once I request another id like I do on this test (this is an id of a post that I know of):
export async function getStaticPaths() {
return {
paths: [{ params: { postId: '4042' } }],
fallback: 'blocking',
};
};
export async function getStaticProps({ params }) {
const postId: number = parseInt(params?.postId.toString());
const { data: metadata, error } = await getContentMetadataForShareRequest(postId);
return {
props: {
metadata,
},
};
};
In here we can expect an html file called 4042.html to be created with all the data from the api, but somehow it's just building an almost empty html file:
Code from .next/server/pages/page/4042.html:
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="next-head-count" content="2" />
<link rel="preload" href="/_next/static/css/c9566ae84cfa64c1.css" as="style" />
<link rel="stylesheet" href="/_next/static/css/c9566ae84cfa64c1.css" data-n-g="" /><noscript data-n-css=""></noscript>
<script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script>
<script src="/_next/static/chunks/webpack-eaae93af0b2e8468.js" defer=""></script>
<script src="/_next/static/chunks/framework-a070cbfff3c750c5.js" defer=""></script>
<script src="/_next/static/chunks/main-ef558cc4c27e2f83.js" defer=""></script>
<script src="/_next/static/chunks/pages/_app-2c36286d803ff756.js" defer=""></script>
<script src="/_next/static/chunks/pages/page/%5BpostId%5D-5c7db38fec69463d.js" defer=""></script>
<script src="/_next/static/9uNXtvnNpkvbdeI6xP2KX/_buildManifest.js" defer=""></script>
<script src="/_next/static/9uNXtvnNpkvbdeI6xP2KX/_ssgManifest.js" defer=""></script>
<script src="/_next/static/9uNXtvnNpkvbdeI6xP2KX/_middlewareManifest.js" defer=""></script>
</head>
<body>
<div id="__next" data-reactroot=""></div>
<script id="__NEXT_DATA__"
type="application/json">{"props":{"pageProps":{"metadata":{"id":4042,"title":"Des batteries presque éternelles à partir de déchets nucléaires !","type":"Multi (ex: article + vidéo)","url":"https://www.futura-sciences.com/tech/actualites/technologie-batteries-presque-eternelles-partir-dechets-nucleaires-65354/","image":"imageURlHiddenForObviousReasons","domain_name":"futura-sciences.com"}},"__N_SSG":true},"page":"/page/[postId]","query":{"postId":"4042"},"buildId":"someBuildId","isFallback":false,"gsp":true,"scriptLoader":[]}</script>
</body>
</html>
As you can see, I'm getting the needed data but it's not passed into the html as it should. Well, the page itself is basically empty when I build it.
I've tried everything and searched everywhere I could think of but nothing seems to be working.
If you guys have an idea of what could be the issue it would be super appreciated :)
In the end it was the Redux Persist gate causing the issue. I disabled it for that particular page and everything started working as expected.
This question already has an answer here:
Why there's error in onclick when i have "module" in script tag?
(1 answer)
Closed 8 months ago.
I was trying a call an async function using the onsubmit event of an HTML form. But unfortunately, I am getting this error...
Here is my HTML code...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do App</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script type="module" src="./script.js"></script>
</head>
<body>
<div class="background-image">
<img src="./assets/bg-desktop-dark.jpg">
</div>
<div class="container">
<div class="header">
<div class="title">
TODO
</div>
<div class="theme">
<img src="./assets/icon-sun.svg" alt="">
</div>
</div>
<div class="new-todo">
<div class="check">
<div class="check-mark">
</div>
</div>
<div class="new-todo-input">
<form onsubmit="addItem(event)">
<input id="todo-input" type="text" placeholder="Create a new todo...">
</form>
</div>
</div>
<div class="todo-items-wrapper">
<div class="todo-item">
<div class="check">
<div class="check-mark">
<img src="./assets/icon-check.svg">
</div>
</div>
<div class="todo-text">
Default Todo Text
</div>
</div>
<div class="todo-items-info">
<div class="items-left">
5 items left
</div>
<div class="items-statuses">
<span class="active">All</span>
<span>Active</span>
<span>Completed</span>
</div>
<div class="items-clear">
<span>Clear Completed</span>
</div>
</div>
</div>
</div>
</body>
</html>
Here is my Javascript code...
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.4/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.8.4/firebase-analytics.js";
import { getFirestore, collection, addDoc } from "https://www.gstatic.com/firebasejs/9.8.4/firebase-firestore.js";
const firebaseConfig = {
apiKey: "api_key",
authDomain: "auth_domain",
projectId: "project_id",
storageBucket: "storage_bucket",
messagingSenderId: "messagin_sender_id",
appId: "add_id",
measurementId: "measurement_id"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const db = getFirestore(app);
async function addItem(event)
{
event.preventDefault();
let text = document.getElementById("todo-input");
try
{
const docRef = await addDoc(collection(db, "todo-items"), {
text: text.value,
status: "active"
});
console.log("Document written with ID: ", docRef.id);
}
catch (e)
{
console.error("Error adding document: ", e);
}
}
Please tell me how can I fix this...........................................................
As the error shows, the "addItem" function doesn't exist.
Maybe the script file hasn't been inserted in the HTML.
The error message tells you that addItem is missing. Even though you have created it and it exists in a file, it does not exist in your page when you call it. Since your script has a type of module, you need to import it, like:
import addItem from ./script.js
Read more here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
However, to make sure that this works, you need to export your addItem function.
I have two files created in LWC OSS app
first file at src/client/index.html and src/client/index.js
second file at src/client/index2.html and src/client/index2.js
I want to navigate to index2.html when clicked on the button in my-app (LWC component) which is appended using index.js
Am new to express js and node js. Please help!
Below is the code of the files,
index.html (File location: src/client/index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My LWC App</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<!-- Block zoom -->
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link rel="shortcut icon" href="./resources/favicon.ico" />
</head>
<body>
<div id="main"></div>
</body>
</html>
index.js (File location: src/client/index.js)
import { createElement } from 'lwc';
import MyApp from 'my/app';
const app = createElement('my-app', { is: MyApp });
// eslint-disable-next-line #lwc/lwc/no-document-query
document.querySelector('#main').appendChild(app);
app.html (File location: src/client/modules/my/app/app.html)
<template>
<!-- LWC sample component <my-greeting> -->
<div class="center greeting">
<!-- <my-greeting speed="slow"></my-greeting> -->
<my-greeting speed="medium"></my-greeting>
<!-- <my-greeting speed="fast"></my-greeting> -->
</div>
<div class="center">
<img src="./resources/lwc.png" />
</div>
<!-- Page code -->
<div class="center">
<div class="container">
<!-- prettier-ignore -->
<p class="info">
Edit <strong class="code">src/client/modules/my/app/app.html</strong>
<br />and save for live reload.
</p>
</div>
<div>
Learn LWC
<button onclick={redirect}>Click to redirect</button>
</div>
</div>
</template>
app.js (File location: src/client/modules/my/app/app.js)
import { LightningElement } from 'lwc';
export default class App extends LightningElement {
redirect(){
//code for to navigate to index2.html
}
}
index2.html (File Location: src/client/index2.html)
<html lang="en">
<body>
<div id="main"></div>
</body>
</html>
index2.js (File Location: src/client/index2.js)
import { createElement } from 'lwc';
import MyNewApp from 'my/newApp';
const app = createElement('my-app', { is: MyNewApp });
// eslint-disable-next-line #lwc/lwc/no-document-query
document.querySelector('#main').appendChild(app);
7.newApp.html (File location: src/client/modules/my/newApp/newApp.html)
<template>
<h1> Redirected to index2 --> newApp </h1>
</template>
Please let me know if you need more information.
Thanks,
Navaprasad
I have an HTML file (Home.html) with site info on it and would like to render that data via my Home.js component. I've been googling things but am not sure how to do it... I keep running into dangerouslySetInnerHTML and <script>.
Here is my code:
Home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Node.js upload images</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<style>
div.preview-images > img {
width: 30%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-8 mt-3">
<h4>Node.js upload images - bezkoder.com</h4>
<form class="mt-4"
action="/upload"
method="POST"
enctype="multipart/form-data"
>
<div class="form-group">
<input
type="file"
name="file"
id="input-files"
class="form-control-file border"
/>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<hr />
<div class="row">
<div class="col-sm-12">
<div class="preview-images"></div>
</div>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function () {
let imagesPreview = function (input, placeToInsertImagePreview) {
if (input.files) {
let filesAmount = input.files.length;
for (i = 0; i < filesAmount; i++) {
let reader = new FileReader();
reader.onload = function (event) {
$($.parseHTML("<img>"))
.attr("src", event.target.result)
.appendTo(placeToInsertImagePreview);
};
reader.readAsDataURL(input.files[i]);
}
}
};
$("#input-files").on("change", function () {
imagesPreview(this, "div.preview-images");
});
});
</script>
</body>
Home.js
import React from "react";
const Home = () => (
<div>
<h1 className="title is-1">A Place to Document Things</h1>
<p>
Here, many things will be documented.
</p>
<div></div>
</div>
);
export default Home;
I would like to render the HTML info in the .js file.
Thank you
I am following this codepen which works perfectly. I took the code from it and put it in my local HTML file and added the JS. However when I run it locally it doesn't work. The console prints out the following message:
Uncaught TypeError: dialogLogin.show is not a function at HTMLButtonElement.<anonymous>
My HTML & JS code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Auth.X</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
</head>
<body>
<h1>How can I use several dialogs on the same website?</h1>
<h2>https://material.io/components/web/catalog/dialogs/</h2>
<!-- Trigger Dialogs -->
<button id="dialog-login">Open Login Dialog</button><br><br>
<button id="dialog-delivery">Open Delivery Dialog</button>
<!-- Dialogs: Login -->
<aside id="mdc-dialog-login"
class="mdc-dialog"
role="alertdialog"
aria-labelledby="mdc-dialog-login-label"
aria-describedby="mdc-dialog-login-description">
<div class="mdc-dialog__surface">
<header class="mdc-dialog__header">
<h2 id="mdc-dialog-login-label" class="mdc-dialog__header__title">
Login
</h2>
</header>
<section id="mdc-dialog-login-description" class="mdc-dialog__body">
[LOGIN FORM]
</section>
<footer class="mdc-dialog__footer">
<button type="button" class="mdc-button mdc-dialog__footer__button--cancel">Close</button>
<button type="button" class="mdc-button mdc-button--raised mdc-dialog__footer__button mdc-dialog__footer__button--accept">RegisteR</button>
</footer>
</div>
<div class="mdc-dialog__backdrop"></div>
</aside>
<!-- Dialogs: Delivery -->
<aside id="mdc-dialog-delivery-condition"
class="mdc-dialog js--mdc-delivery-condition"
role="alertdialog"
aria-labelledby="mdc-delivery-condition-label"
aria-describedby="mdc-delivery-condition-description">
<div class="mdc-dialog__surface">
<header class="mdc-dialog__header">
<h2 id="mdc-delivery-condition-label" class="mdc-dialog__header__title">
[Delivery]
</h2>
</header>
<section id="mdc-delivery-condition-description" class="mdc-dialog__body">
[TEXT]
</section>
<footer class="mdc-dialog__footer">
<button type="button" class="mdc-button mdc-dialog__footer__button--cancel">Close</button>
</footer>
</div>
<div class="mdc-dialog__backdrop"></div>
</aside>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<script>
// Find all the dialogs on the page
const dialogLoginEle = document.getElementById('mdc-dialog-login');
const dialogLogin = new mdc.dialog.MDCDialog(dialogLoginEle);
dialogLogin.listen('MDCDialog:accept', function() {
console.log('accepted login');
});
dialogLogin.listen('MDCDialog:cancel', function() {
console.log('canceled login');
});
const dialogDeliveryEle = document.getElementById('mdc-dialog-delivery-condition');
const dialogDelivery = new mdc.dialog.MDCDialog(dialogDeliveryEle);
dialogDelivery.listen('MDCDialog:accept', function() {
console.log('accepted delivery');
});
dialogDelivery.listen('MDCDialog:cancel', function() {
console.log('canceled delivery');
});
document.querySelector('#dialog-login').addEventListener('click', function (evt) {
dialogLogin.show();
});
document.querySelector('#dialog-delivery').addEventListener('click', function (evt) {
dialogDelivery.show();
});
</script>
</body>
Why does this not work locally?
UPDATE
As per my comment, version 0.28 of the MDC Javascript works with this code. The dialog boxes appear. So the question now is, in the latest version of the MDC Javascript how is this supposed to work?
After talking to the guys on the MDC Discord channel, it appears that .show() was replaced with .open().
In the codepan you have used the version 0.28.
Here is the example with the latest version.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Auth.X</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
</head>
<body>
<h1>How can I use several dialogs on the same website?</h1>
<h2>https://material.io/components/web/catalog/dialogs/</h2>
<!-- Trigger Dialogs -->
<button id="dialog-login">Open Login Dialog</button><br><br>
<button id="dialog-delivery">Open Delivery Dialog</button>
<!-- Dialogs: Login -->
<aside id="mdc-dialog-login"
class="mdc-dialog"
role="alertdialog"
aria-labelledby="mdc-dialog-login-label"
aria-describedby="mdc-dialog-login-description">
<div class="mdc-dialog__surface">
<header class="mdc-dialog__header">
<h2 id="mdc-dialog-login-label" class="mdc-dialog__header__title">
Login
</h2>
</header>
<section id="mdc-dialog-login-description" class="mdc-dialog__body">
[LOGIN FORM]
</section>
<footer class="mdc-dialog__footer">
<button type="button" class="mdc-button mdc-dialog__footer__button--cancel">Close</button>
<button type="button" class="mdc-button mdc-button--raised mdc-dialog__footer__button mdc-dialog__footer__button--accept">RegisteR</button>
</footer>
</div>
<div class="mdc-dialog__backdrop"></div>
</aside>
<!-- Dialogs: Delivery -->
<aside id="mdc-dialog-delivery-condition"
class="mdc-dialog js--mdc-delivery-condition"
role="alertdialog"
aria-labelledby="mdc-delivery-condition-label"
aria-describedby="mdc-delivery-condition-description">
<div class="mdc-dialog__surface">
<header class="mdc-dialog__header">
<h2 id="mdc-delivery-condition-label" class="mdc-dialog__header__title">
[Delivery]
</h2>
</header>
<section id="mdc-delivery-condition-description" class="mdc-dialog__body">
[TEXT]
</section>
<footer class="mdc-dialog__footer">
<button type="button" class="mdc-button mdc-dialog__footer__button--cancel">Close</button>
</footer>
</div>
<div class="mdc-dialog__backdrop"></div>
</aside>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<script>
// Find all the dialogs on the page
const dialogLoginEle = document.getElementById('mdc-dialog-login');
const dialogLogin = new mdc.dialog.MDCDialog(dialogLoginEle);
dialogLogin.listen('MDCDialog:accept', function() {
console.log('accepted login');
});
dialogLogin.listen('MDCDialog:cancel', function() {
console.log('canceled login');
});
const dialogDeliveryEle = document.getElementById('mdc-dialog-delivery-condition');
const dialogDelivery = new mdc.dialog.MDCDialog(dialogDeliveryEle);
dialogDelivery.listen('MDCDialog:accept', function() {
console.log('accepted delivery');
});
dialogDelivery.listen('MDCDialog:cancel', function() {
console.log('canceled delivery');
});
document.querySelector('#dialog-login').addEventListener('click', function (evt) {
dialogLogin.open();
});
document.querySelector('#dialog-delivery').addEventListener('click', function (evt) {
dialogDelivery.open();
});
</script>
</body>