smackalpha Posts - Answer Overflow

smackalpha

Posts Comments

KPCKevin Powell - Community

•Created by smackalpha on 11/14/2024 in #front-end

How to make text color adapt to progressbar

6 replies

KPCKevin Powell - Community

•Created by smackalpha on 10/15/2024 in #front-end

How to make bottom shadow in text in css.

16 replies

KPCKevin Powell - Community

•Created by smackalpha on 9/26/2024 in #front-end

how to add border radius for background image in div block

5 replies

KPCKevin Powell - Community

•Created by smackalpha on 9/24/2024 in #front-end

how to get rid of chrome default page once user logged in - nextjs

i am using nextjs router.replace once user entered home page. its working great. but issue is still back button is enabled. if i click back btn, it goes to chrome default page. how to get rid of that. anyone has any idea. router.replace({ pathname: '/home', });

1 replies

KPCKevin Powell - Community

•Created by smackalpha on 9/12/2024 in #front-end

how to create protected routes in Nextjs 14 on client side

I am creating a next app. In there, i have login, home pages at all. I created one Authentication file for protecting pages Authentication code: https://controlc.com/75886140 and i wrapped this in _app.js <Authentication> <Component {...pageProps} /> </Authentication> Its working fine. but the issue is if i type route home, i still can see home page code in source tab in chrome. I know we can use middleware to solve these kind of issue. In my case, i use only session storage so token data will be different per tab. but only cookies are supported in middleware. Any one suggest me with giving some approach to solve this issue. i dont want my home content to be loaded on DOM if the user is not logged in

1 replies

KPCKevin Powell - Community

•Created by smackalpha on 7/22/2024 in #front-end

Need a curve on top of app bar when selected

3 replies

KPCKevin Powell - Community

•Created by smackalpha on 7/8/2024 in #front-end

how to modify the slope in svg shape

5 replies

KPCKevin Powell - Community

•Created by smackalpha on 7/1/2024 in #front-end

How to make slope box in css.

7 replies

KPCKevin Powell - Community

•Created by smackalpha on 6/18/2024 in #front-end

How to Integrate webengage in nextjs app

I used WebEngage for tracking users. In React, I pasted the code in index.html under the head tag and it worked fine. In Next.js, since there's no index.html, I pasted it in _app.js, but I'm getting an error.

v4.js:1 Uncaught SyntaxError: Unexpected string (at v4.js:1:90)
storage-frame-1.13.htm:1 Uncaught ReferenceError: webengage_fs_configurationMap is not defined
    at t.onload (storage-frame-1.13.htm:1:2858)

v4.js:1 Uncaught SyntaxError: Unexpected string (at v4.js:1:90)
storage-frame-1.13.htm:1 Uncaught ReferenceError: webengage_fs_configurationMap is not defined
    at t.onload (storage-frame-1.13.htm:1:2858)

My _app.jsx code:

