Mirrors/responsively-app
2
0
Fork 0
mirror of https://github.com/responsively-org/responsively-app synced 2024-09-21 23:01:54 +00:00
Code Issues Projects Releases Packages Wiki Activity

Selectors come from appropriate features module

Browse source
This commit is contained in:
Manoj Vivek 2022-09-09 13:18:07 +05:30
parent 7426dbbf4d
commit 28f33fd695
5 changed files with 16 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
desktop-app-rewrite/src/renderer/components/AddressBar/index.tsx
View file

@ -1,17 +1,16 @@
import { KeyboardEventHandler, useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from 'renderer/store';
import { setAddress } from 'renderer/store/features/renderer';
import { selectAddress, setAddress } from 'renderer/store/features/renderer';
import { Icon } from '@iconify/react';
import { setDarkMode } from 'renderer/store/features/ui';
import { selectDarkMode, setDarkMode } from 'renderer/store/features/ui';
import NavigationControls from './NavigationControls';
import Menu from './Menu';
const AddressBar = () => {
const inputRef = useRef<HTMLInputElement>(null);
const [typedAddress, setTypedAddress] = useState<string>('');
const address = useSelector((state: RootState) => state.renderer.address);
const darkMode = useSelector((state: RootState) => state.ui.darkMode);
const address = useSelector(selectAddress);
const darkMode = useSelector(selectDarkMode);
const dispatch = useDispatch();
useEffect(() => {
if (address === typedAddress) {

9
desktop-app-rewrite/src/renderer/components/Previewer/Device.tsx
View file

@ -3,8 +3,11 @@ import { handleContextMenuEvent } from 'main/webview-context-menu/handler';
import { useCallback, useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { webViewPubSub } from 'renderer/lib/pubsub';
import { RootState } from 'renderer/store';
import { selectZoomFactor, setAddress } from 'renderer/store/features/renderer';
import {
selectAddress,
selectZoomFactor,
setAddress,
} from 'renderer/store/features/renderer';
import { NAVIGATION_EVENTS } from '../AddressBar/NavigationControls';
interface Props {
@ -15,7 +18,7 @@ interface Props {
}
const Device = ({ height, width, isPrimary, name }: Props) => {
const address = useSelector((state: RootState) => state.renderer?.address);
const address = useSelector(selectAddress);
const [loading, setLoading] = useState<boolean>(false);
const dispatch = useDispatch();
const zoomfactor = useSelector(selectZoomFactor);

4
desktop-app-rewrite/src/renderer/context/ThemeProvider/index.tsx
View file

@ -1,10 +1,10 @@
import cx from 'classnames';
import React from 'react';
import { useSelector } from 'react-redux';
import { RootState } from 'renderer/store';
import { selectDarkMode } from 'renderer/store/features/ui';
const ThemeProvider = ({ children }: { children: React.ReactNode }) => {
const darkMode = useSelector((state: RootState) => state.ui.darkMode);
const darkMode = useSelector(selectDarkMode);
return (
<div className={cx({ dark: darkMode })}>
<div className="h-screen w-screen bg-slate-200 text-light-normal dark:bg-slate-800 dark:text-dark-normal">

1
desktop-app-rewrite/src/renderer/store/features/renderer/index.ts
View file

@ -45,5 +45,6 @@ export const rendererSlice = createSlice({
export const { setAddress, zoomIn, zoomOut } = rendererSlice.actions;
export const selectZoomFactor = (state: RootState) => state.renderer.zoomFactor;
export const selectAddress = (state: RootState) => state.renderer.address;
export default rendererSlice.reducer;

3
desktop-app-rewrite/src/renderer/store/features/ui/index.ts
View file

@ -1,5 +1,6 @@
import { createSlice } from '@reduxjs/toolkit';
import type { PayloadAction } from '@reduxjs/toolkit';
import type { RootState } from '../..';
export interface UIState {
darkMode: boolean;
@ -23,4 +24,6 @@ export const uiSlice = createSlice({
// Action creators are generated for each case reducer function
export const { setDarkMode } = uiSlice.actions;
export const selectDarkMode = (state: RootState) => state.ui.darkMode;
export default uiSlice.reducer;