make the search bar / filters update the URL, simplify hooks and provider

[jason301c]

1 URL Integration for Search & Filters
• Search bar and filter changes now update the URL parameters in real-time
• URL state is preserved on page refresh
• Filters are initialized from URL parameters on page load
• Added support for array-based filters in URL parameters
2 Code Simplification
• Simplified the jobs provider implementation
• Consolidated filter state management
• Improved type safety with better TypeScript definitions
• Added comprehensive comments throughout the code
• Optimized hook dependencies and memoization
3 Key Changes
• Added URL parameter handling in jobs-provider.tsx
• Implemented URL search parameter parsing and serialization
• Simplified filter update logic
• Improved error handling and loading states
• Added proper TypeScript types for all actions and state
4 Technical Details
• Uses Next.js useSearchParams and useRouter hooks
• Implements URL parameter handling for arrays
• Adds proper TypeScript types for all actions and state
• Improves code organization and documentation
5 Benefits
• Shareable URLs with search/filter state
• Better user experience with preserved state
• More maintainable codebase
• Improved type safety
• Better performance through proper memoization

[wangstagangstaa]

should be in global .gitignore, but fine to leave for now

[wangstagangstaa]

we don't need to use useReducer anymore, just a simple useState is enough

e.g.

// src/types/filters.ts
export interface FilterState {
  search: string;
  studyField: string[];
  jobType: string[];  
  location: string[];
  sortBy: 'recent' | 'relevant';
  page: number;
}

// src/context/filter-context.tsx
const FilterContext = createContext<{
  filters: FilterState;
  setFilters: (filters: Partial<FilterState>) => void;
}>({});

export function FilterProvider({ children }: { children: ReactNode }) {
  const [filters, setFilters] = useState<FilterState>(defaultFilters);
  const router = useRouter();

  const updateFilters = (newFilters: Partial<FilterState>) => {
    setFilters(curr => ({ ...curr, ...newFilters }));
    const params = new URLSearchParams(createQueryString(newFilters));
    router.push(`/jobs?${params}`);
  };

  return (
    <FilterContext.Provider value={{ filters, setFilters: updateFilters }}>
      {children}
    </FilterContext.Provider>
  );
}

[wangstagangstaa]

what does this file do?

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://white-island-0dae88c00-14.eastasia.4.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://white-island-0dae88c00-14.eastasia.4.azurestaticapps.net

[wangstagangstaa]

Issues:

Mixes job selection with filter state
Handles URL management directly
Complex state management for simple use case

Proposed changes:

// src/context/filter-context.tsx
export function FilterProvider({ children }: { children: ReactNode }) {
  const [filters, setFilters] = useState<FilterState>(defaultFilters);
  const router = useRouter();

  const updateFilters = useCallback((newFilters: Partial<FilterState>) => {
    setFilters(prev => ({ ...prev, ...newFilters }));
    router.push(createFilterUrl(newFilters));
  }, [router]);

  // Initialize from URL
  useEffect(() => {
    setFilters(parseUrlToFilters(window.location.search));
  }, []);

  return (
    <FilterContext.Provider value={{ filters, updateFilters }}>
      {children}
    </FilterContext.Provider>
  );
}

[wangstagangstaa]

lgtm

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://white-island-0dae88c00-14.eastasia.4.azurestaticapps.net