Blancer.com Tutorials and projects

I have tried a lot and nothing is working, when I reload my page, all the objects which was changed cannot save their new informations… I don’t know where the error is, because the ID of the product still in the database MySQL but other informations are null (empty).

I see a lot of people start a component like:

export default function Example(){XYZ}

Is that the same as writing the function and then exporting at the bottom of the page like so?

function Example(){XYZ};

export default Example

next build

▲ Next.js 14.2.25

• Environments: .env

Creating an optimized production build …
✓ Compiled successfully
Linting and checking validity of types ..Failed to compile.

./components/HomeCard.tsx:43:12
Type error: ‘Icon’ cannot be used as a JSX component.
Its return type ‘ReactNode’ is not a valid JSX element.

41 | />
42 | ) : Icon && (

43 |
| ^
44 | )}
45 |
46 |
Next.js build worker exited with code: 1 and signal: null
Linting and checking validity of types . ELIFECYCLE  Command failed with exit code 1.

I’m working on a Node.js project using TypeScript and the amqplib package (currently at version 0.10.5). When I try to create a connection and channel in my RabbitMQ configuration file, TypeScript throws the following errors:

1. Property ‘close’ does not exist on type ‘Connection’
2. Property ‘createChannel’ does not exist on type ‘Connection’
3. Type ‘ChannelModel’ is missing the following properties from type ‘Connection’: serverProperties, expectSocketClose, sentSinceLastCheck, recvSinceLastCheck, sendMessage

import * as amqp from 'amqplib';
import { Connection, Channel } from 'amqplib';

export class RabbitMQConfig {
  private static connection: Connection | null = null;
  private static channel: Channel | null = null;

  public static async connect(): Promise<void> {
    if (!this.connection) {
      this.connection = await amqp.connect('amqp://localhost');
      this.channel = await this.connection.createChannel();

      this.connection.on('close', () => {
        console.error('RabbitMQ connection closed.');
      });

      this.connection.on('error', (err) => {
        console.error('RabbitMQ connection error:', err);
      });

      console.log('RabbitMQ connected and channel created successfully.');
    }
  }

  public static getChannel(): Channel {
    if (!this.channel) {
      throw new Error('RabbitMQ channel is not initialized. Call connect() first.');
    }
    return this.channel;
  }

  public static async closeConnection(): Promise<void> {
    if (this.channel) {
      await this.channel.close();
      this.channel = null;
    }
    if (this.connection) {
      await this.connection.close();
      this.connection = null;
    }
    console.log('RabbitMQ connection closed.');
  }
}

I don’t know what seems to be the issue since I did try importing the correct module but
TypeScript still complains that the methods close() and createChannel() do not exist on the Connection type.

Any suggestions on how to resolve this type of issue would be greatly appreciated.

import { StaticTimePicker } from '@mui/x-date-pickers/StaticTimePicker';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
      
  <LocalizationProvider dateAdapter={AdapterDayjs}>
          <DemoContainer components={['StaticTimePicker']}>
            <StaticTimePicker
              value={values.time}
              onChange={(newValue) =>
                handleChange({ target: { name: 'time', value: newValue } })
              }
              orientation="landscape"
              defaultValue={dayjs(formattedDateTime)}
            />
          </DemoContainer>
        </LocalizationProvider>

How to change the size of the StaticTimePicker?

I tried by adding sx prop and slotProps as well but it is not working.

Im trying to use classes defined in a scss file in a vue component but doesn’t work

Here are the files:

_zero-state.scss

@use '../../variables' as *;

.zero-state {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  padding: 80px;

  &__image {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 208px;
    height: 208px;

  }
  
  &__header {
    margin-top: 20px;
    // text-align: center;
  }

  &__content {
    margin-top: 12px;

  }

  &--empty {
    .zero-state__image{
      background-image: url('#{$illustrations-path}empty.svg')
    }
  }

  &--search {
    .zero-state__image{
      background-image: url('#{$illustrations-path}search.svg')
    }
  }

  &--loading {
    .zero-state__image{
      background-image: url('#{$illustrations-path}empty.svg')
    }
  }

  &--report {
    .zero-state__image{
      background-image: url('#{$illustrations-path}report.svg')
    }
  }

  &--no-connection {
    .zero-state__image{
      background-image: url('#{$illustrations-path}no-connection.svg')
    }
  }

  &--not-found-day {
    .zero-state__image{
      background-image: url('#{$illustrations-path}not-found-day.svg')
    }
  }

  &--not-found-night {
    .zero-state__image{
      background-image: url('#{$illustrations-path}not-found-night.svg')
    }
  }

  &--danger {
    .zero-state__image{
      background-image: url('#{$illustrations-path}danger.svg')
    }
  }

  &--ice-pop {
    .zero-state__image{
      background-image: url('#{$illustrations-path}ice-pop.svg')
    }
  }

  &--lost {
    .zero-state__image{
      background-image: url('#{$illustrations-path}lost.svg')
    }
  }

  &--fingerprint {
    .zero-state__image{
      background-image: url('#{$illustrations-path}fingerprint.svg')
    }
  }
}

