Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
I have table A
| ID | Code |
|---|---|
| 100 | S01 |
| 100 | S02 |
| 101 | S01 |
| 101 | S03 |
| 102 | S01 |
| 102 | S03 |
| 103 | S01 |
| 103 | S02 |
| 103 | S04 |
| 104 | S01 |
| 104 | S02 |
I want to get count of ids which have code S03 and ids with out code S03
Expected Result
| CodeFound | NoCode |
|---|---|
| 2 | 3 |
Here code found ids would be(101,102) and no code are(100,103,104)
Im having issue in fetching NoCode records it is fetching the count of records which are not supposed to..
select count(unique ID) from A where Code not in 'S03'
Can someone please help on this
I’m trying to create a google form that populates a google sheet. I have the form, “Gym Form A” and “Gym Form B” working but A won’t automatically redirect to B.I have a macro that generates a link and that link is filled on the last row and column of a specific sheet on google sheets. I wanted to pull that link dynamically and then just have the sheet A redirect to there but it isn’t working.
Redirect code
“
function onFormSubmit(e) {
generatePrefilledLinks();
}
function generatePrefilledLinks() {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
const data = sheet.getDataRange().getValues();
const headers = data[0];
const dateIndex = headers.indexOf("Workout Date");
const typeIndex = headers.indexOf("Workout Type");
if (dateIndex === -1 || typeIndex === -1) {
throw new Error("Headers 'Workout Date' and/or 'Workout Type' not found.");
}
const baseURL = "https://docs.google.com/forms/d/e/1FAIpQLScojqj2IUfZSpyOATMsJKuTbr_iSGJ3NginEBY4wCwWddp8-A/viewform";
const linkCol = headers.length + 1;
sheet.getRange(1, linkCol).setValue("Prefilled Exercise Log Link");
const lastRowIndex = data.length - 1;
const workoutDate = encodeURIComponent(data[lastRowIndex][dateIndex]);
const workoutType = encodeURIComponent(data[lastRowIndex][typeIndex]);
const prefillURL = `${baseURL}?entry.1754835796=${workoutDate}&entry.2111064850=${workoutType}`;
sheet.getRange(lastRowIndex + 1, linkCol).setValue(prefillURL);
}
I would like it to actually take that link and update the gym form A redirect link so it autofill’s my gym form B portion so all I need to do is fill up gym form B Gym Form A redirect link
However it isn’t working and I’m getting a blank screen Current issue screen
Before I was getting invalid values on the other page, but the code I have gives the correct link.
function doGet() {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
const data = sheet.getDataRange().getValues();
if (data.length < 2) {
return HtmlService.createHtmlOutput("No responses found.");
}
const lastRow = data.length - 1; // last row (0-indexed)
const lastCol = data[0].length - 1; // last column (0-indexed)
const lastValue = data[lastRow][lastCol].trim(); // Trim any leading or trailing spaces
// Log for debugging purposes
Logger.log("Last value: " + lastValue);
// Ensure the last value is a valid URL and redirect directly
const htmlContent = `
<html>
<head>
<meta http-equiv="refresh" content="0; url=${lastValue}" />
</head>
<body>
<p>Redirecting to the workout log...</p>
</body>
</html>
`;
// Return HTML content
return HtmlService.createHtmlOutput(htmlContent);
}
“
Get link code
I deployed and have it on anyone with link and the executer is “me” not sure where else to go.
I’d like to apply a dashed border around my targeted table columns when a draggable element is hovered over the column on dragenter, and remove the border on dragleave.
I am able to successfully target and style these table columns, however there is a “blinking” effect where the border gets quickly applied/removed. Is there a way I can add in a specific check to make this drag transition between columns smoother and avoid these event listeners/style application and removal from being executed unnecessarily?
<div draggable="true">Drop item</div>
<table>
<tbody>
<tr>
<td class="cell" data-column-number="1">Cell-1</td>
<td class="cell" data-column-number="2">Cell-2</td>
</tr>
<tr>
<td class="cell" data-column-number="1">Cell-3</td>
<td class="cell" data-column-number="2">Cell-4</td>
</tr>
</tbody>
</table>
const tds = document.querySelectorAll("[data-column-number]")
for (let td of tds) {
td.addEventListener("dragenter", (event) => {
let colNum = td.dataset.columnNumber
let cols = document.querySelectorAll(`[data-column-number="${colNum}"]`)
console.log("<-- drag enter --->")
for (let col of cols) {
col.classList.add("hovered")
}
})
td.addEventListener("dragleave", (event) => {
let colNum = td.dataset.columnNumber
let cols = document.querySelectorAll(`[data-column-number="${colNum}"]`)
console.log("<-- drag leave --->")
for (let col of cols) {
col.classList.remove("hovered")
}
})
}
div {
border: dotted 2px green;
width: 70px;
background-color: yellow;
text-align: center;
cursor: grab;
}
div:active {
cursor: grabbing;
}
td.hovered {
border: dashed 2px red;
}
table {
margin-top: 30px;
}
JsFiddle Link: https://jsfiddle.net/z8mkdj3y/26/
I created and extension to block all images being loaded inside pages (and it is indeed blocking) but I want it not to block images when the URL contains the string xxx. So I used this code inside my json rule_resources file:
[
{
"id":1,
"priority":1,
"action":{
"type":"block"
},
"condition":{
"urlFilter":"*",
"resourceTypes":["image"]
}
},
{
"id":2,
"priority":2,
"action":{
"type":"allow"
},
"condition":{
"urlFilter":"xxx",
"resourceTypes":["image"]
}
}
]
Reading the documentation, I think everything is correct but for some reason when I access websites like https://example.com/test?xxx= the images are still being blocked. Could you please tell me what I am doing wrong?
Following the Stripe documentation I come to create a webhook endpoint on my app to catch the customer.subscription.created event, which I use as a signal to create a new account in my database.
I’m using the stripe checkouts to send the user to make the payment process and then when comes back to my webpage I look to and endpoint in my database to fetch the account data.
The problem is, sometimes the Stripe checkout page gets closed and my webpage gets loaded back more fast than stripe actually doing the webhook’s request with the event.
So which is the proper way to handle this discrepancy on the timings?
Don’t tell me is putting a setTimeout before my fetching process. It cannot be that, right?
I’m trying to handle a QML/JavaScript situation where the user presses the delete key. For some reason, Keys.onDeletePressed: {} is not firing. I am getting the signal for onEscapePressed, onSpacePressed, and onReturnPressed, so I don’t think it’s a focus issue, or some other setup issue. I can’t figure out why it’s only the delete key that’s not working. Is this a bug?
Keys.onReturnPressed: {
// code that does stuff deleted.
console.log("Return Pressed.");
}
Keys.onEscapePressed: {
// code that does stuff deleted.
console.log("Escape pressed.");
}
Keys.onDeletePressed: {
console.log("delete pressed");
}
Keys.onSpacePressed: {
console.log("space pressed.");
}
The big problem here is that my parameter garage is loading into the component properly, but doesn’t seem to be accessible within any of the functions inside the component. I haven’t run into this before and AG Grid is the newest tool I have to blame for the weird behavior. I’m trying to transform a table by changing it’s row and column data. Might be easier to create a new table instead but hoping not to go that route.
import { agGridHelpers } from "../../../helpers";
import {AgGridReact} from 'ag-grid-react';
import { ModuleRegistry, AllCommunityModule} from "ag-grid-community";
import { useState, useRef, useEffect } from "react";
ModuleRegistry.registerModules([AllCommunityModule]);
/* Returns a table filled with data from the garage state object. if there is no data in the object only table headers appear.*/
const CustomerApplications = ({garage})=>{
const [rowData, setRowData] = useState([]);
console.log(garage); //logs the correct array.
useEffect(()=>{
console.log("last");
setRowData(garage);
}, [garage])
const [colDefs, setColDefs] = useState([
{headerName: "Nickname", field: "application_name", maxWidth: 250, minWidth: 200},
{headerName: "Application", children: [{field: "make"}, {headerName: "Model", field: "model"}, {headerName: "Year", field: "year"},
{headerName: "Engine", field: "engine"},]},
{headerName: "Batteries", maxWidth: 500, minWidth:200, valueSetter: p=> "See Batteries",
valueGetter: p=> "See Batteries", cellDataType: 'text', onCellClicked: e=>newTable(e)}
])
const newTable = (e)=>{
console.log(e);
console.log(garage); // logs an empty array
setRowData(e.data.batteries);
setColDefs([{headerName: "Back", onCellClicked: e=> resetTable(garage)},{headerName: "Battery", field: 'internal_part_number'}, {headerName: "CA", field: "attributes.1.attribute_value"},
{headerName: "CCA", field: 'attributes.0.attribute_value'}, {headerName: "Price", field: "list"}])
console.log(garage); //still logging empty array.
}
const resetTable = (garage)=>{
console.log("Reseting");
console.log(garage); //also an empty array.
setRowData(garage);
setColDefs([{headerName: "Nickname", field: "application_name", maxWidth: 250, minWidth: 200},
{headerName: "Application", children: [{field: "make"}, {headerName: "Model", field: "model"}, {headerName: "Year", field: "year"}, {headerName: "Engine", field: "engine"},]},
{headerName: "Batteries", maxWidth: 500, minWidth:200, valueGetter: p=> "See Batteries", cellDataType: 'text',
onCellClicked: e=> newTable(e)}
]);
}
return (
<div id="customerApplicationInfo" className="hiddenTabInfo agGridHolder">
<AgGridReact
theme={agGridHelpers.regTable}
rowData={rowData}
columnDefs={colDefs}
autoSizeStrategy={{type: 'fitGridWidth'}}
/>
</div>
);
};
export default CustomerApplications;
I’m trying to upload an image from Google drive to an LLM from analysis. I have the working code below:
function openRouterApiRequest() {
var apiKey = "****";
// var imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Gfp-wisconsin-madison-the-nature-boardwalk.jpg/2560px-Gfp-wisconsin-madison-the-nature-boardwalk.jpg';
var imageUrl = "https://drive.google.com/file/d/11178UwHmPb2TAnYCyxFOKXlPh-vSPecv/view?usp=sharing";
var apiEndpoint = 'https://openrouter.ai/api/v1/chat/completions';
var payload = {
"model": "meta-llama/llama-4-maverick",
"messages": [
{
"role": "user",
"content": [
{
"type": "text",
"text": "What is in this image?"
},
{
"type": "image_url",
"image_url": {
"url": imageUrl
}
}
]
}
]
};
var options = {
'method': 'post',
'headers': {
'Authorization': 'Bearer ' + apiKey,
'Content-Type': 'application/json'
},
'payload': JSON.stringify(payload),
'muteHttpExceptions': true // To get the response even if the request fails
};
var response = UrlFetchApp.fetch(apiEndpoint, options);
var responseCode = response.getResponseCode();
var responseBody = response.getContentText();
// Handle the response as needed
Logger.log('Response Code: ' + responseCode);
Logger.log('Response Body: ' + responseBody);
// You might want to parse the responseBody if it's JSON
try {
var jsonResponse = JSON.parse(responseBody);
Logger.log(jsonResponse);
} catch (e) {
Logger.log('Failed to parse response as JSON: ' + e.message);
}
}
If I uncomment:
var imageUrl = 'https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Gfp-wisconsin-madison-the-nature-boardwalk.jpg/2560px-Gfp-wisconsin-madison-the-nature-boardwalk.jpg';
The output includes :{model=meta-llama/llama-4-maverick, created=1.744144885E9, system_fingerprint=, choices=[{finish_reason=stop, native_finish_reason=stop, index=0.0, logprobs=null, message={content=The image depicts a serene landscape featuring a wooden boardwalk or path that traverses through a lush grassy field. The boardwalk, constructed from weathered wooden planks, is flanked by tall grasses on both sides and appears to be slightly elevated above the surrounding terrain.
If I try the sharable link : https://drive.google.com/file/d/11178UwHmPb2TAnYCyxFOKXlPh-vSPecv/view?usp=sharing,
I get: {“error”:{“message”:”Provider returned error”,”code”:502,”metadata”:{“raw”:”error, status code: 500, status: , message: invalid character ‘I’ looking for beginning of value, body: “,”provider_name”:”Novita”}},”user_id”:”user_2i6MRzMhAMlWPTYRLTP5uRwhSyx”}
It appears that this is not readable by the LLM. Is there any way to make it readable?
I’m trying to generate a dynamic table in WordPress using DataTables and a shortcode. The console shows no errors and displays the ajax response. The table fills with data but it still says “PROCESSING”
enter image description here
I am looking for a solution to my problem.
structure of my plugin:
main
js/main.js
In the main function I create a table structure and send parameters to the js script
Answer from ajax:
enter image description here
my js file
jQuery(document).ready(function($) {
$("#my-dynamic-table").DataTable({
"processing": true,
"serverSide": false,
"ajax": {
"url": my_plugin_ajax.ajax_url, // Ajax URL WordPressa
"type": "POST",
"dataType": "json", // Określenie, że dane zwracane z serwera będą w formacie JSON
"data": function(d) {
d.action = 'get_new_data';
d.imie = my_plugin_ajax.imie; //$('#my-dynamic-table').data('id');
d.nazwisko = my_plugin_ajax.nazwisko; //$('#my-dynamic-table').data('name');
//d.city = $('#my-dynamic-table').data('city');
},
"error": function(xhr, status, error) {
console.error('AJAX Error:', status, error);
$('#table-body').html('<p>Error loading data. Status: ' + status + ', Error: ' + error + '</p>');
},
"success": function(response) {
// Funkcja success - działa, gdy dane zostały załadowane
if (response.success) {
console.log('Dane:', response.data);
console.log('Czy Tablica:',Array.isArray(response.data));
//////////////////////////
var tableBody = $('#table-body'); // Ciało tabeli
tableBody.empty(); // Wyczyść poprzednie dane
// Wyświetlamy dane w tabeli
response.data.forEach(function(item) {
//$('#table-body').empty(); // Czyszczenie poprzednich danych
// Dodaj nowe dane do tabeli - stale parametry
var row = $('<tr></tr>');
row.append('<td>' + item.id + '</td>');
// Dodanie dynamicznych kolumn
if (item.imie) {
row.append('<td>' + item.imie + '</td>');
}
if (item.nazwisko) {
row.append('<td>' + item.nazwisko + '</td>');
}
row.append('<td>' + item.czas + '</td>');
row.append('</tr>');
tableBody.append(row);
});
//////////////////////////
} else {
alert("Brak danych do wyświetlenia.");
}
}
},
"paging": true,
"ordering": true,
"info": true,
});
// Automatyczne odświeżanie tabeli co 5 sekund
setInterval(function() {
$('#my-dynamic-table').DataTable().ajax.reload();
}, 5000); // Odśwież co 5 sekund
});
I would be grateful for your tips
I built a custom React hook for a stopwatch that uses useState and setInterval to update a counter every second. The counter seems to work in that it resets to 0 when it reaches 5 (which then adds a new product in my component), but when I log the counter in the setInterval callback, it prints ‘undefined’ first and then ‘NaN’ on subsequent ticks.
Here is my custom hook code:
import { useState, useRef } from "react";
export const useStopWatch = (initialCounter = 0) => {
const [counter, setCounter] = useState(initialCounter);
let intervalid = useRef(false);
const start = () => {
if (!intervalid.current)
intervalid.current = setInterval(() => {
setCounter((count) => count + 1);
console.log("counter is: " + counter);
}, 1000);
};
const stop = () => {
clearInterval(intervalid.current);
intervalid.current = false;
};
const reset = (initialCounter) => {
setCounter(initialCounter);
};
return {
counter,
start,
stop,
reset,
};
};
And here’s how I’m using the hook in my Products component:
import React, { useEffect, useState } from "react";
import { useStopWatch } from "./useStopWatch";
const PRODUCTS = [
{ id: 123, name: "Product 1", description: "product 1 description", price: 200 },
{ id: 143, name: "Product 2", description: "product 2 description", price: 260 },
{ id: 272, name: "Product 3", description: "product 1 description", price: 410 },
];
const Products = () => {
const [products, setProducts] = useState([]);
const { counter, start, stop, reset } = useStopWatch();
useEffect(() => {
start();
console.log("count is ", counter);
const fetchProducts = async () => {
const fetchedProducts = await getProducts();
setProducts(fetchedProducts);
};
fetchProducts();
return () => {
console.log("count is ", counter);
stop();
};
}, []);
useEffect(() => {
console.log("Count in second useEffect is ", counter);
}, [counter]);
useEffect(() => {
if (counter < 5) return;
const fetchProducts = async () => {
if (counter >= 5) {
const fetchedProducts = await getProducts();
fetchedProducts.push({
id: Math.random(),
name: "Product 4",
description: "product 4 description",
price: 1920,
});
setProducts(fetchedProducts);
reset(0);
}
};
fetchProducts();
}, [counter, reset]);
const getProducts = async () => {
return new Promise((resolve, reject) => {
const isError = false;
setTimeout(() => {
if (isError) reject("Something happens during fetching products");
resolve(PRODUCTS);
}, 2000);
});
};
return (
<div className="products">
<h1>Products</h1>
{products.map((product) => (
<div key={product.id}>
<h2>{product.name}</h2>
<p>{product.description}</p>
<p>Price: {product.price}</p>
</div>
))}
</div>
);
};
export default Products;
i expect that counter will be
1
2
3
4
5
not undefiened then NaN
I have created a component which has three tabs. Each tab has a form. I enter details in first form and move to second form. After that again I move back to first form and the form is back to initial state. How to avoid that?
"use client";
import { MODELS_CONSTANTS } from "@/shared/constants/models.constants";
import CommonService from "@/shared/services/common/common.service";
import FuseSvgIcon from "@fuse/core/FuseSvgIcon";
import { Box, Tab, Tabs, Typography } from "@mui/material";
import { useEffect, useState } from "react";
import ListViewAction from "./ListViewAction";
import ListViewFields from "./ListViewFields";
import ListViewForm from "./ListViewForm";
import ListViewProvider from "./context/listViewContext";
const commonService = new CommonService();
const Listview = (props) => {
const [selectview, setselectview] = useState(0);
const [fieldData, setFieldData] = useState([]);
const [actionData, setActionData] = useState([]);
const listview = ["List View Form", "List View Field", "List View Action"];
const handleclicktab = (event, index) => {
setselectview(index);
};
const getFieldsData = async () => {
const response = await commonService.getDataByField(MODELS_CONSTANTS?.LIST_FIELDS, "list_view_id", props?.rowData._id);
if (response.status === 200) {
setFieldData(response.data.data);
}
};
const getActionData = async () => {
const response = await commonService.getDataByField(MODELS_CONSTANTS?.LIST_ACTIONS, "list_view_id", props?.rowData._id);
if (response.status === 200) {
setActionData(response.data.data);
}
};
useEffect(() => {
if (props?.rowData._id) {
getFieldsData();
getActionData();
}
}, []);
return (
<ListViewProvider>
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
<Box className="flex justify-between items-center p-24">
<Typography variant="h5">List View Setup</Typography>
<FuseSvgIcon className="cursor-pointer" onClick={() => props.onClose()}>
heroicons-outline:x-mark
</FuseSvgIcon>
</Box>
<Tabs value={selectview} variant="fullWidth" onChange={handleclicktab}>
{listview.map((item, index) => {
return <Tab key={index} label={item} disabled={!Object.keys(props?.rowData).length && index !== 0} />;
})}
</Tabs>
</Box>
<Box sx={{ padding: 2 }}>
{selectview === 0 && <ListViewForm formRowData={props.rowData} />}
{selectview === 1 && <ListViewFields fieldData={fieldData} formRowDataId={props.rowData._id} />}
{selectview === 2 && <ListViewAction actionData={actionData} formId={props.rowData._id} />}
</Box>
</ListViewProvider>
);
};
export default Listview;
Each tab component has useeffect to fill the details in edit mode.
const ListViewForm = ({ formRowData }) => {
const { setListModule, listViewFormData, setListViewFormData } = useContext(ListViewContext);
const dispatch = useAppDispatch();
const [open, setOpen] = useState(false)
type FormType = {
list_name?: { name: string; value: string } | string;
display_type?: { display_type: string; value: string } | string;
list_type?: { list_type: string; value: string } | string;
list_description?: { description: string; value: string } | string;
api_registry?: { api_registry: string; value: string } | string;
module?: { module: string; value: string } | string;
reference_type?: { name: string; value: string } | string;
reference_id?: { reference_id: string; value: string } | string;
drawer_width?: { drawer_width: string; value: string } | string;
size?: { class: string; value: string } | string;
tile_type?: { tile_type: string; value: string } | string;
selected_tab?: { selected_tab: string; value: string } | string;
unique_fields?: any;
enable_delete?: boolean;
enable_inline_edit?: boolean;
common_title?: { common_title: string; value: string } | string;
};
const display_type = [
{ name: "--", value: "--" },
{ name: "Tile", value: "tile" },
{ name: "Grid", value: "grid" },
];
const list_type = [
{ name: "--", value: "--" },
{ name: "Search", value: "search" },
{ name: "Processing", value: "processing" },
{ name: "Report", value: "report" },
];
const drawer_width = [
{ name: "--", value: "--" },
{ name: "100%", value: "100%" },
{ name: "75%", value: "75%" },
{ name: "50%", value: "50%" },
{ name: "25%", value: "25%" },
];
const selected_tab = [{ name: "--", value: "--" }];
const unique_fields = [
{ name: "--", value: "--" },
{ name: "Order ID", value: "orderid" },
{ name: "InfoCard", value: "infocard" },
];
const { control, handleSubmit, watch, setValue, reset } = useForm<FormType>({
mode: "onChange",
defaultValues: listViewFormData,
});
const formData = watch();
const formValues = useWatch({ control }); // Watch form values
useEffect(() => {
setListViewFormData(formValues); // Update state on value change
}, [formValues, setListViewFormData]);
const [modules, setModules] = useState([]);
const [initAction, setInitAction] = useState([]);
const [reference, setreference] = useState([]);
const [referenceid, setreferenceid] = useState([]);
const [classtype, setclasstype] = useState([]);
const [tiletype, settiletype] = useState([]);
useEffect(() => {
commonService.getAllData(MODELS_CONSTANTS.MODULES).then((res) => {
const module_arr = res?.data?.data.map((item: any) => ({
name: item?.entity_name,
value: item?.entity_code,
_id: item?.collection_id,
}));
setModules(module_arr);
});
commonService.getAllData(MODELS_CONSTANTS.API_REGISTRIES).then((res) => {
const module_arr = res?.data?.data.map((item: any) => ({
name: item?.api_name,
value: item?._id,
}));
setInitAction(module_arr);
});
commonService.getDataByField(MODELS_CONSTANTS.VALUE_SET_DETAILS, "vs_code", "FORM_COMPONENTS").then((res) => {
const module_arr = res?.data?.data.map((item: any) => ({
name: item?.vsd_code,
value: item?.vsd_code,
}));
setreference(module_arr);
});
commonService.getAllData(MODELS_CONSTANTS.FORM_SETUP).then((res) => {
const module_arr = res?.data?.data.map((item: any) => ({
name: item?.form_name,
value: item?._id,
}));
setreferenceid(module_arr);
});
commonService.getDataByField(MODELS_CONSTANTS.VALUE_SET_DETAILS, "vs_code", "CLASS_TYPE").then((res) => {
const module_arr = res?.data?.data.map((item: any) => ({
name: item?.vsd_code,
value: item?.vsd_code,
}));
setclasstype(module_arr);
});
commonService.getDataByField(MODELS_CONSTANTS.VALUE_SET_DETAILS, "vs_code", "TILE_TYPES").then((res) => {
const module_arr = res?.data?.data.map((item: any) => ({
name: item?.vsd_code,
value: item?._id,
}));
settiletype(module_arr);
});
}, []);
useEffect(() => {
reset({
list_name: formRowData?.list_view_name,
display_type: display_type.find((a) => a.value === formRowData.display_type),
list_type: list_type.find((a) => a.value === formRowData.list_type),
list_description: formRowData?.list_view_description,
api_registry: initAction.find((a) => a.value === formRowData?.api_id) || "",
module: modules.find((a) => a.value === formRowData?.module_id),
unique_fields: formRowData.unique_fields,
drawer_width: drawer_width.find((a) => a.name === formRowData.drawer_width),
reference_type: reference.find((a) => a.name === formRowData.reference_type),
reference_id: referenceid.find((a) => a.value === formRowData.reference_id),
tile_type: tiletype.find((a) => a.value === formRowData.tile_type) || "",
size: classtype.find((a) => a.value === formRowData.class_type),
enable_delete: formRowData.show_delete_yn,
enable_inline_edit: formRowData.inline_edit_yn,
common_title: formRowData?.common_title,
});
}, [tiletype]);
const return_id = (a, key) => {
if (typeof a[key] === "object") {
return a[key].value;
} else {
return a[key];
}
};
const array_id = (a, key) => {
if (a[key] === "array") {
return a[key].value;
} else {
return a[key];
}
};
const onSubmit = async (data: FormType) => {
const listformpayload = {
...formRowData,
list_view_name: data.list_name ? return_id(data, "list_name") : "",
display_type: data.display_type ? return_id(data, "display_type") : "",
list_type: data.list_type ? return_id(data, "list_type") : "",
list_view_description: data.list_description ? return_id(data, "list_description") : "",
api_id: data.api_registry ? return_id(data, "api_registry") : "",
module_id: data.module ? return_id(data, "module") : "",
reference_type: data.reference_type ? return_id(data, "reference_type") : "",
reference_id: data.reference_id ? return_id(data, "reference_id") : "",
drawer_width: data.drawer_width ? return_id(data, "drawer_width") : "",
class_type: data.size ? return_id(data, "size") : "",
tile_type: data.tile_type ? return_id(data, "tile_type") : "",
selected_tab: data.selected_tab ? return_id(data, "selected_tab") : "",
unique_fields: data.unique_fields ? array_id(data, "unique_fields") : "",
common_title: data.common_title,
show_delete_yn: data.enable_delete,
inline_edit_yn: data.enable_inline_edit,
};
const response = await commonService.saveRecord(MODELS_CONSTANTS.LIST_VIEW, listformpayload);
if (response.status === 200) {
dispatch(showMessage({ message: "Data Saved Successfully" }));
}
};
const setModelSchema = (item) => {
setListModule(item);
dispatch(closeDialog())
}
The above functions are in first tab component.
const primaryHeader = document.querySelector(".primary-header");
const navToggle = document.querySelector(".mobile-nav-toggle");
const primaryNav = document.querySelector(".primary-navigation");
navToggle.addEventListener("click", () => {
primaryNav.hasAttribute("data-visible") ?
navToggle.setAttribute("aria-expanded", false) :
navToggle.setAttribute("aria-expanded", true);
primaryNav.toggleAttribute("data-visible");
primaryHeader.toggleAttribute("data-overlay");
});:root {
--clr-accent-500: #56452e;
--clr-accent-400: #ab9368;
--clr-accent-300: #c1a156;
--clr-accent-100: hsl(13, 100%, 96%);
--clr-primary-400: #0d0b18;
--clr-neutral-900: #0a0a0a;
--clr-neutral-100: hsl(0, 0%, 100%);
--ff-primary: "Noto kufi Arabic", sans-serif;
--ff-body: var(--ff-primary);
--ff-heading: var(--ff-primary);
--fw-regular: 400;
--fw-semi-bold: 500;
--fw-bold: 700;
--fs-100: 0.5rem;
--fs-200: 0.70rem;
--fs-300: 0.8125rem;
--fs-400: 0.875rem;
--fs-500: 0.9375rem;
--fs-600: 1rem;
--fs-700: 1.875;
--fs-750: 2rem;
--fs-800: 2.5rem;
--fs-900: 2.5rem;
--fs-body: var(--fs-600);
--fs-primary-heading: var(--fs-800);
--fs-secondary-heading: var(--fs-750);
--fs-nav: var(--fs-500);
--fs-button: var(--fs-300);
--size-100: 0.25rem;
--size-200: 0.5rem;
--size-300: 0.75rem;
--size-400: 1rem;
--size-500: 1.5rem;
--size-600: 2rem;
--size-700: 3rem;
--size-800: 4rem;
--size-900: 5rem;
}
@media (min-width: 50rem) {
:root {
--fs-body: var(--fs-500);
--fs-primary-heading: var(--fs-900);
--fs-secondary-heading: var(--fs-800);
--fs-nav: var(--fs-300);
}
}
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
font: inherit;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}
html,
body {
height: 100%;
}
/* Set core body defaults */
body {
text-rendering: optimizeSpeed;
line-height: 1.5;
background: rgba(170, 187, 153, 0);
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture,
svg {
max-width: 100%;
display: block;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* genral styling */
body {
font-size: var(--fs-body);
font-family: var(--ff-body);
color: var(--clr-primary-400);
}
p:not([class]) {
opacity: 0.7;
max-width: 35ch;
}
p[data-width="wide"] {
max-width: 42ch;
}
/* button */
.button {
display: inline-flex;
cursor: pointer;
text-decoration: none;
border: 0;
border-radius: 100vmax;
padding: 1.25em 2.5em;
line-height: 1;
font-weight: var(--fw-bold);
font-size: var(--fs-button);
color: var(--clr-neutral-100);
background-color: var(--clr-accent-400);
box-shadow: 0 1.125em 1em -1em var(--clr-accent-500);
}
.button[data-type="inverted"] {
background-color: var(--clr-neutral-100);
color: var(--clr-accent-400);
}
.button[data-shadow="none"] {
box-shadow: none;
}
.button:hover,
.button:focus-visible {
background-color: var(--clr-accent-300);
}
.button[data-type="inverted"]:hover,
.button[data-type="inverted"]:focus-visible {
background-color: var(--clr-neutral-100);
color: var(--clr-accent-300);
}
/* navigation */
.primary-header {
padding-top: 0;
background: repeating-linear-gradient(rgba(156, 131, 33, 0.36), transparent)
}
.nav-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
}
.mobile-nav-toggle {
display: none;
}
.nav-list {
font-size: var(--fs-nav);
display: flex;
gap: clamp(var(--size-400), 5vw, var(--size-700));
font-weight: var(--fw-semi-bold);
}
.nav-list a {
color: var(--clr-primary-400);
text-decoration: none;
}
.nav-list a:hover,
.nav-list a:focus {
text-decoration: none;
color: var(--clr-accent-400);
}
@media (max-width: 50em) {
.primary-navigation {
display: none;
position: fixed;
padding: var(--size-700);
inset: 9.5rem var(--size-400) auto;
max-width: 23rem;
margin-right: auto;
background: var(--clr-neutral-100);
border-radius: var(--size-100);
box-shadow: 0 0 0.75em rgb(0, 0, 0, 0.05);
z-index: 100;
}
.primary-header[data-overlay]::before {
content: "";
position: fixed;
inset: 0;
background-image: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / .8));
}
.nav-list {
font-size: var(--fs-nav);
display: grid;
gap: var(--size-600);
text-align: center;
font-weight: var(--fw-bold);
}
.primary-navigation ul li {
border-bottom: 0.5px solid lightgrey;
}
.primary-navigation[data-visible] {
display: block;
}
.mobile-nav-toggle {
display: block;
position: fixed;
top: auto;
left: 10%;
z-index: 100;
cursor: pointer;
background: transparent;
border: 0;
padding: 0.5rem;
}
.mobile-nav-toggle .icon-close {
display: none;
}
}
/* footer */
.logo {
height: 28vh;
}
.primary-footer-wrapper {
display: grid;
gap: var(--size-700);
grid-template-areas:
"form"
"nav"
"logo-social";
}
.primary-footer-logo-social {
grid-area: logo-social;
display: flex;
flex-direction: column-reverse;
align-items: center;
}
.primary-footer-nav {
grid-area: nav;
}
.primary-footer-form {
grid-area: form;
display: grid;
align-content: space-between;
}
.primary-footer form {
display: flex;
gap: var(--size-200);
}
input:where([type="text"], [type="email"]) {
border-radius: 100vw;
border: 0;
padding: var(--size-200) var(--size-300);
}
@media (max-width: 50em) {
.primary-footer-wrapper>* {
margin-inline: auto;
}
}
@media (min-width: 50em) {
.primary-footer-wrapper {
grid-template-areas:
"logo-social nav form";
}
.primary-footer-logo-social {
align-items: flex-start;
}
}
/* footer Nav */
.footer-nav {
columns: 2;
gap: clamp(var(--size-200), 30vw, var(--size-900));
}
.footer-nav a {
color: var(--clr-neutral-100);
text-decoration: none;
}
.footer-nav a:is(:hover, :focus) {
color: var(--clr-accent-400);
}
/* social list */
.social-list {
display: flex;
gap: var(--size-700);
}
.social-icon {
width: var(--size-700);
aspect-ratio: 1;
fill: var(--clr-neutral-100);
}
.social-list a:is(:hover, :focus) .social-icon {
fill: var(--clr-accent-400)
}
@media (min-width: 50em) {
.social-list {
gap: var(--size-300);
}
.social-icon {
width: var(--size-600);
}
}
/* cta */
.cta {
position: relative;
isolation: isolate;
text-align: center;
}
@media (min-width: 50em) {
.cta {
text-align: left;
}
}
.cta::before {
content: "";
position: absolute;
inset: 0;
background-image: url("images/bg-tablet-pattern.svg"),
url("images/bg-tablet-pattern.svg");
background-position: -15rem -5rem, 80rem -42rem;
background-repeat: no-repeat;
z-index: -1;
opacity: 0.1;
}
/* numbered items */
.numbered-items {
counter-reset: count;
}
.numbered-items li {
counter-increment: count;
display: flex;
align-items: start;
}
.numbered-items div {
display: grid;
position: relative;
align-items: center;
column-gap: var(--size-400);
grid-template-columns: min-content 1fr;
}
.numbered-items_title {
grid-column: 2 /3;
grid-row: 1 /2;
line-height: 1;
}
.numbered-items_body {
font-size: var(--size-400);
grid-column: 1 / -1;
}
@media (min-width: 30em) {
.numbered-items_body {
grid-column: 2 /-1;
}
}
.numbered-items div::before {
content: "0" counter(count);
display: flex;
align-items: center;
background-color: var(--clr-accent-400);
color: var(--clr-neutral-100);
font-weight: var(--fw-bold);
padding: 0 var(--size-600);
height: 40px;
border-radius: 100vw;
grid-row: 1 / 2;
grid-column: 1 /2;
}
.numbered-items div::after {
content: '';
display: block;
grid-column: 1 /-1;
grid-row: 1 / 2;
inset: 0 -100vw 0 0;
z-index: -1;
background-color: orange;
height: 40px;
border-radius: 100vw;
}
/* Utility classes */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rec(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.container {
--max-width: 1110px;
--padding: 1rem;
width: min(var(--max-width), 100% - (var(--padding) * 2));
margin-inline: auto;
}
.even-columns {
display: grid;
gap: 1rem;
}
@media (min-width: 50em) {
.even-columns {
grid-auto-flow: column;
grid-auto-columns: 1fr;
}
}
.vertical-align-center {
align-items: center;
}
.justify-self-end {
justify-self: end;
}
@media(min-width: 50em) {
.justify-self-end-md {
justify-self: end;
}
}
:where(.flow>:not(:first-child)) {
margin-top: var(--flow-spacer, 2.4em);
}
.text-primary-400 {
color: var(--clr-primary-400)
}
.text-accent-400 {
color: var(--clr-accent-400);
}
.text-accent-100 {
color: var(--clr-accent-100);
}
.text-neutral-100 {
color: var(--clr-neutral-100);
}
.text-neutral-900 {
color: var(--clr-neutral-900);
}
.bg-primary-400 {
background-color: var(--clr-primary-400)
}
.bg-accent-400 {
background-color: var(--clr-accent-400);
}
.bg-accent-100 {
background-color: var(--clr-accent-100);
}
.bg-neutral-100 {
background-color: var(--clr-neutral-100);
}
.bg-neutral-900 {
background-color: var(--clr-neutral-900);
}
.fw-bold {
font-weight: var(--fw-bold);
}
.fw-semi-bold {
font-weight: var(--fw-semi-bold);
}
.fw-regular {
font-weight: var(--fw-regular);
}
.fs-primary-heading {
font-size: var(--fs-primary-heading);
line-height: 1.1;
}
.fs-secondary-heading {
font-size: var(--fs-secondary-heading);
line-height: 1.1;
}
.fs-300 {
font-size: var(--fs-300);
}
.fs-400 {
font-size: var(--fs-400);
}
.fs-500 {
font-size: var(--fs-500);
}
.fs-600 {
font-size: var(--fs-600);
}
.padding-block-900 {
padding-block: var(--size-900);
}
.padding-block-700 {
padding-block: var(--size-700);
}
.display-sm-none {
display: none;
}
@media(min-width: 50em) {
.display-md-inline-flex {
display: inline-flex;
}
}
/* fixing */
.fs-talk-heading {
font-size: 1.25rem;
line-height: 1.3;
color: #56452e;
font-weight: var(--fw-bold);
}
.talk {
padding-top: 2rem;
}
blockquote {
padding: 3em;
text-align: center;
color: green;
line-height: 2;
}
@media(max-width: 50em) {
article {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 35px;
padding: 1rem;
border-radius: 35px;
}
figure img {
height: 20vw;
display: block;
}
.talk {
padding: 3rem 3rem 0 3rem;
}
}
figure img {
border-radius: 7ch;
margin-inline: auto;
min-height: 25vw;
width: 100%;
}
figure {
text-align: center;
background: linear-gradient(transparent 0%, transparent 50%, #f7e4c256 50%, #f7e4c256 100%);
margin-bottom: 1em;
border-radius: 6ch;
}
figcaption {
padding: 1rem 0;
}
.hdith {
color: rgba(135, 207, 235, 0.82);
}<!doctype html>
<html lang="en" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="description" content="تبرع الآن لدعم أهل غزة وتوفير الطعام والمأوى والعلاج للمحتاجين." />
<link rel="stylesheet" href="style.css" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Support Gaza</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=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Kufi+Arabic:[email protected]&display=swap" rel="stylesheet">
</head>
<body>
<header class="primary-header">
<div class="container">
<div class="nav-wrapper">
<svg class="logo">
<use xlink:href="images/logo.svg#sahem-svg-logo"></use>
</svg>
<button class="mobile-nav-toggle" aria-controls="primary-navigation" aria-expanded="false">
<img class="icon-hamburger" src="images/icon-hamburger.svg" alt="" aria-hidden="True">
<img class="icon-close" src="images/icon-close.svg" alt="" aria-hidden="True">
<span class="visually-hidden">Menu</span>
</button>
<nav class="primary-navigation" id="primary-navigation">
<ul role="list" aria-label="Primary" class="nav-list">
<li><a href="#">التبرع</a></li>
<li><a href="#">عن الحملة</a></li>
<li><a href="#">قصص من غزة</a></li>
<li><a href="#">أثر التبرعات</a></li>
<li><a href="#">تواصل معنا</a></li>
</ul>
</nav>
<button class="button | display-sm-none display-md-inline-flex" >تبرع</button>
</div>
</div>
</header>
<main>
<section class="padding-block-900">
<div class="container">
<div class="even-columns">
<div class="flow">
<h1 class="fs-primary-heading fw-bold">كن عونًا لأهلك في غزة.. تبرعك يُنقذ حياة</h1>
<p>كل عمل خير له أثر<br/> قال النبي ﷺ: <span class="hdith">
"والله في عون العبد ما كان العبد في عون أخيه" </span><br />
تبرعك يوفر طعامًا، مأوى، وعلاجًا للمحتاجين.</p>
<button class="button">تبرع الآن</button>
</div>
<div>
<img src="/images/293703.jpg" alt="Gaza Relief"/>
</div>
</div>
</div>
</section>
<section class="padding-block-900 fw-semi-bold">
<div class="container">
<div class="even-columns">
<div class="flow fs-talk-heading">
<article>
<figure>
<img src="images/damaged-house-1.jpg" alt="">
<figcaption>طفلتان بين الركام... ما تبقّى لهن بعد القصف سوى خطواتهن</figcaption>
</figure>
<figure>
<img src="images/header-pic.jpg" alt="">
<figcaption>في حضن أخيه وتحت القصف... هذا الطفل ينتظر منّا الوقوف معه</figcaption>
</figure>
</article>
</div>
<div class="talk">
<h3 class="fs-talk-heading fw-bold">أراد الله لنا نحن أمة الإسلام أن نكون أمة واحدة دما واحدا جسدا واحدا صفا واحدا
<blockquote>{إِنَّ اللَّهَ يُحِبُّ الَّذِينَ يُقَاتِلُونَ فِي سَبِيلِهِ صَفًّا كَأَنَّهُم بُنيَانٌ مَّرْصُوصٌ} </blockquote>
</h3>
<h3 class="fs-talk-heading fw-bold"> ويؤكد هذا في موضع آخر
<blockquote>{إِنَّ هَذِهِ أُمَّتُكُمْ أُمَّةً وَاحِدَةً وَأَنَا رَبُّكُمْ فَاعْبُدُونِ}</blockquote>
</h3>
</div>
</div>
</div>
</section>
<section class="padding-block-700">
<div class="container">
<div class="even-columns">
<div class="flow">
<h2 class="fs-secondary-heading fw-bold">غزة تنادي..<br/> هل من مجيب؟</h2>
<p>تواجه غزة معاناة لا توصف، وكل ثانية لها قيمة. قال رسول الله ﷺ: <br><span class="hdith">
"مثل المؤمنين في توادهم وتراحمهم وتعاطفهم كمثل الجسد، إذا اشتكى منه عضو تداعى له سائر الجسد بالسهر والحمى" </span><br>
تبرعك ليس مجرد مال، بل شريان حياة لعائلة تعاني.
</div>
<div>
<ul class="numbered-items | flow" role="list">
<li>
<div class="flow" style="--flow-spacer: 1em">
<h3 class="numbered-items_title | fs-600 fw-bold">شركاء موثوقون</h3>
<p class="numbered-items_body" data-width="wide">نتعاون مع جهات رسمية معتمدة لضمان أن كل ريال يصل لمن يستحقه فعلًا.</p>
</div>
</li>
<li>
<div class="flow" style="--flow-spacer: 1em">
<h3 class="numbered-items_title | fs-600 fw-bold">شفافية كاملة</h3>
<p class="numbered-items_body" data-width="wide">يمكنك التأكد أن تبرعك محفوظ ومُستخدم بدقة عبر تقارير دورية.</p>
</div>
</li>
<li>
<div class="flow" style="--flow-spacer: 1em">
<h3 class="numbered-items_title | fs-600 fw-bold">أثر لا يُقدّر بثمن</h3>
<p class="numbered-items_body" data-width="wide">تبرعاتكم كانت السبب بعد الله في إطعام، وعلاج، وتأمين حياة كريمة لآلاف العائلات.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="carousel | padding-block-700">
<h2 class="fs-secondary-heading fw-bold">شخصيات عامة ومؤثرون يقفون مع غزة:</h2>
<button class="button">عرض المزيد</button>
</section>
<section class="cta | padding-block-900 bg-accent-400 text-neutral-100">
<div class="container">
<div class="even-columns vertical-align-center">
<div>
<p class="fs-primary-heading fw-bold">فرصتك للثواب بين يديك.. لا تتردد</p>
</div>
<div class="justify-self-end-md">
<button class="button" data-type="inverted">ابدأ بالعطاء</button>
</div>
</div>
</div>
</section>
</main>
<footer class="primary-footer | padding-block-700 bg-neutral-900 text-neutral-100">
<div class="container">
<div class="primary-footer-wrapper">
<div class="primary-footer-logo-social">
<a href="#" aria-label="home">
<svg class="logo" width="200" height="100">
<use xlink:href="images/logo.svg#sahem-svg-logo"></use>
</svg>
</a>
<ul class="social-list" role="list" aria-label="social-links">
<li aria-label="facebook">
<a href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-facebook"></use>
</svg>
</a>
</li>
<li aria-label="instagram">
<a href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-instagram"></use>
</svg>
</a>
</li>
<li aria-label="youtube">
<a href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-youtube"></use>
</svg>
</a>
</li>
<li aria-label="twitter">
<a href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-twitter"></use>
</svg>
</a>
</li>
<li aria-label="pinterest">
<a href="#">
<svg class="social-icon">
<use xlink:href="images/social-icons.svg#icon-pinterest"></use>
</svg>
</a>
</li>
</ul>
</div>
<div class="primary-footer-nav">
<nav class="footer-nav">
<ul class="flow" style="--flow-spacer: 1em" role="list" aria-label="Footer">
<li><a href="#">الرئيسية</a></li>
<li><a href="#">تبرع</a></li>
<li><a href="#">قصص ملهمه</a></li>
<li><a href="#">الأثر</a></li>
<li><a href="#">الوظائف</a></li>
<li><a href="#">الشركاء</a></li>
<li><a href="#">سياسة الخصوصية</a></li>
</ul>
</nav>
</div>
<div class="primary-footer-form">
<form action="">
<input type="email" placeholder="أدخل بريدك الإلكتروني">
<button class="button" data-shadow="none">انضم لقائمة الداعمين</button>
</form>
<p>حقوق النشر © 2025. جميع الحقوق محفوظة.</p>
</div>
</div>
</div>
</footer>
<script type="module" src="/main.js"></script>
</body>
</html>My problem:
-Once the page in Mobile size, it shows half of the content.
-I’ve searched for fix width… x
-After, 2 hour of debugging…all the sudden my page started to have scroll bar in X and Y.
tried:
overflow: hidden , overflow-x.
setting: body and html To -> width: 100%; height: 100%;
I tried everything, I learned….
I need your help guys. like, the problem is that i followed a Youtube video, line by line…yet this happen 🙁
I need to validate and parse user input numbers.
Users may enter numbers in different formats, or wrong formatted numbers for example:
I want to:
Input examples:
| Input | Expected Result |
|---|---|
| “123” | int: 123 |
| “123.45” | float: true |
| “123,45” | float: true (German format) |
| “1.234,56” | float: true (German format) |
| “12 12 323 4 43” | nil |
| “1.2.3.4” | nil |
| “123.45,67” | nil (mixed format = invalid) |
Constraints:
I simply want to check:
What approach do you recommend?
I understand that RTK Query signifies a shift in thinking from Redux store / state management, and the general paradigm is that you use the RTK Query endpoint anytime you need data, and rely on it to manage cache and state rather than slices / thunks etc.
However, I have an endpoint (defined as an RTK query endpoint) that pulls voltage data for a device on a hardware system. I want to know that voltage at any given point in time, but I also want to maintain some history so I can draw a graph showing the voltage fluctuation.
My thinking is that I can intercept the query results in the RTK Query api slice, and use a normal reducer action to put the data into the store. However, since the RTK query isn’t a component I can’t use a reducer hook in there. I still think there’s got to be a way from the RTK Query API slice to directly interact with the store, but I haven’t found any docs on this.
The second route I was thinking was using a middleware to intercept the query action, do whatever is needed with the data, and store it. However, the middleware examples I’ve found all relate to using traditional redux toolkit slice actions, not RTK query endpoints, so this throws errors:
listenerMiddleware.startListening({
actionCreator: useGetVoltageQuery, /// <-- this is an endpoint in RTK Query API slice, not a slice action
effect: async (action, listenerApi) => {
// Run whatever additional side-effect-y logic you want here
console.log('GOT HERE')
// Can cancel other running instances
listenerApi.cancelActiveListeners()
// Run async logic
/*const data = await fetchData()
// Pause until action dispatched or state changed
if (await listenerApi.condition(matchSomeAction)) {
// Use the listener API methods to dispatch, get state,
// unsubscribe the listener, start child tasks, and more
listenerApi.dispatch(updateVoltage(listenerApi.))
}*/
},
})
Is there a recommended way to manipulate data from RTK query and persist it to the store, as well as handling the query results in the normal RTK cache?
I have a web-application, which displays some 3D objects. The 3D objects are static files in a TomCat subdirectory. The app is based on Java 8 and JavaScript. If it runs under TomCat 8.5 everything works well for every web-browser. Using TomCat 9.0 it does not display the objects. I figured out so far, that it seems to be a caching problem: when I switch off caching in the developer modes of Edge or Chrome everything loads perfectly again.
My question is, how can I switch off caching in TomCat 9?
I have already tried some ideas which I found in the forum, like:
but neither worked. Any ideas?
Thank you.
<Context>
<Resources>
<PreResources className="org.apache.catalina.webresources.DirResourceSet"
base="C:xxxservice"
webAppMount="/service" />
</Resources>
</Context>
PS: The most weired thing is, that is works fine with FireFox, but not in Edge or Chrome (except I change to developer mode and switch off caching).