fix(*): Update playground to support changes in #2328 for retheme (#2357)

Author: tmilewski

playground/nextjs/pages/session-examples/index.tsx

@@ -1,4 +1,4 @@
-import { useSession, withSession, WithSession, WithSessionProp } from '@clerk/nextjs';
+import { useSession } from '@clerk/nextjs';
 import { PublicUserData } from '@clerk/types';
 import type { NextPage } from 'next';
 import React from 'react';
@@ -20,36 +20,12 @@ function PublicMetadataWithHook() {
   return <Template publicUserData={session?.publicUserData} />;
 }
 
-class PublicMetadataClass extends React.Component<WithSessionProp> {
-  render() {
-    return <Template publicUserData={this.props.session.publicUserData} />;
-  }
-}
-
-export const PublicMetadataClassHOC = withSession(PublicMetadataClass);
-
-const PublicMetadataFn = (props: WithSessionProp) => {
-  const { session } = props;
-  return <Template publicUserData={session?.publicUserData} />;
-};
-
-export const PublicMetadataFnHOC = withSession(PublicMetadataFn);
-
-class PublicMetadataFaaC extends React.Component {
-  render() {
-    return <WithSession>{session => <Template publicUserData={session?.publicUserData} />}</WithSession>;
-  }
-}
-
 const SessionExamplesPage: NextPage = () => {
   return (
     <div
       style={{ display: 'flex', flexDirection: 'column', gap: '2rem', justifyContent: 'center', alignItems: 'center' }}
     >
       <PublicMetadataWithHook />
-      <PublicMetadataClassHOC />
-      <PublicMetadataFnHOC />
-      {/*<PublicMetadataFaaC />*/}
     </div>
   );
 };

playground/nextjs/pages/user-examples/index.tsx

@@ -1,6 +1,6 @@
 import type { NextPage } from 'next';
 import React from 'react';
-import { useUser, withUser, WithUser, WithUserProp } from '@clerk/nextjs';
+import { useUser } from '@clerk/nextjs';
 
 function GreetingWithHook() {
   // Use the useUser hook to get the Clerk.user object
@@ -15,45 +15,12 @@ function GreetingWithHook() {
   return <div>Hello, {user.firstName}!</div>;
 }
 
-class GreetingClass extends React.Component<WithUserProp> {
-  render() {
-    return <div>{this.props.user.firstName ? `Hello ${this.props.user.firstName}!` : 'Hello there!'}</div>;
-  }
-}
-
-export const GreetingClassHOC = withUser(GreetingClass);
-
-type GreetingProps = {
-  greeting: string;
-};
-
-const GreetingFn = (props: WithUserProp<GreetingProps>) => {
-  const { user, greeting } = props;
-  return (
-    <>
-      <h1>{greeting}</h1>
-      <div>{user.firstName ? `Hello, ${user.firstName}!` : 'Hello there!'}</div>
-    </>
-  );
-};
-
-export const GreetingFnHOC = withUser(GreetingFn);
-
-class GreetingFaaC extends React.Component {
-  render() {
-    return <WithUser>{user => <div>{user.firstName ? `Hello, ${user.firstName}!` : 'Hello there!'}</div>}</WithUser>;
-  }
-}
-
 const UserExamplesPage: NextPage = () => {
   return (
     <div
       style={{ display: 'flex', flexDirection: 'column', gap: '2rem', justifyContent: 'center', alignItems: 'center' }}
     >
       <GreetingWithHook />
-      <GreetingClassHOC />
-      <GreetingFnHOC greeting={'Ciao'} />
-      {/*<GreetingFaaC />*/}
     </div>
   );
 };