Introduction de l'indicateur de PR depuis #482

source/RulesProvider.js

@@ -31,14 +31,14 @@ const removeLoader = () => {
 
 export default ({ children }) => {
 	const branchData = useBranchData()
-	console.log('BD', branchData)
 	const rules = useSelector((state) => state.rules)
 
 	const dispatch = useDispatch()
 
 	const setRules = (rules) => dispatch({ type: 'SET_RULES', rules })
 
 	useEffect(() => {
+		if (!branchData.loaded) return
 		if (NODE_ENV === 'development' && branchData.shouldUseLocalFiles) {
 			// Rules are stored in nested yaml files
 			const req = require.context(

source/components/SessionBar.tsx

@@ -16,6 +16,7 @@ import { backgroundConferenceAnimation } from '../sites/publicodes/conference/co
 import SurveyBarLazy from '../sites/publicodes/conference/SurveyBarLazy'
 import ProgressCircle from './ProgressCircle'
 import CardGameIcon from './CardGameIcon'
+import { usePersistingState } from './utils/persistState'
 
 const ActionsInteractiveIcon = () => {
 	const actionChoices = useSelector((state) => state.actionChoices),
@@ -30,6 +31,7 @@ const openmojis = {
 	sondage: '1F4CA',
 	profile: '1F464',
 	personas: '1F465',
+	github: 'E045',
 }
 export const openmojiURL = (name) => `/images/${openmojis[name]}.svg`
 export const actionImg = openmojiURL('action')
@@ -50,8 +52,8 @@ const MenuButton = styled.div`
 		padding: 0;
 		font-size: 100%;
 	}
-	> img,
-	> svg {
+	img,
+	svg {
 		display: block;
 		font-size: 200%;
 		margin: 0.6rem !important;
@@ -148,6 +150,10 @@ export default function SessionBar({
 		`
 			: ''
 	const persona = useSelector((state) => state.simulation?.persona)
+	const [pullRequestNumber, setPullRequestNumber] = usePersistingState(
+		'PR',
+		undefined
+	)
 
 	let elements = [
 		<Button
@@ -207,6 +213,34 @@ export default function SessionBar({
 				Personas
 			</Button>
 		),
+		pullRequestNumber && (
+			<MenuButton
+				key="pullRequest"
+				className="simple small"
+				css={buttonStyle('github')}
+			>
+				<a
+					href={
+						'https://github.com/datagir/nosgestesclimat/pull/' +
+						pullRequestNumber
+					}
+					css={`
+						display: flex;
+						align-items: center;
+					`}
+				>
+					<img
+						src={openmojiURL('github')}
+						css="width: 2rem"
+						aria-hidden="true"
+					/>
+					#{pullRequestNumber}
+				</a>
+				<button onClick={() => setPullRequestNumber(null)}>
+					<img css="width: 1.2rem" src="/images/close-plain.svg" />
+				</button>
+			</MenuButton>
+		),
 		conference?.room && (
 			<GroupModeMenuEntry
 				title="Conférence"

source/components/useBranchData.ts

@@ -9,12 +9,16 @@ export default () => {
 
 	const [pullRequestNumber, setPullRequestNumber] = usePersistingState(
 		'PR',
-		null
+		undefined
 	)
 
 	const searchPR = urlParams.get('PR')
 
-	useEffect(() => setPullRequestNumber(searchPR), [searchPR])
+	useEffect(() => {
+		if (searchPR != null)
+			// setting should be triggered by an explicit ?PR=, not the absence of it when navigating
+			setPullRequestNumber(searchPR)
+	}, [searchPR])
 
 	const deployURL = `https://${
 		branch
@@ -26,5 +30,10 @@ export default () => {
 
 	const shouldUseLocalFiles = !(branch || pullRequestNumber)
 
-	return { deployURL, branch, pullRequestNumber, shouldUseLocalFiles }
+	return {
+		deployURL,
+		pullRequestNumber,
+		shouldUseLocalFiles,
+		loaded: pullRequestNumber !== undefined,
+	}
 }

source/components/useFetchDocumentation.ts

@@ -6,6 +6,7 @@ export default () => {
 	const branchData = useBranchData()
 
 	useEffect(() => {
+		if (!branchData.loaded) return
 		if (NODE_ENV === 'development' && branchData.shouldUseLocalFiles) {
 			const req = require.context(
 				'raw-loader!../../../nosgestesclimat/documentation/',

source/sites/publicodes/Personas.tsx

@@ -109,6 +109,7 @@ export const PersonaGrid = ({
 	const branchData = useBranchData()
 
 	useEffect(() => {
+		if (!branchData.loaded) return
 		if (NODE_ENV === 'development' && branchData.shouldUseLocalFiles) {
 			const personas =
 				require('../../../../nosgestesclimat/personas.yaml').default