_app.js
export default function App({ Component }) {
  return (
    <>
      <Head><title>My Finance App </title><meta name="description" content="For Loan Journey" /></Head>
      <Script id="_webengage_script_tag" Strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            var webengage;
            !function(w,e,b,n,g){function o(e,t){e[t[t.length-1]]=function(){r.__queue.push([t.join("."),
            arguments])}}var i,s,r=w[b],z=" ",l="init options track screen onReady".split(z),a="webPersonalization feedback survey notification notificationInbox".split(z),c="options render clear abort".split(z),p="Prepare Render Open Close Submit Complete View Click".split(z),u="identify login logout setAttribute".split(z);if(!r||!r.__v){for(w[b]=r={__queue:[],__v:"6.0",user:{}},i=0;i < l.length;i++)o(r,[l[i]]);for(i=0;i < a.length;i++){for(r[a[i]]={},s=0;s < c.length;s++)o(r[a[i]],[a[i],c[s]]);for(s=0;s < p.length;s++)o(r[a[i]],[a[i],"on"+p[s]])}for(i=0;i < u.length;i++)o(r.user,["user",u[i]]);setTimeout(function()
            {var f=e.createElement("script"),d=e.getElementById("_webengage_script_tag");f.type="text/javascript",f.async=!0,f.src=("https:"==e.location.protocol?
            "https://widgets.in.webengage.com":"http://widgets.in.webengage.com")+"/js/webengage-min-v-6.0.js",d.parentNode.insertBefore(f,d)})}}(window,document,"webengage");webengage.init("in~~11680b78");
          `,
        }}
      />
        <Component />
    </>
  );
}

_app.js
export default function App({ Component }) {
  return (
    <>
      <Head><title>My Finance App </title><meta name="description" content="For Loan Journey" /></Head>
      <Script id="_webengage_script_tag" Strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            var webengage;
            !function(w,e,b,n,g){function o(e,t){e[t[t.length-1]]=function(){r.__queue.push([t.join("."),
            arguments])}}var i,s,r=w[b],z=" ",l="init options track screen onReady".split(z),a="webPersonalization feedback survey notification notificationInbox".split(z),c="options render clear abort".split(z),p="Prepare Render Open Close Submit Complete View Click".split(z),u="identify login logout setAttribute".split(z);if(!r||!r.__v){for(w[b]=r={__queue:[],__v:"6.0",user:{}},i=0;i < l.length;i++)o(r,[l[i]]);for(i=0;i < a.length;i++){for(r[a[i]]={},s=0;s < c.length;s++)o(r[a[i]],[a[i],c[s]]);for(s=0;s < p.length;s++)o(r[a[i]],[a[i],"on"+p[s]])}for(i=0;i < u.length;i++)o(r.user,["user",u[i]]);setTimeout(function()
            {var f=e.createElement("script"),d=e.getElementById("_webengage_script_tag");f.type="text/javascript",f.async=!0,f.src=("https:"==e.location.protocol?
            "https://widgets.in.webengage.com":"http://widgets.in.webengage.com")+"/js/webengage-min-v-6.0.js",d.parentNode.insertBefore(f,d)})}}(window,document,"webengage");webengage.init("in~~11680b78");
          `,
        }}
      />
        <Component />
    </>
  );
}

can someone help me to solve this issue.

1 replies

KPCKevin Powell - Community

•Created by smackalpha on 2/12/2024 in #front-end

fetch to axios

i have one function in fetch. i need to convert it to axios. In fetch, its working fine but in axios, its not working https://codefile.io/f/X6XoOM0XLC I dont what i am missing in axios. Is i am correctly passing in axios. plz help me

3 replies

KPCKevin Powell - Community

•Created by smackalpha on 1/9/2024 in #front-end

rsuite datePicker minDate and maxDate not working

I want to set minDate and maxDate in rsuite. but its not working. Plz anyone help me fix it Code Sandbox Link: https://codesandbox.io/p/sandbox/relaxed-star-jwdd5d?file=%2Findex.js%3A11%2C35 code: import React from "react"; import ReactDOM from "react-dom"; import "rsuite/dist/rsuite.min.css"; // Import default styles for rsuite import "./styles.css"; // Make sure this file exists and contains your custom styles import { DatePicker, Stack } from "rsuite"; const App = () => { const currentDate = new Date(); const minDate = new Date( currentDate.getFullYear() - 1, currentDate.getMonth(), currentDate.getDate() ); return ( <Stack direction="column" alignItems="flex-start" spacing={6}> <DatePicker format="MM/dd/yyyy" minDate={minDate} maxDate={currentDate} /> </Stack> ); }; ReactDOM.render(<App />, document.getElementById("root"));

4 replies

KPCKevin Powell - Community

•Created by smackalpha on 12/17/2023 in #front-end

Implementing a Non-Wrapping, Count-Based Multi-Select Dropdown with MUI Chips

1 replies

Gaming

Programming