We Keep Coding

Table sort icons are not changing correctly in React JS

table header sort icon is not changing correctly, if I click on ID it is sorting the icon but
if I click on ID and again click on firstName the ID sort icon is changing not the firstName sort icon (icons are not updating uniquely) please help
function changeSort(key: SortKeys) {
setSortOrder(sortOrder === "ascn" ? "desc" : "ascn");
setSortKey(key);
}
here is the code code-sandbox-link

function changeSort(key: SortKeys) {
setSortOrder(sortOrder === "ascn" ? "desc" : "ascn");
setSortKey(key);
}
to
function changeSort(key: SortKeys) {
setSortOrder(sortOrder === "ascn" || sortKey !== key ? "desc" : "ascn");
setSortKey(key);
}
sortKey !== key
you need to check because the sortOrder state i can be desc so clicking on another one is ascn again which makes it look like nothing happened.

Wordpress Menu dropdown parent item clickable just after opening dropdown

I am currently developing a website and I need to make my dropdown menu parent item clickable. I have modified the wp-bootstrap-navwalker.php file to :
// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
//$atts['data-toggle'] = 'dropdown';
$atts['class'] = 'dropdown-toggle';
} else {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
}
Code which adds indeed a link to my parent item, but that is only happening after I open the dropdown - So if I want tot open the link to the whole category(Parent Item) i have to click twice, once for opening dropdown and the second time for actually going to the link.
I think it may be a theme problem that is having some loading order code but I do not actually know where, the theme I am using is Uncode.
After using that code, on Inspect element i do not see the data-toggle information, so it worked, but not quite.

Local Storage Not Working When Applying Dark Mode

I am trying to apply Dark Mode To My Website. I am using the code given below to do so.
!(function () {
var t,
e = document.getElementById("darkSwitch");
if (e) {
(t =
null !== localStorage.getItem("darkSwitch") &&
"dark" === localStorage.getItem("darkSwitch")),
(e.checked = t)
? document.body.setAttribute("data-theme", "dark")
: document.body.removeAttribute("data-theme"),
e.addEventListener("change", function (t) {
e.checked
? (document.body.setAttribute("data-theme", "dark"),
localStorage.setItem("darkSwitch", "dark"))
: (document.body.setAttribute("data-theme", "light"),
localStorage.setItem("darkSwitch", "dark"));
});
}
})();
You can check it out here http://anayaadventure.com/
Everything is working fine but the problem is now suppose I turn the dark mode off and I refresh the page, then the page again loads in dark mode. Why is this happening and how can I solve it.
Thanks for any kind of help in advence.

It looks like you never set localstorage back to "light" in the toggle-event
e.checked
? (document.body.setAttribute("data-theme", "dark"),
localStorage.setItem("darkSwitch", "dark")) //set to dark
: (document.body.setAttribute("data-theme", "light"),
localStorage.setItem("darkSwitch", "dark")); //set item to "light" instead of "dark" ?
And if you edit the local storage value manually to "light" it goes back to lightmode
so i think you want to change the last line to localStorage.setItem("darkSwitch", "light"));
Addition to that i like the layout and design of the site!

Maintain state of accordion even after page refresh or transfer

i want my accordion button when clicked to be still in it's current
state, even after i refresh the page or go to a new page.
<div>
<a onClick="AccFunc('BTN1')" href="#">Releases</a>
<div id="BTN1">
<a>January</a>
<a>December</a>
</div>
</div>
<script>
function AccFunc(id) {
var x = document.getElementById(id);
$(x).toggle();
var isVisible = $(x).is(":visible");
localStorage.setItem('visible', isVisible);
}
// stored in localStorage as string, `toggle` needs boolean
var isVisible = localStorage.getItem('visible') === 'false' ? false : true;
$(x).toggle(isVisible);
</script>

Javascript is checking the localStorage and trying to change the DOM before it is ready, so you need to add code to wait until the DOM is ready. Further, that code doesn't know what x is.
I changed it to the following in a fiddle (https://jsfiddle.net/jupjh7hL/6/) and it works as I believe you intend.
$(document).ready(function(){
var isVisible = localStorage.getItem('visible') === 'false' ? false : true;
$('#BTN1').toggle(isVisible);
})

Changing Tab on Image Click

I try for some time now to set the active Tab of this theme when the user clicks an image (above the tabs).
http://www.elegantthemes.com/preview/Nova/
I found the normal tab change code in the scripts.php, but I have no idea of how to change it to make it work with clicking any image that are above the tabs.
$service_li.find('a').click(function(){
var $a = jQuery(this),
next_tab = $a.parent('li').prevAll().length,
next_tab_height = $service_tabs.find('>div').eq(next_tab).outerHeight();
if ( next_tab != active_tab ) {
$service_tabs.css({height:next_tab_height});
$service_div.filter(':visible')
.animate( {opacity: 'hide'},500, function(){
jQuery(this).parent().find('>div').eq(next_tab).animate( {opacity: 'show'},500 );
} )
;
$service_li.removeClass(active_tabstate).filter(':eq('+next_tab+')').addClass(active_tabstate);
active_tab = next_tab;
}
return false;
}).hover(function(){
if ( !jQuery(this).parent('li').hasClass(active_tabstate) && !is_ie ) jQuery(this).fadeTo('slow',.7);
}, function(){
if (!is_ie) jQuery(this).fadeTo('slow',1);
});
}
Maybe someone can help out ?

I don't quite understand what or better yet, why you've conjured that thing over there, but i would use jQuery Tabs, so you can easily access the tab object by entering the id in the URL (firefox only) or by using something like.. .tabs( "select" , index ) , you can find more documentation in the URL above.