main.scss

@forward './variables';
@forward './mixins';

@forward './modules/zero-state/zero-state';

@forward './basics/colors/colors';
@forward './basics/flex/flex';
@forward './basics/typography/typography';
@forward './basics/grid/grid';
@forward './basics/icons/icons';
@forward './basics/logos/logos';
@forward './basics/text/text';

base-zero-state.vue

<script setup>
import { computed } from 'vue'

const props = defineProps({
  header: {
    type: String,
    required: true
  },
  content: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: 'black'
  },
  empty: {
    type: Boolean,
    default: false
  },
  report: {
    type: Boolean,
    default: false
  },
  noConnection: {
    type: Boolean,
    default: false
  },
  notFound: {
    type: Boolean,
    default: false
  },
  danger: {
    type: Boolean,
    default: false
  },
  icePop: {
    type: Boolean,
    default: false
  },
  lost: {
    type: Boolean,
    default: false
  },
  fingerprint: {
    type: Boolean,
    default: false
  },
  search: {
    type: Boolean,
    default: false
  }
})

const fontColor = computed(() => {
  return 'color: ' + props.color
})

const objectClass = computed(() => {
  const notFoundClass =
    new Date().getHours() > 18 ? 'zero-state--not-found-night' : 'zero-state--not-found-day'
  return {
    'zero-state': true,
    'zero-state--empty': props.empty,
    'zero-state--search': props.search,
    'zero-state--report': props.report,
    'zero-state--danger': props.danger,
    'zero-state--ice-pop': props.icePop,
    'zero-state--lost': props.lost,
    'zero-state--fingerprint': props.fingerprint,
    'zero-state--no-connection': props.noConnection,
    [notFoundClass]: props.notFound
  }
})
</script>

<template>
  <div :class="objectClass">
    <div class="zero-state__image"></div>
    <div class="zero-state__header">
      <div :style="fontColor" class="h6-header content-title">{{ header }}</div>
    </div>
    <div :style="fontColor" class="zero-state__content content-title body-copy-bold grey500">
      {{ content }}
    </div>
    <div class="zero-state__actions"></div>
  </div>
</template>

vite.config.js

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // api: 'modern-compiler', // or "modern"
        additionalData: `
          @use "@/assets/scss/main.scss" as *;
          `
      }
    }
  },
})

package.json

 "devDependencies": {
    "@mdi/font": "^7.4.47",
    "@rushstack/eslint-patch": "^1.2.0",
    "@vitejs/plugin-vue": "^5.2.1",
    "@vitest/coverage-c8": "^0.31.1",
    "@vue/eslint-config-prettier": "^7.1.0",
    "@vue/test-utils": "^2.3.2",
    "eslint": "^8.39.0",
    "eslint-plugin-vue": "^9.11.0",
    "jsdom": "^22.0.0",
    "prettier": "^2.8.8",
    "sass": "^1.85.1",
    "vite": "^6.2.1",
    "vite-plugin-ejs": "^1.6.4",
    "vitest": "^0.31.0"
  }

I’ve missing something? I can use the colors defined in @forward ‘./basics/colors/colors’; in the proyect but no the classes defined @forward ‘./modules/zero-state/zero-state’;

I would like to remove classes of an element not with the function document.querySelector("#id").classList.remove("class") but with the function document.querySelector("#id").classes.del("class")

I was able to create an alias for the remove function and now I can use the function document.querySelector("#id").classList.del("class")

Option 1:

DOMTokenList.prototype.del = function () {
    return DOMTokenList.prototype.remove.apply(this, Array.prototype.slice.call(arguments));
}

Option 2:

DOMTokenList.prototype.del = DOMTokenList.prototype.remove;

Please tell me which of these options is better.

But then I can’t create an alias for classList.
I tried the following options:

Element.prototype.classes = Element.prototype.classList;
Element.prototype.classes = DOMTokenList;
Element.prototype.classes = Object.create(DOMTokenList);
Element.prototype.classes = new DOMTokenList();

