-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2 from softeerbootcamp4th/CC-88
[Feat] 라우터 조건부 랜더링 기능 추가 & Do를 추가
- Loading branch information
Showing
16 changed files
with
253 additions
and
107 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import { useEffect, useRef } from "react"; | ||
|
||
const useChangeDependency = (cb: () => void, dependency: unknown[]) => { | ||
const initRef = useRef(false); | ||
useEffect(() => { | ||
if (!initRef.current) { | ||
initRef.current = true; | ||
} else { | ||
cb(); | ||
} | ||
}, dependency); | ||
}; | ||
|
||
export default useChangeDependency; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { useState } from "react"; | ||
|
||
const useForceRendering = () => { | ||
const [state, setState] = useState(false); | ||
return () => { | ||
state; | ||
setState((prev) => !prev); | ||
}; | ||
}; | ||
|
||
export default useForceRendering; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import { useContext } from "react"; | ||
import { RouterContext } from "../Hyunouter/Router"; | ||
|
||
const useIsShowing = (): boolean => { | ||
const { isFullScreen } = useContext(RouterContext); | ||
console.log(isFullScreen); | ||
return !isFullScreen; | ||
}; | ||
|
||
export default useIsShowing; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,12 @@ | ||
import State from "./State"; | ||
interface Action { | ||
type: string; | ||
actionName: string; | ||
payload?: object; | ||
type: string; | ||
actionName: string; | ||
payload?: object; | ||
} | ||
interface DoAction<T> { | ||
type: string; | ||
doing: (state: State<T>) => State<T>; | ||
} | ||
|
||
export default Action | ||
export type { Action, DoAction }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import { createState } from "../State"; | ||
import { DoAction } from "../Actions"; | ||
import State from "../State"; | ||
import { makePayLoad } from "../Util/StoreUtil"; | ||
|
||
const Do_NAME = "Count"; | ||
|
||
// state type | ||
interface CountPayLoad { | ||
count: number; | ||
text: string; | ||
} | ||
|
||
const initCountState = createState<CountPayLoad>(Do_NAME, { | ||
count: 0, | ||
text: "helloWorld", | ||
}); | ||
|
||
// actions | ||
const doAction = { | ||
countUp: (): DoAction<CountPayLoad> => { | ||
return { | ||
type: Do_NAME, | ||
doing: (state: State<CountPayLoad>): State<CountPayLoad> => { | ||
return makePayLoad(state, { count: state.payload.count + 1 }); | ||
}, | ||
}; | ||
}, | ||
}; | ||
|
||
export { doAction, initCountState }; |
2 changes: 1 addition & 1 deletion
2
...Hyundux/Example_Counter/CountWorkFlow.tsx → ...red/Hyundux/Example_Counter/CountWork.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
import { useState } from "react"; | ||
import _State from "../State"; | ||
import store from "../Store"; | ||
|
||
function useDo<PayLoad>(initialState: _State<PayLoad>): PayLoad { | ||
const [state, setState] = useState<_State<PayLoad>>(initialState); | ||
store.subscribe(state, null, (newState) => { | ||
setState(newState); | ||
}); | ||
return state.payload; | ||
} | ||
|
||
export default useDo; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,9 @@ | ||
import Action from "./Actions"; | ||
import { Action } from "./Actions"; | ||
import State from "./State"; | ||
|
||
interface Reducer<PayLoad> { | ||
type: string; | ||
reducer: (state: State<PayLoad>, action: Action) => Promise<State<PayLoad>>; | ||
type: string; | ||
reducer: (state: State<PayLoad>, action: Action) => Promise<State<PayLoad>>; | ||
} | ||
|
||
export default Reducer; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import React, { ReactNode, useContext, MouseEvent } from "react"; | ||
import { RouterContext } from "./Router"; | ||
|
||
interface LinkProps { | ||
to: string; | ||
children: ReactNode; | ||
} | ||
|
||
const Link: React.FC<LinkProps> = ({ to, children }) => { | ||
const { changePath } = useContext(RouterContext); | ||
|
||
const handleClick = (event: MouseEvent<HTMLAnchorElement>) => { | ||
event.preventDefault(); | ||
changePath(to); | ||
}; | ||
|
||
return ( | ||
<a href={to} onClick={handleClick}> | ||
{children} | ||
</a> | ||
); | ||
}; | ||
|
||
export default Link; |
3 changes: 2 additions & 1 deletion
3
Caecae/src/Shared/Router/Route.tsx → Caecae/src/Shared/Hyunouter/Route.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,89 @@ | ||
import { | ||
useState, | ||
createContext, | ||
ReactNode, | ||
FC, | ||
useEffect, | ||
useRef, | ||
} from "react"; | ||
import useForceRendering from "../Hooks/useForceRendering"; | ||
|
||
interface RouterProps { | ||
children: ReactNode; | ||
} | ||
|
||
interface RouterContextType { | ||
path: string; | ||
fullScreenPath: string[]; | ||
changePath: (path: string) => void; | ||
addFullScreenPath: (path: string) => void; | ||
isFullScreen: boolean; | ||
} | ||
|
||
const RouterContext = createContext<RouterContextType>({ | ||
path: "", | ||
fullScreenPath: [], | ||
changePath: () => undefined, | ||
addFullScreenPath: () => undefined, | ||
isFullScreen: false, | ||
}); | ||
RouterContext.displayName = "RouterContext"; | ||
|
||
const Router: FC<RouterProps> = ({ children }) => { | ||
const forceRerendering = useForceRendering(); | ||
const [path, setPath] = useState(window.location.pathname); | ||
const fullScreenPaths = useRef<string[]>([]); | ||
const isFullScreen = useRef<boolean>(false); | ||
useEffect(() => { | ||
if (fullScreenPaths.current.includes(window.location.pathname)) { | ||
isFullScreen.current = true; | ||
forceRerendering(); | ||
} | ||
const handleLocationChange = () => { | ||
isFullScreen.current = false; | ||
if (fullScreenPaths.current.includes(window.location.pathname)) { | ||
isFullScreen.current = true; | ||
} | ||
setPath(window.location.pathname); | ||
}; | ||
|
||
window.addEventListener("popstate", handleLocationChange); | ||
|
||
return () => { | ||
window.removeEventListener("popstate", handleLocationChange); | ||
}; | ||
}, []); | ||
|
||
const changePath = (newPath: string) => { | ||
if (path !== newPath) { | ||
window.history.pushState({}, "", newPath); | ||
isFullScreen.current = false; | ||
if (fullScreenPaths.current.includes(newPath)) { | ||
isFullScreen.current = true; | ||
} | ||
setPath(newPath); | ||
} | ||
}; | ||
|
||
const addFullScreenPath = (path: string) => { | ||
const newPaths = fullScreenPaths.current; | ||
if (newPaths.includes(path)) return; | ||
newPaths.push(path); | ||
fullScreenPaths.current = newPaths; | ||
}; | ||
|
||
const contextValue = { | ||
path: path, | ||
changePath: changePath, | ||
fullScreenPath: fullScreenPaths.current, | ||
addFullScreenPath: addFullScreenPath, | ||
isFullScreen: isFullScreen.current, | ||
}; | ||
return ( | ||
<RouterContext.Provider value={contextValue}> | ||
{children} | ||
</RouterContext.Provider> | ||
); | ||
}; | ||
|
||
export { Router, RouterContext }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.