Formatted data for react-router components

Co-authored-by: Jasmine Noor <[email protected]>
Co-authored-by: Minzo Kim <[email protected]>
Co-authored-by: Jackie Yuan <[email protected]>

Author: 4 people

src/backend/controllers/createTree.ts

@@ -64,7 +64,8 @@ export default function createTree(currentFiberNode: Fiber): Tree {
     // Obtain component name:
     /** Name of the current component */
     let componentName: string =
-      elementType?._context?.displayName || //For ContextProvider
+      elementType?._context?.displayName || //For ContextProviders like Route, Navigation, Location
+      (elementType?._context &&  'ContextProvider') || //Mark's note: useContext providers weren't showing up the way listed in the line above, I actually couldn't find the name of the context provider on the react dev tools fiber tree.
       elementType?._result?.name || //For lazy Component
       elementType?.render?.name ||
       elementType?.name || //For Functional/Class Component
@@ -116,15 +117,36 @@ export default function createTree(currentFiberNode: Fiber): Tree {
     if (memoizedProps) {
       switch (elementType.name) {
         // If component comes from React Router, extract only pathname:
-        case 'Router':
+        case 'Router': {
           componentData.props = { pathname: memoizedProps?.location?.pathname };
           break;
-        case 'RenderedRoute':
+        }
+        case 'RenderedRoute': {
           componentData.props = { pathname: memoizedProps?.match?.pathname };
           break;
+        }
+        // For react-router components Route, Navigation, or Location, the elementType won't have a name property, so elementType.name will be undefined.
+        // The following switch case will be entered and will pass limited info to these element's props, but if none of the 
+        // "if" statements are entered and a break statements isn't executed, the default case will still be entered
+        case undefined: {
+          // console.log('in undefined', elementType);
+          if (elementType._context?.displayName === "Route") {
+            componentData.props = { pathname: memoizedProps?.value?.matches?.[0]?.pathname };
+            break;
+          }
+          if (elementType._context?.displayName === "Navigation") {
+            componentData.props = { basename: memoizedProps?.value?.basename };
+            break;
+          }
+          if (elementType._context?.displayName === "Location") {
+            componentData.props = { pathname: memoizedProps?.value?.location?.pathname };
+            break;
+          }
+        }
         // Else filter & format props data to ensure they are JSON stringify-able, before sending to front end
-        default:
+        default: {
           componentData.props = filterAndFormatData(memoizedProps);
+        }
       }
     }
 
@@ -152,7 +174,7 @@ export default function createTree(currentFiberNode: Fiber): Tree {
     //   // }
     // }
     // // if user uses useContext hook, context data will be stored in memoizedProps.value of the Context.Provider component => grab context object stored in memoizedprops
-    // // Different from other provider, such as Routes, BrowswerRouter, ReactRedux, ..., Context.Provider does not have a displayName
+    // // Different from other provider, such as Routes, BrowserRouter, ReactRedux, ..., Context.Provider does not have a displayName
     // // TODO: need to render this context provider when user use useContext hook.
     // if (tag === ContextProvider && !elementType._context.displayName) {
     //   let stateData = memoizedProps.value;
@@ -182,9 +204,14 @@ export default function createTree(currentFiberNode: Fiber): Tree {
     // Example: for Stateful buttons demo-app: Increment is a stateful component that use useState hook to store state data.
     if (
       (tag === FunctionComponent ||
-        tag === IndeterminateComponent ||
-        //TODO: Need reasoning for why we evaluate context provider
-        tag === ContextProvider) &&
+       tag === IndeterminateComponent ||
+       //TODO: Need reasoning for why we evaluate context provider
+       /**
+        * So far I haven't seen a case where hook data is stored for ContextProviders in memoized state. So far
+        * I've seen some data a non-null memoize state on browser router, but queue is null. Routes has some good info on memoized props,
+        * but that's not being addressed here. useContext providers also have null for memoized state.
+        */
+       tag === ContextProvider) &&
       memoizedState
     ) {
       if (memoizedState.queue) {