Move alt style state into the outfit state

This still doesn't _do_ anything, except that you can see the URL
change when you switch between styles. Just a step forward is all!

app/javascript/wardrobe-2020/WardrobePage/OutfitControls.js

@@ -233,6 +233,7 @@ function OutfitControls({
                     speciesId={outfitState.speciesId}
                     colorId={outfitState.colorId}
                     pose={outfitState.pose}
+                    altStyleId={outfitState.altStyleId}
                     appearanceId={outfitState.appearanceId}
                     dispatchToOutfit={dispatchToOutfit}
                     onLockFocus={onLockFocus}

app/javascript/wardrobe-2020/WardrobePage/PosePicker.js

@@ -66,6 +66,7 @@ function PosePicker({
   speciesId,
   colorId,
   pose,
+  altStyleId,
   appearanceId,
   dispatchToOutfit,
   onLockFocus,
@@ -90,8 +91,7 @@ function PosePicker({
   const [isOpen, setIsOpen] = React.useState(false);
   const [tabIndex, setTabIndex] = React.useState(0);
 
-  const [styleId, setStyleId] = React.useState(null);
+  const altStyle = altStyles.find((s) => s.id === altStyleId);
-  const altStyle = altStyles.find((s) => s.id === styleId);
 
   const placement = useBreakpointValue({ base: "bottom-end", md: "top-end" });
 
@@ -172,10 +172,14 @@ function PosePicker({
     (p) => p.isAvailable && STANDARD_POSES.includes(p.pose),
   ).length;
 
-  const onChange = (e) => {
+  const onChangePose = (e) => {
     dispatchToOutfit({ type: "setPose", pose: e.target.value });
   };
 
+  const onChangeStyle = (altStyleId) => {
+    dispatchToOutfit({ type: "setStyle", altStyleId });
+  };
+
   return (
     <Popover
       placement={placement}
@@ -241,7 +245,7 @@ function PosePicker({
                       <>
                         <PosePickerTable
                           poseInfos={poseInfos}
-                          onChange={onChange}
+                          onChange={onChangePose}
                           initialFocusRef={initialFocusRef}
                         />
                         {numStandardPoses == 0 && (
@@ -260,9 +264,9 @@ function PosePicker({
                   </TabPanel>
                   <TabPanel paddingX="4" paddingY="0">
                     <StyleSelect
-                      selectedStyleId={styleId}
+                      selectedStyleId={altStyleId}
                       altStyles={altStyles}
-                      onChange={setStyleId}
+                      onChange={onChangeStyle}
                       initialFocusRef={initialFocusRef}
                     />
                     <StyleExplanation />

app/javascript/wardrobe-2020/WardrobePage/useOutfitState.js

@@ -113,7 +113,8 @@ function useOutfitState() {
   // IDs. It's more convenient to manage them as a Set in state, but most
   // callers will find it more convenient to access them as arrays! e.g. for
   // `.map()`.
-  const { id, name, speciesId, colorId, pose, appearanceId } = outfitState;
+  const { id, name, speciesId, colorId, pose, altStyleId, appearanceId } =
+    outfitState;
   const wornItemIds = Array.from(outfitState.wornItemIds);
   const closetedItemIds = Array.from(outfitState.closetedItemIds);
   const allItemIds = [...wornItemIds, ...closetedItemIds];
@@ -236,6 +237,7 @@ function useOutfitState() {
     speciesId,
     colorId,
     pose,
+    altStyleId,
     appearanceId,
     url,
 
@@ -351,6 +353,10 @@ const outfitStateReducer = (apolloClient) => (baseState, action) => {
         // particular about which version of the pose to show if more than one.
         state.appearanceId = action.appearanceId || null;
       });
+    case "setStyle":
+      return produce(baseState, (state) => {
+        state.altStyleId = action.altStyleId;
+      });
     case "resetToSavedOutfitData":
       return getOutfitStateFromOutfitData(action.savedOutfitData);
     default:
@@ -417,6 +423,7 @@ function readOutfitStateFromSearchParams(pathname, searchParams) {
     speciesId: searchParams.get("species") || "1",
     colorId: searchParams.get("color") || "8",
     pose: searchParams.get("pose") || "HAPPY_FEM",
+    altStyleId: searchParams.get("style") || null,
     appearanceId: searchParams.get("state") || null,
     wornItemIds: new Set(searchParams.getAll("objects[]")),
     closetedItemIds: new Set(searchParams.getAll("closet[]")),
@@ -640,6 +647,7 @@ function buildOutfitQueryString(outfitState) {
     speciesId,
     colorId,
     pose,
+    altStyleId,
     appearanceId,
     wornItemIds,
     closetedItemIds,
@@ -657,6 +665,9 @@ function buildOutfitQueryString(outfitState) {
   for (const itemId of closetedItemIds) {
     params.append("closet[]", itemId);
   }
+  if (altStyleId != null) {
+    params.append("style", altStyleId);
+  }
   if (appearanceId != null) {
     // `state` is an old name for compatibility with old-style DTI URLs. It
     // refers to "PetState", the database table name for pet appearances.

app/javascript/wardrobe-2020/loaders/alt-styles.js

@@ -28,10 +28,10 @@ function normalizeAltStyles(altStylesData) {
 
 function normalizeAltStyle(altStyleData) {
 	return {
-		id: altStyleData.id,
+		id: String(altStyleData.id),
-		speciesId: altStyleData.species_id,
+		speciesId: String(altStyleData.species_id),
-		colorId: altStyleData.color_id,
+		colorId: String(altStyleData.color_id),
-		bodyId: altStyleData.body_id,
+		bodyId: String(altStyleData.body_id),
 		seriesName: altStyleData.series_name,
 		adjectiveName: altStyleData.adjective_name,
 		thumbnailUrl: altStyleData.thumbnail_url,