Fetching data and formatting it

[deanfields]

Hi, I'm looking at using domain functions for a number of remix projects, I am attempting to create a simple Todo list example, the user can have multiple lists, archive the list, add tasks to a list tick them off etc.

I essentially wanted to understand what the best approach is for the situations I describe below:

I have a function fetchLists:

export const fetchLists = mdf(z.object({ withTasks: z.boolean().optional() }), UserSchema)(
  async ({ withTasks = false }, { sessionId }) => {
    return fetchListsByUserId(sessionId, withTasks);
  }
)

This works great, but I'm looking to format the list (when retrieving tasks with them) so that there are two arrays one with completed tasks and one with active Tasks:

export const filterActiveTasks = (tasks: Task[]) => tasks.filter(task => !task.completed);

export const filterCompletedTasks = (tasks: Task[]) => tasks.filter(task => task.completed);

export const seperateTasksByStatus = (tasks: Task[]) => {
  const activeTasks = filterActiveTasks(tasks);
  const completedTasks = filterCompletedTasks(tasks);
  return { activeTasks, completedTasks };
}

I created another domain function for this, which operates on a single list (this kinda follows a similar thing in the examples with the user domains)

export const formatListWithTasks = mdf(ListSchema)((list) => {
  const { completedTasks, activeTasks } = seperateTasksByStatus(list.tasks)
  return {
    ...list,
    completedTasks,
    activeTasks,
  }
})

My question is how best to handle the array of lists coming from the fetchLists function, am I approaching this correctly by separating the formatting into a DF or should this just be a utility? should I create a dedicated DF that fetches the list and formats them? Or is there a 'better' way to use the other DF functions like map & pipe to do this more in line with DF?

[diogob]

Do you always use activeTasks and completedTasks together in your application? Or is there any cases where you would need only one of these groups?

[deanfields]

In my demo app, I'd have a toggle for showing all, completed, or active tasks for each list, which is functionality that could be done at the component level by filtering the tasks there. I can't think of a good reason why I'd need them in this use-case, it was more of an experiment but there are some possible real world scenarios where data is returned from an API as an array and you want to format it / return particular data, for example a list of products which contains particular fields you'd want to return based on certain conditions / use-cases maybe - If i'm understanding DF correctly, I don't think it makes sense for this to be in the Loader right it would be handled within a DF?

[gustavoguichard]

Yes, @deanfields ... we strive to have the least amount of code in the loaders... ideally:

export async function loader({ request }: DataFunctionArgs) {
  const result = await myDf(await extractInput(request), await extractEnv(request))
  if (!result.success) throw notFound()
  return json(result.data)
}

[gustavoguichard]

Hi @deanfields , thanks for reaching out! Glad to know you've been using DFs and Remix 🔥

I don't know if there's a best way but here is how I'd model it:

import { makeDomainFunction as mdf, map } from "domain-functions"

const fetchLists = mdf(z.object({ withTasks: z.boolean().optional() }), UserSchema)(
  async ({ withTasks = false }, { sessionId }) => {
    // I'd put the body of fetchListsByUserId function here instead of creating another abstraction
    // IMO the DF is the place to put the core of the business logic
    // Excuse me for the pseudo code below
    const response = await fetch(`${API}/lists/${sessionId}?withTasks=${withTasks}`)
    const json = await response.json()
    return z.array(listSchema).parse(json)
  }
)
// typeof fetchLists === DomainFunction<List[]>

// I use map whenever I want to change the result of another DF:
const categorizedFetchLists = map(fetchLists, lists => lists.map(
  (list) => ({ ...list, ...separateTasksByStatus(list.tasks) })
))
// typeof categorizedFetchLists === DomainFunction<List & { completedTasks: Task[]. activeTasks: Task[] }[]>

That is just one way of doing it... I hope it helps!

[deanfields]

Hi! Thanks very much for this! This is exactly what I was wondering!