chore: update prettier tab width for consistency (#175)

.prettierrc.js

@@ -1,17 +1,9 @@
 module.exports = {
   printWidth: 90,
   useTabs: false,
-    tabWidth: 4,
+  tabWidth: 2,
   singleQuote: true,
   trailingComma: 'es5',
   bracketSpacing: true,
   semi: true,
-    overrides: [
-        {
-            files: '*.md',
-            options: {
-                tabWidth: 2,
-            },
-        },
-    ],
 };

packages/api/handlers/create-roleypoly-data.ts

@@ -33,11 +33,7 @@ export const CreateRoleypolyData = onlyRootUsers(
           type: CategoryType.Single,
           hidden: false,
           position: 1,
-                    roles: [
+          roles: ['394060232893923349', '394060145799331851', '394060192846839809'],
-                        '394060232893923349',
-                        '394060145799331851',
-                        '394060192846839809',
-                    ],
         },
         {
           id: KSUID.randomSync().string,
@@ -45,11 +41,7 @@ export const CreateRoleypolyData = onlyRootUsers(
           type: CategoryType.Multi,
           hidden: false,
           position: 5,
-                    roles: [
+          roles: ['558104828216213505', '558103534453653514', '558297233582194728'],
-                        '558104828216213505',
-                        '558103534453653514',
-                        '558297233582194728',
-                    ],
         },
         {
           id: KSUID.randomSync().string,
@@ -78,11 +70,7 @@ export const CreateRoleypolyData = onlyRootUsers(
           type: CategoryType.Multi,
           hidden: false,
           position: 2,
-                    roles: [
+          roles: ['485916566790340608', '485916566941335583', '485916566311927808'],
-                        '485916566790340608',
-                        '485916566941335583',
-                        '485916566311927808',
-                    ],
         },
       ],
     };

packages/api/handlers/update-roles.ts

@@ -30,10 +30,7 @@ export const UpdateRoles = withSession(
     }
 
     if (updateRequest.transactions.length === 0) {
-            return respond(
+      return respond({ error: 'must have as least one transaction' }, { status: 400 });
-                { error: 'must have as least one transaction' },
-                { status: 400 }
-            );
     }
 
     const guildCheck = guilds.find((guild) => guild.id === guildID);
@@ -84,10 +81,7 @@ export const UpdateRoles = withSession(
       roles: patchMemberRoles.roles,
     };
 
-        await updateGuildMemberRoles(
+    await updateGuildMemberRoles({ serverID: guildID, userID }, patchMemberRoles.roles);
-            { serverID: guildID, userID },
-            patchMemberRoles.roles
-        );
 
     return respond(updatedMember);
   }

packages/api/utils/api-tools.ts

@@ -35,9 +35,7 @@ export const resolveFailures = (
     return handler(request);
   } catch (e) {
     console.error(e);
-        return (
+    return handleWith() || respond({ error: 'internal server error' }, { status: 500 });
-            handleWith() || respond({ error: 'internal server error' }, { status: 500 })
-        );
   }
 };
 
@@ -208,8 +206,7 @@ export const isAllowedCallbackHost = (host: string): boolean => {
     allowedCallbackHosts.includes(host) ||
     allowedCallbackHosts
       .filter((callbackHost) => callbackHost.includes('*'))
-            .find((wildcard) =>
+      .find((wildcard) => new RegExp(wildcard.replace('*', '[a-z0-9-]+')).test(host)) !==
-                new RegExp(wildcard.replace('*', '[a-z0-9-]+')).test(host)
+      null
-            ) !== null
   );
 };

packages/backend-emulator/main.js

