Day 3 / 14 - User Auth Completed, Now creating the UI for the form builder

Set up some protections for certain routes when there is no logged-in user.

Setting up protected routes is important when you are delegating what non-logged-in users have access to. To do this we use a the useEffect hook in order to run a checker once the component loads.

const Build = () => {
  const router = useRouter();
  const { session } = useContext(UserContext);

  useEffect(() => {
    if (!session) {
      router.push("/signin");
    }
  }, [session]);
  return (
    <Layout mainBgColor="">
      <h3>Build Page</h3>
    </Layout>
  );
};

What I did here was checked if there was a session. There are only two possible types for the session- a session object defined by Supabase or null. If there is no session or it's null, next.js will re-direct our application to the sign-in route. In the useEffect dependency array I included session. What this means is that this is dependant on the state of session. If the session changes, the useEffect hook will trigger again. Having session as a dependency allows subscribing to changes such as a logout function.

Starting to create the Form Builder Components

There are four major pieces to the form builder:

1. Adding a field
2. Field Settings
3. Form Settings
4. Displaying the form

Today I worked on adding a field and displaying whatever based on what is selected. I will try to record my approach to the problem tomorrow when tackling it to see how I tackle the problem visually as explaining it is a bit dull to read.

Overall, I will need to be able to

1. Maintain form field order and types
2. Integrate React Drag and Drop
3. Integrate Refs to check on which input field is currently selected

Tomorrow will be building the most important components. The UI will be mostly what people will be using and I think is the hardest thing I will build. So stay tuned for tomorrow!!