Category: javascript

I’m using electron-forge with react and I’m trying to set up routing using HashRouter in my app using react-router-dom. My app uses links in the sidebar to navigate through the various routes. I tried to set up a HashRouter in the app and no errors pop up when compiling, but nothing shows up when the code is running. All the pages that it links to are blank and the components aren’t displayed.

I suspect this might be because electron-forge is hosting my app on localhost:3000/main_window instead of localhost:3000/ itself. Is there any way I can host the app on localhost:3000/ itself or is there an additional step in setting up HashRouters as compared to BrowserRouters in react-router-dom?

This is how the Routes were set up:

<HashRouter>
  <Routes>
    <Route path="/" exact component={Home} />
    <Route path="/classes/:classId" component={ViewClass} />
    <Route path="/addClass" component={AddClass} />
  </Routes>
</HashRouter>

This is the button with the link to the Home Route:

<button className="nav-icon">
  <FontAwesomeIcon icon={solid('home')} />
  <Link className="nav-icon-text" to="/">Home</Link>
</button>

When the app starts, it automatically hosts to localhost:3000/main_window and nothing is shown. When the sidebar button is pressed, it links to localhost:3000/main_window#/ which doesn’t show anything either.

Does anyone know what the problem is here?

Why is the value of categoryDictonary[item] undefined when categoryDictonary[“Marvel”] gives [“WandaVision”, “Loki”, “Moon Knight”] even when the value of item is “Marvel”enter image description here

I’m working on some code to draw 3D images of the moon at various phases, showing libration effects as well. At this point, my image of a first quarter moon looks like this:

Which looks very nice, but the transition from light to shadow is too gradual. As there is no atmosphere on the moon, the transition from light to dark should be more abrupt.

This is the code I have so far:

  private drawMoonWebGL(context: CanvasRenderingContext2D, solarSystem: SolarSystem, time_JDE: number,
           cx: number, cy: number, size: number, pixelsPerArcSec: number, pixelRatio: number,
           parallacticAngle?: Angle, observer?: ISkyObserver, _showEclipses?: boolean): void {
    if (!this.renderer)
      this.setUpRenderer();

    if (size === 0)
      size = MAX_LUNAR_ANGULAR_DIAMETER * pixelsPerArcSec * 60;

    if (this.webGlRendererSize !== size) {
      this.renderer.setSize(size, size);
      this.webGlRendererSize = size;
    }

    const phase = solarSystem.getLunarPhase(time_JDE);
    const libration = solarSystem.getLunarLibration(time_JDE, observer);

    this.camera.position.z = libration.D * KM_PER_AU;
    this.camera.rotation.z = (parallacticAngle ? parallacticAngle.radians : 0);
    this.globeMesh.rotation.y = to_radian(-libration.l);
    this.globeMesh.rotation.x = to_radian(libration.b);
    this.sun.position.x = 93000000 * sin_deg(phase); // Very rough, but adequate for the task!
    this.sun.position.z = -93000000 * cos_deg(phase);
    this.renderer.render(this.scene, this.camera);
    context.drawImage(this.renderer.domElement, cx - size / 2, cy - size / 2);
  }

  private setUpRenderer(): void {
    const globe = new SphereGeometry(MOON_RADIUS, 50, 50);

    globe.rotateY(-PI / 2);
    this.camera = new PerspectiveCamera(MAX_LUNAR_ANGULAR_DIAMETER / 60, 1, 0.1, 500000);
    this.scene = new Scene();
    this.globeMesh = new Mesh(globe, new MeshLambertMaterial({ map: new CanvasTexture(this.moonImageForWebGL) }));
    this.scene.add(this.globeMesh);
    this.renderer = new WebGLRenderer({ alpha: true, antialias: true });
    this.sun = new DirectionalLight('white', 1.5);
    this.sun.position.y = 0;
    this.scene.add(this.sun);
    this.scene.add(new AmbientLight('white', 0.15));
  }

The above code takes an equirectangular moon map (courtesy of NASA) like this:

…and wraps it around a sphere so it can be rotated and illuminated in various ways.

With the searching for answers I’ve done so far I’ve only found information regarding one object casting shadows on a different object. I can’t find anything about adjusting the shadows on a single object with a single main light source.

There’s a little bit of ambient lighting added by my code (representing “earth shine”) to make sure the shadowed part of the moon isn’t pitch black, but removing that ambient lighting doesn’t sharpen the shadow boundary very much at all.

Can anyone tell me what I should to adjust to get the sharper shadow boundaries I’m looking for?

Although the state is updated the input tag’s value still shows the last state of the object.
Here is my code:

const OrderForm = ({selectedOrder, setSelectedOrder }) => {
    const [order, setOrder] = useState({});
    useEffect(() => {
        setOrder(selectedOrder);
    }, [selectedOrder]);

    return (
        <section className={styles.formSection}>
            {order.id !== undefined && (
                <div className={styles.formRow}>
                    <button
                        className={styles.clear}
                        onClick={() => {
                            setSelectedOrder({});
                            setOrder({});
                        }}
                    >
                        Clear
                    </button>
                </div>
            )}
            
            <div className={styles.formRow}>
                <div className={styles.formGroup}>
                    <span className={styles.formLabel}>
                        Customer name {order.customer_name}
                    </span>
                    
                    <input
                        type='text'
                        className={styles.formInput}
                        placeholder='Enter Customer name'
                        value={order.customer_name}
                        onChange={(e) =>
                            setOrder({ ...order, customer_name: e.target.value })
                        }
                    />
                </div>
            </div>
        </section>
    )

Here the input values gets updated whenever the selectedOrder gets updated from a sibling component but on clicking the Clear button, although order object updates the input values still shows the last state content.

I am trying to find a good framework for writing end-to-end tests for my electron app that even contains multiple windows.
Using Selenium for electron e2e tests is giving us a hard time maintaining it.
We thought of using Playwright codegen but it doesn’t support electron yet!!
Any suggestions will be appreciated.

I am using froala editor to edit documents in my project.now,the problem is froala toolbar keep on moving.I dont know why its happening.

first of all, i am creating new div by clicking add page button and this button have onclick event where it creates div with froala editor dynamically,If the user enter 2 pages it will create two divs with two toolbar on top of div.when i scroll the page, the toolbar keep on moving its position.please ,kindly help me with this problem.

here my code:

<button id="add_page" onclick="page()">+ Add Page</button>

var id=0;
var div_id=0;

function page(){

var pages= document.getElementById("pages").value;
    
    if(total_pages == ""){
    
        alert("Please enter number of pages");
    }
    else{
        
        for(var start=1;start<=total_pages;start++){
        
            var divRefer = document.querySelector('div.temp');

            var divToCreate = document.createElement('div');
            divToCreate.style.width="595pt";
            divToCreate.style.height="842pt";
            divToCreate.style.pageBreakAfter="always"; 
            div_id++;
            divToCreate.setAttribute("id","display_next"+div_id);
            var div_deleteId="display_next"+div_id;
            divToCreate.setAttribute("Contenteditable","true");
            //divToCreate.innerHTML="Insert Your Text Here";
            delete_btn.setAttribute("onclick","delete_div("+div_deleteId+");");
            var textarea= document.createElement('textarea');
            textarea.setAttribute("Contenteditable","true");
            id++;
            var text_edit="text_edit"+id;
            textarea.setAttribute("id",text_edit);
            //divToCreate.setAttribute("class","ck-editor__editable");
            divReference.parentNode.appendChild(divToCreate);
            divToCreate.appendChild(textarea);
            divToCreate.appendChild(delete_btn);
            var editor = new FroalaEditor("textarea#"+text_edit, {
            height: '542',

             
            });
            
        }
        
        }

}

function CustomizationPlugin( editor ) {

}

NOTE: i attached screenshot,kindly check it.

enter image description here

this is how its moving from div.actually toolbar is created dynamically and appended to div.

I have this array of object

[{
    id: 1,
    checked: true,
    subChild: [{
        id: 11,
        checked: true
    }]
},
{
    id: 2,
    checked: true,
    subChild: [{
        id: 22,
        checked: false
    }]
},
{
    id: 3,
    checked: false,
    subChild: [{
        id: 33,
        checked: true
    }]
}]

is there any lib to get the id base on the checked property? I can use loop through it using filter and find method but it will be a lot of manual work, imagine I have another level of nested array of object.

expected output: [1, 11, 2, 33]

html and javascript

I used live server on vs code and it works but when i use 000webhost, the key doesnt work. it fails EVERY TIME. Does anyone know why this is happening?

i have trying to using UseSelector to get data in a redux, but it’s alwas returned undefined, but when i try log console.log teh variable that i wanted to get in redux it’s get updated, but when i try console log the useSelector it’s returned undefined

code Redux :

export const EXCHAHNGETOSECOND = 'EXCHANGETOSECOND'

export const exchangetosecwork = (hour,minute,second) =>({
    type:EXCHAHNGETOSECOND,
    payloadhourwork : hour,
    payloadminutework : minute,
    payloadsecondwork : second
})

let initialState ={
    resultWorkinSecond : 0
}

export const mainReducer = (state=initialState, action) =>{
    switch (action.type) {
        case EXCHAHNGETOSECOND:
            const hourTosecond = action.payloadhourwork * 3600
            const minuteTosecond = action.payloadminutework * 60
            const res = hourTosecond+minuteTosecond+action.payloadsecondwork
            state.resultWorkinSecond = res
            console.log(state.resultWorkinSecond);
            return state.resultWorkinSecond
        default:
            return state
    }
}

export default mainReducer

store redux :

import { createStore } from "redux";
import mainReducer from "./redux";
import AsyncStorage from '@react-native-async-storage/async-storage';
import { persistStore, persistReducer } from 'redux-persist'


const persistConfig={
    key:'root',
    storage:AsyncStorage,
};

const persistedReducer = persistReducer(persistConfig,mainReducer)

export default() => {
    let store = createStore(persistedReducer)
    let persistor = persistStore(store)
    return{ store, persistor }
}

myConsole log test:

 const resWorkinSec = useSelector((state)=>state.resultWorkinSecond)
    
    <Pressable onPress={()=>{
                            dispatch(exchangetosecwork(hour,minute,second))
                            console.log(resWorkinSec)
                        }}>

[console log result 1

I am not really sure when we should avoid using useCallback, if there is any harm (memory reallocation). For example lets say I have a component with two props, {onSave, onClose} and one sate viewName. is bellow handler function will be optimized with these dependencies?

  const handleSaveView = useCallback(() => {
    onSaveView(viewName, selectedViewList);
    onClose();
  }, [onSaveView, onClose, viewName]);

Is there a case doing that?

I’m creating a js lib that uses that package and requires the lib user to match that package.

So, is it true to specify the package both in dependencies & peerDependencies? Or just place in peerDependencies is enough?

Is there any library available for File or Video compressor in react JS or javascript?
If unavailable, suggest an alternative way to resize file size or video size before upload.

Currently I am saving an array of objects to a local storage which is the settings and then I get or query or get it from local storage and I use index to assign the values like .

Currently I am assigning values using index like this.userSettings.jobSearchFilter.jobs[0].values; , is there other way to change the setting structure or access the values from the array of object using fieldname instead of index.

so this.market should be equal to jobs.market.values , something like that

Thanks.

#ts code

this.userSettings = JSON.parse(localStorage.getItem('settings'));

    if(this.userSettings.jobSearchFilter && this.userSettings.jobSearchFilter.jobs.length > 0){
      this.market= this.userSettings.jobSearchFilter.jobs[0].values;    
      this.fund= this.userSettings.jobSearchFilter.jobs[1]?.values;
      this.developmentlead= this.userSettings.jobSearchFilter.jobs[2]?.values;
      this.developmentaccountant = this.userSettings.jobSearchFilter.jobs[3]?.values;   
    }

#array of objects that is being saved to local storage

 this.userSettings = {
      jobSearchFilter:{   
        ...this.userSettings.jobSearchFilter,
        jobs: [
          {
            type:'market',
            values:settings.filter
          },
          {
            type:'fund',
            values:settings.fundFilter
          },
          {
            type:'developmentLead',
            values:settings.developmentLeadFilter
          }
        ],
      }
    }      

#sample query settings from local storage

[
    {
        "type": "market",
        "values": [
            {
                "id": 503,
                "description": "Atlanta",
            }
        ]
    },
    {
        "type": "fund",
        "values": [
            {
                "id": 53,
                "description": "11Atlanta",
            }
        ]
    },
    {
        "type": "developmentLead",
        "values": [
            {
                "id": 533,
                "description": "Atlant1",
            }
        ]
    },
    {
        "type": "developmentAccountant",
        "values": null
    },
]

There are many bzip2 decompress, but is there one that compresses in javascript and is MIT?

I have created a function that does this:

var getMostRecent = function (dir: string, cb: any) {
    var dir = homedir
    var files = fs.readdir(dir, function (err, files) {
        var sorted = files.map(function(v) {
            var filepath = path.resolve(dir, v);
            return {
                name:v,
                time:fs.statSync(filepath).mtime.getTime()
            }; 
        })
        .sort(function(a, b) { return b.time - a.time; })
        .map(function(v) { return v.name; });

        if (sorted.length > 0) {
            cb(null, sorted[0]);
        } else {
            cb('Roblox appears to not be installed. Why do you plan to restore the old Roblox cursor, when Roblox doesn't even exist?', null);
        }
    })
}

Then I call the function like this:

var recent = getMostRecent('./', function (err: any, recent: any) {
    if (err) console.error(err);
    return {
        recent: recent
    }
});

console.log(recent);

But then I get undefined. When I run this:

getMostRecent('./', function (err: any, recent: any) {
    if (err) console.error(err);
    console.log(recent);
});

It gives the folder. I can’t figure out a way to return this value.

Maybe I’m too used to Lua.