@@ -82,9 +82,7 @@ const server = http.createServer((req, res) => {
       try {
         const response = await value;
         if (!response) {
-                    throw new Error(
+          throw new Error(`response was invalid, got ${JSON.stringify(response)}`);
-                        `response was invalid, got ${JSON.stringify(response)}`
-                    );
         }
         res.statusCode = response.status;
         loggedStatus = String(response.status);

packages/design-system/atoms/branding/DynamicBranding.tsx

@@ -140,12 +140,8 @@ export const Bi: Variant = {
     stripes: ['#0038A8', '#0038A8', '#9B4F96', '#D60270', '#D60270'],
   },
   tooltip: 'Being bi is a lot like a riding a bicycle since they can go both ways.',
-    Logomark: (props: DynamicLogoProps) => (
+  Logomark: (props: DynamicLogoProps) => <LogomarkFlag {...props} {...Bi.sharedProps} />,
-        <LogomarkFlag {...props} {...Bi.sharedProps} />
+  Logotype: (props: DynamicLogoProps) => <LogotypeFlag {...props} {...Bi.sharedProps} />,
-    ),
-    Logotype: (props: DynamicLogoProps) => (
-        <LogotypeFlag {...props} {...Bi.sharedProps} />
-    ),
 };
 
 export const Lesbian: Variant = {
@@ -180,12 +176,8 @@ export const Ace: Variant = {
     stripes: ['#84067C', palette.grey600, '#CCCCCC', palette.grey100],
   },
   tooltip: "Sexualn't",
-    Logomark: (props: DynamicLogoProps) => (
+  Logomark: (props: DynamicLogoProps) => <LogomarkFlag {...props} {...Ace.sharedProps} />,
-        <LogomarkFlag {...props} {...Ace.sharedProps} />
+  Logotype: (props: DynamicLogoProps) => <LogotypeFlag {...props} {...Ace.sharedProps} />,
-    ),
-    Logotype: (props: DynamicLogoProps) => (
-        <LogotypeFlag {...props} {...Ace.sharedProps} />
-    ),
 };
 
 export const Birthday: Variant = {
@@ -228,9 +220,7 @@ export const Birthday: Variant = {
         >
           <path
             d="M115.711 25L186.421 95.7107L115.711 166.421L45 95.7107L115.711 25Z"
-                        fill={
+            fill={props.circleOuterFill || Birthday.sharedProps?.circleOuterFill}
-                            props.circleOuterFill || Birthday.sharedProps?.circleOuterFill
-                        }
           />
         </mask>
         <g mask="url(#mask0)">
@@ -238,9 +228,7 @@ export const Birthday: Variant = {
             fillRule="evenodd"
             clipRule="evenodd"
             d="M79.9998 102C103.196 102 122 83.196 122 60C122 36.804 103.196 18 79.9998 18C56.8039 18 37.9998 36.804 37.9998 60C37.9998 83.196 56.8039 102 79.9998 102ZM79.9998 110C107.614 110 130 87.6142 130 60C130 32.3858 107.614 10 79.9998 10C52.3856 10 29.9998 32.3858 29.9998 60C29.9998 87.6142 52.3856 110 79.9998 110Z"
-                        fill={
+            fill={props.circleOuterFill || Birthday.sharedProps?.circleOuterFill}
-                            props.circleOuterFill || Birthday.sharedProps?.circleOuterFill
-                        }
           />
         </g>
       </g>
@@ -348,9 +336,7 @@ export const NewYear: Variant = {
     typeFill: '#aaa',
   },
   tooltip: 'Fuck 2020. 🎆🎇🎆🎇',
-    Logomark: (props: DynamicLogoProps) => (
+  Logomark: (props: DynamicLogoProps) => <Logomark {...props} {...NewYear.sharedProps} />,
-        <Logomark {...props} {...NewYear.sharedProps} />
-    ),
   Logotype: (props: DynamicLogoProps) => (
     <div style={{ display: 'inline-block', maxWidth: props.width }}>
       <SparkleOverlay>

packages/design-system/atoms/breakpoints/BreakpointProvider.tsx

@@ -18,9 +18,7 @@ export class BreakpointsProvider extends React.Component<{}, ScreenSize> {
     onSmallScreen: window.matchMedia(
       mediaQueryDefs.onSmallScreen.replace('@media screen and', '')
     ),
-        onTablet: window.matchMedia(
+    onTablet: window.matchMedia(mediaQueryDefs.onTablet.replace('@media screen and', '')),
-            mediaQueryDefs.onTablet.replace('@media screen and', '')
-        ),
     onDesktop: window.matchMedia(
       mediaQueryDefs.onDesktop.replace('@media screen and', '')
     ),

packages/design-system/atoms/colors/colors.stories.tsx

@@ -65,11 +65,11 @@ export const ContrastRatios = () => {
       <p>
         <b>WCAG Contrast Calculations.</b>
         <br />
-                Marked in <span style={getWCAGStyle(7.1)}>Green</span> is 7.0+ or AAA.
+        Marked in <span style={getWCAGStyle(7.1)}>Green</span> is 7.0+ or AAA. Acceptable
-                Acceptable for Text.
+        for Text.
         <br />
-                Marked in <span style={getWCAGStyle(4.6)}>Orange</span> is 4.5+ or AA.
+        Marked in <span style={getWCAGStyle(4.6)}>Orange</span> is 4.5+ or AA. Acceptable
-                Acceptable for UI.
+        for UI.
         <br />
         All below 4.5 is unacceptable.
         <br />

packages/design-system/atoms/fader/Fader.tsx

@@ -14,9 +14,7 @@ const FaderOpacityStyled = styled.div<Pick<FaderProps, 'isVisible'>>`
 
 export const FaderOpacity = (props: FaderProps) => {
   return (
-        <FaderOpacityStyled isVisible={props.isVisible}>
+    <FaderOpacityStyled isVisible={props.isVisible}>{props.children}</FaderOpacityStyled>
-            {props.children}
-        </FaderOpacityStyled>
   );
 };
 

packages/design-system/atoms/fonts/fonts.stories.tsx

@@ -26,9 +26,9 @@ const CorrectlyFontedH2 = (props: { children: React.ReactNode }) => (
 const Text = () => (
   <>
     <p>
-            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et facilis alias
+      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et facilis alias placeat
-            placeat cumque sapiente ad delectus omnis quae. Reiciendis quibusdam deserunt
+      cumque sapiente ad delectus omnis quae. Reiciendis quibusdam deserunt repellat.
-            repellat. Exercitationem modi incidunt autem nemo tempore eaque soluta.
+      Exercitationem modi incidunt autem nemo tempore eaque soluta.
     </p>
     <p>
       帯カノ需混モイ一録43旧百12共ドレ能生ホクユ禁度ヨ材図クほはそ護関ラト郵張エノヨ議件クめざ県読れみとぶ論税クょンど慎転リつぎみ松期ほへド.
@@ -51,9 +51,7 @@ export const Fonts = () => (
       <Text />
     </section>
     <section>
-            <CorrectlyFontedH2>
+      <CorrectlyFontedH2>Main (Source Han Sans Japanese, Source Sans)</CorrectlyFontedH2>
-                Main (Source Han Sans Japanese, Source Sans)
-            </CorrectlyFontedH2>
       <UseFontStyled>
         <Text />
       </UseFontStyled>

packages/design-system/atoms/horizontal-switch/HorizontalSwitch.tsx

@@ -15,11 +15,7 @@ export const HorizontalSwitch = (props: SwitchProps) => {
   return (
     <Wrapper>
       {props.items.map((item, idx) => (
-                <Item
+        <Item key={idx} selected={item === props.value} onClick={handleClick(item)}>
-                    key={idx}
-                    selected={item === props.value}
-                    onClick={handleClick(item)}
-                >
           {item}
         </Item>
       ))}

packages/design-system/atoms/popover/Popover.tsx

@@ -33,10 +33,7 @@ export const Popover = (props: PopoverProps) => {
         <PopoverContent>{props.children()}</PopoverContent>
       </PopoverBase>
       {props.canDefocus && (
-                <DefocusHandler
+        <DefocusHandler active={props.active} onClick={() => props.onExit?.('defocus')} />
-                    active={props.active}
-                    onClick={() => props.onExit?.('defocus')}
-                />
       )}
     </>
   );

packages/design-system/atoms/role/Role.stories.tsx

@@ -55,12 +55,7 @@ export const Unselected = () => (
 export const DisabledByPosition = () => (
   <Demo>
     {roleCategory.map((c, idx) => (
-            <RoleComponent
+      <RoleComponent key={idx} role={{ ...c, safety: 1 }} selected={false} disabled />
-                key={idx}
-                role={{ ...c, safety: 1 }}
-                selected={false}
-                disabled
-            />
     ))}
   </Demo>
 );
@@ -68,12 +63,7 @@ export const DisabledByPosition = () => (
 export const DisabledByDanger = () => (
   <Demo>
     {roleCategory.map((c, idx) => (
-            <RoleComponent
+      <RoleComponent key={idx} role={{ ...c, safety: 2 }} selected={false} disabled />
-                key={idx}
-                role={{ ...c, safety: 2 }}
-                selected={false}
-                disabled
-            />
     ))}
   </Demo>
 );

packages/design-system/atoms/typography/typography.stories.tsx

@@ -9,9 +9,9 @@ export default {
 const Text = () => (
   <>
     <p>
-            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et facilis alias
+      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et facilis alias placeat
-            placeat cumque sapiente ad delectus omnis quae. Reiciendis quibusdam deserunt
+      cumque sapiente ad delectus omnis quae. Reiciendis quibusdam deserunt repellat.
-            repellat. Exercitationem modi incidunt autem nemo tempore eaque soluta.
+      Exercitationem modi incidunt autem nemo tempore eaque soluta.
     </p>
     <p>
       帯カノ需混モイ一録43旧百12共ドレ能生ホクユ禁度ヨ材図クほはそ護関ラト郵張エノヨ議件クめざ県読れみとぶ論税クょンど慎転リつぎみ松期ほへド.
@@ -63,9 +63,7 @@ export const Sizes = () => (
       return (
         <Section key={i}>
           <div>
-                        <Component>
+            <Component>The quick brown fox jumped over the lazy dog.</Component>
-                            The quick brown fox jumped over the lazy dog.
-                        </Component>
           </div>
           <div>
             <Usage>

packages/design-system/molecules/editor-category/EditorCategory.tsx

@@ -38,10 +38,9 @@ export const EditorCategory = (props: Props) => {
   const [roleSearchPopoverActive, setRoleSearchPopoverActive] = React.useState(false);
   const [roleSearchTerm, updateSearchTerm] = React.useState('');
 
-    const onUpdate = (
+  const onUpdate = (key: keyof typeof props.category, pred?: (newValue: any) => any) => (
-        key: keyof typeof props.category,
+    newValue: any
-        pred?: (newValue: any) => any
+  ) => {
-    ) => (newValue: any) => {
     props.onChange({
       ...props.category,
       [key]: pred ? pred(newValue) : newValue,

packages/design-system/molecules/footer/Flags.tsx

@@ -45,34 +45,10 @@ export const Flags = (props: FlagsProps) => (
       <g id="Rectangle-5"></g>
       <g id="Geyy" mask="url(#mask-4)">
         <g transform="translate(1772.000000, 0.000000)" id="Rectangle-4">
-                    <rect
+          <rect fill="#F9238B" x="0" y="0" width="1600" height="151.006711"></rect>
-                        fill="#F9238B"
+          <rect fill="#FB7B04" x="0" y="150" width="1600" height="151.006711"></rect>
-                        x="0"
+          <rect fill="#FFCA66" x="0" y="300" width="1600" height="151.006711"></rect>
-                        y="0"
+          <rect fill="#00B289" x="0" y="450" width="1600" height="151.006711"></rect>
-                        width="1600"
-                        height="151.006711"
-                    ></rect>
-                    <rect
-                        fill="#FB7B04"
-                        x="0"
-                        y="150"
-                        width="1600"
-                        height="151.006711"
-                    ></rect>
-                    <rect
-                        fill="#FFCA66"
-                        x="0"
-                        y="300"
-                        width="1600"
-                        height="151.006711"
-                    ></rect>
-                    <rect
-                        fill="#00B289"
-                        x="0"
-                        y="450"
-                        width="1600"
-                        height="151.006711"
-                    ></rect>
           <rect
             fill="#5A38B5"
             x="0"

packages/design-system/molecules/nav-slug/NavSlug.tsx

@@ -12,11 +12,7 @@ export const NavSlug = (props: Props) => (
   <SlugContainer>
     <Avatar
       hash={props.guild ? props.guild.icon : undefined}
-            src={
+      src={props.guild ? utils.avatarHash(props.guild.id, props.guild.icon) : undefined}
-                props.guild
-                    ? utils.avatarHash(props.guild.id, props.guild.icon)
-                    : undefined
-            }
       deliberatelyEmpty={!props.guild}
       size={35}
     >

packages/design-system/molecules/preauth-greeting/PreauthGreeting.tsx

@@ -21,19 +21,13 @@ export const PreauthGreeting = (props: GreetingProps) => (
   <Center>
     <Avatar
       size={64}
-            src={avatarUtils.avatarHash(
+      src={avatarUtils.avatarHash(props.guildSlug.id, props.guildSlug.icon, 'icons', 512)}
-                props.guildSlug.id,
-                props.guildSlug.icon,
-                'icons',
-                512
-            )}
       hash={props.guildSlug.icon}
     >
       {avatarUtils.initialsFromName(props.guildSlug.name)}
     </Avatar>
     <AccentTitle>
-            Hi there. <b>{props.guildSlug.name}</b> uses Roleypoly to help assign you
+      Hi there. <b>{props.guildSlug.name}</b> uses Roleypoly to help assign you roles.
-            roles.
     </AccentTitle>
     <Space />
     <Space />

packages/design-system/organisms/help-why-no-roles/WhyNoRoles.styled.ts

@@ -34,6 +34,5 @@ export const DiscordRole = styled.div<{
   }
 
   ${(props) =>
-        props.isRoleypoly &&
+    props.isRoleypoly && hover(numberToChroma(props.discordRole.color).alpha(0.5).css())}
-        hover(numberToChroma(props.discordRole.color).alpha(0.5).css())}
 `;

packages/design-system/organisms/masthead/Authed.tsx

@@ -47,9 +47,7 @@ export const Authed = (props: Props) => {
           >
             <NavSlug
               guild={
-                                props.guilds.find(
+                props.guilds.find((guild) => guild.id === props.activeGuildId) || null
-                                    (guild) => guild.id === props.activeGuildId
-                                ) || null
               }
             />
           </InteractionBase>
@@ -67,10 +65,7 @@ export const Authed = (props: Props) => {
             onExit={() => setServerPopoverState(false)}
           >
             {() => (
-                            <GuildNav
+              <GuildNav guilds={props.guilds} recentGuilds={props.recentGuilds || []} />
-                                guilds={props.guilds}
-                                recentGuilds={props.recentGuilds || []}
-                            />
             )}
           </Popover>
         </MastheadLeft>
@@ -82,9 +77,7 @@ export const Authed = (props: Props) => {
             }}
             hide={!userPopoverState}
           >
-                        {props.user !== undefined && (
+            {props.user !== undefined && <UserAvatarGroup user={props.user} />}
-                            <UserAvatarGroup user={props.user} />
-                        )}
           </InteractionBase>
           <Popover
             headContent={<></>}

packages/design-system/organisms/masthead/Guest.tsx

@@ -21,11 +21,7 @@ export const Guest = () => (
       <MastheadRight>
         <MastheadA to="/auth/login">
           <Button size="small">
-                        Login{' '}
+            Login <FaSignInAlt size="1em" style={{ transform: 'translateY(1px)' }} />
-                        <FaSignInAlt
-                            size="1em"
-                            style={{ transform: 'translateY(1px)' }}
-                        />
           </Button>
         </MastheadA>
       </MastheadRight>

packages/design-system/organisms/role-picker/RolePicker.spec.tsx

@@ -1,4 +1,5 @@
-jest.unmock('@roleypoly/design-system/atoms/role')
+jest
+  .unmock('@roleypoly/design-system/atoms/role')
   .unmock('@roleypoly/design-system/atoms/button')
   .unmock('@roleypoly/design-system/molecules/picker-category')
   .unmock('@roleypoly/design-system/organisms/role-picker');

packages/design-system/organisms/role-picker/RolePicker.tsx

@@ -49,10 +49,7 @@ export const RolePicker = (props: RolePickerProps) => {
     if (category.type === CategoryType.Single) {
       updateSelectedRoles(
         newState === true
-                    ? [
+          ? [...selectedRoles.filter((x) => !category.roles.includes(x)), role.id]
-                          ...selectedRoles.filter((x) => !category.roles.includes(x)),
-                          role.id,
-                      ]
           : selectedRoles.filter((x) => x !== role.id)
       );
     } else {
@@ -82,9 +79,7 @@ export const RolePicker = (props: RolePickerProps) => {
         <>
           <div>
             {sortBy(
-                            props.guildData.categories.filter(
+              props.guildData.categories.filter((category) => !category.hidden),
-                                (category) => !category.hidden
-                            ),
               'position'
             ).map((category, idx) => (
               <CategoryContainer key={idx}>
@@ -97,28 +92,18 @@ export const RolePicker = (props: RolePickerProps) => {
                   )}
                   roles={
                     category.roles
-                                            .map((role) =>
+                      .map((role) => props.roles.find((r) => r.id === role))
-                                                props.roles.find((r) => r.id === role)
-                                            )
                       .filter((r) => r !== undefined) as Role[]
                   }
                   onChange={handleChange(category)}
                   wikiMode={false}
-                                    type={
+                  type={category.type === CategoryType.Single ? 'single' : 'multi'}
-                                        category.type === CategoryType.Single
-                                            ? 'single'
-                                            : 'multi'
-                                    }
                 />
               </CategoryContainer>
             ))}
           </div>
           <div>
-                        <FaderOpacity
+            <FaderOpacity isVisible={xor(selectedRoles, props.member.roles).length !== 0}>
-                            isVisible={
-                                xor(selectedRoles, props.member.roles).length !== 0
-                            }
-                        >
               <ResetSubmit
                 onSubmit={() => props.onSubmit(selectedRoles)}
                 onReset={() => {

packages/design-system/organisms/server-setup/ServerSetup.tsx

@@ -27,19 +27,13 @@ export const ServerSetup = (props: ServerSetupProps) => (
           <div>
             <Avatar
               hash={props.guildSlug.icon}
-                            src={utils.avatarHash(
+              src={utils.avatarHash(props.guildSlug.id, props.guildSlug.icon, 'icons')}
-                                props.guildSlug.id,
-                                props.guildSlug.icon,
-                                'icons'
-                            )}
             >
               {utils.initialsFromName(props.guildSlug.name)}
             </Avatar>
           </div>
           <div>
-                        <SmallTitle>
+            <SmallTitle>&nbsp;&nbsp;Roleypoly isn't in {props.guildSlug.name}</SmallTitle>
-                            &nbsp;&nbsp;Roleypoly isn't in {props.guildSlug.name}
-                        </SmallTitle>
           </div>
         </FlexLine>
         {renderMessage(props.guildSlug)}
@@ -80,9 +74,7 @@ const adminMessage = (id: string) => (
 const managerMessage = (id: string) => (
   <>
     <FlexLine>
-            <AccentTitle>
+      <AccentTitle>You might have the permissions to add it to the server.</AccentTitle>
-                You might have the permissions to add it to the server.
-            </AccentTitle>
     </FlexLine>
     <FlexLine>
       <div>

packages/web/craco.config.js

@@ -8,10 +8,7 @@ module.exports = {
     alias: {},
     plugins: [],
     configure: (webpackConfig, { env, paths }) => {
-            const { isFound, match } = getLoader(
+      const { isFound, match } = getLoader(webpackConfig, loaderByName('babel-loader'));
-                webpackConfig,
-                loaderByName('babel-loader')
-            );
       if (isFound) {
         const include = Array.isArray(match.loader.include)
           ? match.loader.include

packages/web/src/app-router/AppRouter.tsx

@@ -32,10 +32,7 @@ export const AppRouter = () => {
       <RouteWrapper component={AuthLogin} path="/auth/login" />
 
       <RouteWrapper component={DevToolsSetApi} path="/x/dev-tools/set-api" />
-            <RouteWrapper
+      <RouteWrapper component={DevToolsSessionDebug} path="/x/dev-tools/session-debug" />
-                component={DevToolsSessionDebug}
-                path="/x/dev-tools/session-debug"
-            />
     </Router>
   );
 };

packages/web/src/contexts/api/ApiContext.tsx

@@ -18,9 +18,7 @@ export const ApiContext = React.createContext<ApiContextData>({
 export const useApiContext = () => React.useContext(ApiContext);
 
 export const ApiContextProvider = (props: { children: React.ReactNode }) => {
-    const [apiUrl, setApiUrl] = React.useState(
+  const [apiUrl, setApiUrl] = React.useState(getDefaultApiUrl(window.location.hostname));
-        getDefaultApiUrl(window.location.hostname)
-    );
 
   const apiContextData: ApiContextData = {
     apiUrl,

packages/web/src/contexts/session/SessionContext.tsx

@@ -70,13 +70,9 @@ export const SessionContextProvider = (props: { children: React.ReactNode }) =>
 
     // If a session is set and it's not stored, set it now.
     if (
-            localStorage.getItem('rp_session_key') !==
+      localStorage.getItem('rp_session_key') !== sessionContextValue.session.sessionID
-            sessionContextValue.session.sessionID
     ) {
-            localStorage.setItem(
+      localStorage.setItem('rp_session_key', sessionContextValue.session.sessionID || '');
-                'rp_session_key',
-                sessionContextValue.session.sessionID || ''
-            );
     }
 
     // Session is set, but we don't have data. Server sup?