I have a project developed with nodejs and react js and a button that redirects me to http://localhost:3000/openProblemSetter with the following code :
codeProblem =() => {
localStorage.setItem('token', null);
this.props.history.push('/openProblemSetter');
}
<Button
className="button_style"
variant="contained"
color="default"
size="small"
onClick={this.codeProblem}
>
ADD
</Button>
I have another server running that opens http://localhost:8000/OpenProblemSetter
what can I do so the button redirects me to localhost:8000 and not localhost:3000 if that's possible
Method 1 : You can use location.assign('url') to navigate to a new page.
Method 2 : Or you also can use Redirect from React Router routing library. <Redirect to='url'/>
Related
How to create a settings option for a website that allows users to change the background color, language, dark mode and light mode?
I want Settings Option Which is similar to Qwant Homepage settings
You must provide a code, remember that this forum seeks to solve problems.
I've made a quick example of how you can make a theme system.
You can use two buttons and useState to toggle this. Also, you can use cookies to storage the actual theme of the user.
This is an example component:
First, install
npm install js-cookie
Then, create a component file:
import React, { useState } from 'react';
const Toggler = () => {
const toggleTheme = (themeType) => {
Cookies.set('theme', themeType);
};
return (
<div>
<button onClick={() => toggleTheme('light')}>Light Theme</button>
<button onClick={() => toggleTheme('dark')}>Dark Theme</button>
<p>Current theme is {theme}</p>
</div>
);
}
export default Toggler;
Then you can call Toggler from other components. Also you can get the mode with Cookies.get('theme')
import Cookies from 'js-cookie';
const [theme, setTheme] = useState(Cookies.get('theme') || 'light');
Once you have the theme, you can use this as conditional for your styles or html code.
I followed the guidelines that provided by google to integrate new google sign in. I created HTML using Code generator that provided by Google.
Here I have attached the complete code
<svelte:head>
<title>Home</title>
<meta name="description" content="Svelte demo app" />
</svelte:head>
<section>
<div class="h-screen">
<div
id="g_id_onload"
data-client_id="534101779287-bm07dc8v4ln4kulqbql61nsglcku74vg.apps.googleusercontent.com"
data-context="use"
data-ux_mode="redirect"
data-login_uri="http://localhost:5173/auth/callback"
/>
<div class="bg-red-300 h-80">
<div
class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin_with"
data-size="medium"
data-logo_alignment="left"
data-width="180"
/>
</div>
</div>
</section>
It works fine for the first time render of the page.
When we are refreshing the page using Command+R or by clicking reload icon from the browser, Sign in button disappears.
A hard reload is server-side rendered when using SvelteKit. The code is probably incompatible with that or the execution order is wrong.
Check the console for errors and move code that has to run on the client to onMount. You can also turn off server-side rendering for specific pages using the ssr page option as a last resort.
For now I created component using Javascript, Here I have added the answer.
I declared google as global variable in app.d.ts
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
const google: any;
namespace App {
}
}
export {};
I created a svelte file to create a svelte component for sign in button
let canvas: any; //Created a variable to optain a reference to rendered div element
<div class="g_id_signin"
bind:this={canvas}/>
In onMount
onMount(async () => {
google.accounts.id.initialize({
client_id: "534101779287-bm07dc8v4ln4kulqbql61nsglcku74vg.apps.googleusercontent.com",
ux_mode: "redirect",
context: "use",
login_uri: "http://localhost:5173/auth/callback"
});
google.accounts.id.renderButton(canvas, {
width: '220',
theme: 'outline',
size: 'large',
type: 'standard',
text: 'signin_with',
shape: 'rectangular',
logo_alignment: 'left',
});
});
This code will work in initial render, Hard reload (Command+shift+R) and Reload (Command+R)
I'm using Chakra UI in React with Typescript and having such a weird issue I trying to implement Modal with the following code in modal.tsx file.
import {
useDisclosure,
Button,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalCloseButton,
ModalBody,
ModalFooter,
} from "#chakra-ui/react";
export default function CustomModal() {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<>
<Button onClick={onOpen}>Open Modal</Button>
<Modal closeOnOverlayClick={false} isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Create your account</ModalHeader>
<ModalCloseButton />
<ModalBody pb={6}></ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3}>
Save
</Button>
<Button onClick={onClose}>Cancel</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
}
once i click on Open Modal button it simply shows the overlay without actual content of the modal.
I tried to reproduce your problem and found that - For Chakra UI to work correctly, you need to set up the ChakraProvider at the root of your application.
import * as React from "react"
// 1. import `ChakraProvider` component
import { ChakraProvider } from "#chakra-ui/react"
function App({ Component }) {
// 2. Use at the root of your app
return (
<ChakraProvider>
<Component />
</ChakraProvider>
)}
Here is the running code sandbox link of your problem.
In App.js I wrapped the application in <ChakraProvider>.
Hope it works for you.
First Check You Wrappped Your App With ChakraProvider If Provided
i want to save vue js code Inside div in database using mongo db
i create ws to save page Inside mongoDb using nodejs
when i click save button to save code vue js Inside html
save(){
var vm=this;
var page={
"id":"2",
"page":vm.$el.innerHTML
}
console.log("hh"+vm.$el.innerHTML);
var HTTPpOST=axios.create({
baseURL: `http://localhost:3000/api/product/2`,
headers: {
Accept:'application/json'
}
})
HTTPpOST.put('',page).then(function(response){
}) .catch(function(error){
var vm=this;
console.log("error"+error);
})
i only get html code without vue js code
how can i get both and save them bothin my databse?
this is html :
<div id="app" ref="foo">
<ul>
<li v-for="prod in products">
<h1 style="color:red">{{prod.fields.name}}</h1>
<p>{{prod.fields.description}}</p>
</li>
</ul>
<button #click="save">save</button>
</div>
Try prerendering using Nuxt.js or webpack with vue-server-renderer. Server side rendering helps you to get that elements expanded by Vue.js and you will be having fully rendered webpage.
Look at Vue - Server Side Rendering
I am using polymer starter kit code and get the GUI with home, contact and user menu. I am using Java Dynamic Web Project in eclipse. So the base url is :
localhost:8080/TestProject/
When I click home after clicking contact or user menu then it changes the url to :
localhost:8080
I have tried to set default base url in app.js file as:
app.baseUrl = '/TestProject/';
But still the behaviour is the same.
If in routing.html, I make change like:
-
page('/TestProject/', function() {
app.route = 'home';
setFocus(app.route);
});
Nothing changes. But if I change in index.html:
<paper-menu class="app-menu" attr-for-selected="data-route" selected="[[route]]">
<a data-route="home" href="{{baseUrl}}TestProject">
<iron-icon icon="home"></iron-icon>
<span>Home</span>
</a>
Then the home url becomes:
http://localhost:8080/TestProject/#!/TestProject/
But it should be:
http://localhost:8080/TestProject/
or
http://localhost:8080/TestProject/#!/home
Guys where am I going wrong. Or where should I make change to achieve the home url.
Thanks a lot.
Newer versions of the PSK have following section in the router.html:
// Removes end / from app.baseUrl which page.base requires for production
if (window.location.port === '') { // if production
page.base(app.baseUrl.replace(/\/$/, ''));
}
page('/',updateRedux, function() {
page.redirect('/start');
});
page(app.baseUrl,updateRedux, function() {
page.redirect('/start');
});