By using SubtleCrypto, I’m trying to create function for encrypting and decrypting data to make my http request and response to be encrypted to protect sensitive data from unauthorized access.

I send request via axios by doing below.

MyComponent.vue

const key = await this.generateKey();
const data = "Protected Request";
const { ciphertext, iv, tag } = await this.encryptData(key, data);

const exportedKey = await this.exportKey(key);

let dataObj = {}
dataObj.ciphertext = Buffer.from(ciphertext).toString('base64')
dataObj.iv = Buffer.from(iv).toString('base64')
dataObj.tag = Buffer.from(tag).toString('base64')
dataObj.key = Buffer.from(exportedKey).toString('base64')

const response = await axios.post('api/fetchingData', dataObj);

let result = response.data

MyController.php

public function store(Request $request){
    $ciphertext = base64_decode($request->input('ciphertext'));
    $iv = base64_decode($request->input('iv'));
    $tag = base64_decode($request->input('tag'));
    $key = base64_decode($request->input('key'));
    
    //function to decrypt data.
    
    /** Want to encrypt the return data to protect sensitive information from database */
    $returnData = "This is sample return data to be encrypted";
    $encryptedResponse = openssl_encrypt(
        $returnData,
        'aes-256-gcm',
        $key,
        OPENSSL_RAW_DATA,
        $iv,
        $tag
    );
    return response()->json([
        'encryptedResponse' => base64_encode($encryptedResponse),
        'iv' => base64_encode($iv),
        'tag' => base64_encode($tag),
    ]);

}

If i console.log(result) to check the result, it shows below

Which seems correct, as it really encrypted data.

Now, i want to decrypt this result so i can use it on my webpage(example: table)
I do..

const importedKey = await this.importKey(exportedKey);
const resultData = new Uint8Array(atob(result.encryptedResponse).split("").map(c => c.charCodeAt(0)));

console.log("importedKey:", importedKey);
console.log("resultData:", resultData);
console.log("iv:", iv);

and give me this console result

But when I try to decrypt data, it gives me error below..

“Uncaught (in promise) OperationError”

This is how I do it and my decryptData() function

async fetchData(){
    // Other codes(see above)..
    const decryptedData = await this.decryptData(importedKey, resultData, iv);
    console.log("Decrypted Data Result:", decryptedData);
},  
        
async decryptData(key, encryptedData, myIV) {
    try {
        const decryptedData = await window.crypto.subtle.decrypt(
            {
                name: "AES-GCM",
                iv: myIV, 
                tagLength: 128 
            },
            key,
            encryptedData // the content
        );

        return new TextDecoder().decode(decryptedData);
    } catch (error) {
        console.error("Decryption error:", error);
        throw error;
    }
},

How to do so I can decrypt the response.data or result? The value of show in console should be “This is sample return data to be encrypted.”, which is came from the encrypted data in controller.

I’m new to Next.js and I’m trying to send an email using an API route, but I’m facing an issue where I cannot access the API.

I have the following structure:

• API Route: src/app/api/send-mail/route.ts
• Front-end Component: src/app/UnityGame.tsx

Even when I try to access the API manually by going to "https://localhost:3000/api/send-mail", I get a 404 Not Found error.

I’ve double-checked that the API route is in the correct directory and the file is set up properly with the POST handler. I also confirmed that I’m using the App Router in Next.js, but still, the route seems inaccessible.

Has anyone encountered a similar issue, or could you guide me on what might be causing this problem?

// src/app/api/send-mail/route.ts
import { NextResponse } from 'next/server';
import nodemailer from 'nodemailer';

export async function POST(req: Request) {
  const { recipient, body } = await req.json();

  if (!recipient || !body) {
    return NextResponse.json({ error: 'Recipient and body are required' }, { status: 400 });
  }

  const transporter = nodemailer.createTransport({
    host: process.env.SMTP_HOST,
    port: parseInt(process.env.SMTP_PORT || '587'),
    secure: process.env.SMTP_PORT === '465',
    auth: {
      user: process.env.SMTP_USER,
      pass: process.env.SMTP_PASS,
    },
  });

  const mailOptions = {
    from: process.env.SMTP_USER,
    to: recipient,
    subject: 'Test Email',
    text: body,
  };

  try {
    await transporter.sendMail(mailOptions);
    return NextResponse.json({ message: 'Email sent successfully' });
  } catch (error) {
    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
  }
}

When I attempt to send a request to the API from the client-side, I cannot reach the endpoint.

How to fetch the Folder from Autodesk Construction Cloud?I have been fetched Hub Id and Project ID I want Folder ID and access the folder as shown in saem as ACC? Any JS developer can resolve my query?