Merge pull request #70 from Vizzuality/develop

Update client styles and cms model

client/next.config.mjs

@@ -20,6 +20,33 @@ const nextConfig = {
     RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED: 'false',
     NEXT_PUBLIC_BASE_PATH: process.env.NEXT_PUBLIC_BASE_PATH || '',
   },
+  redirects: async () => {
+    return [
+      {
+        source: '/',
+        has: [
+          {
+            type: 'cookie',
+            key: 'esa-visited',
+            value: 'true',
+          },
+        ],
+        permanent: false,
+        destination: '/globe',
+      },
+      {
+        source: '/',
+        missing: [
+          {
+            type: 'cookie',
+            key: 'esa-visited',
+          },
+        ],
+        permanent: false,
+        destination: '/home',
+      },
+    ];
+  },
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/i,

client/src/app/(landing)/page.tsx → client/src/app/(landing)/globe/page.tsx

@@ -7,8 +7,9 @@ import { getStoriesParams } from '@/lib/stories';
 import { getGetCategoriesQueryOptions } from '@/types/generated/category';
 import { getGetStoriesQueryOptions } from '@/types/generated/story';
 import { CategoryListResponse } from '@/types/generated/strapi.schemas';
+import { getGetTopStoriesQueryOptions } from '@/types/generated/top-story';
 
-import Home from '@/containers/home';
+import Globe from '@/containers/globe';
 
 export const metadata = {
   title: 'Impact sphere',
@@ -55,6 +56,18 @@ async function prefetchQueries(searchParams: HomePageProps['searchParams']) {
       queryFn: storiesQueryFn,
     });
 
+    const { queryKey: topStoriesQueryKey, queryFn: topStoriesQueryFn } =
+      getGetTopStoriesQueryOptions({
+        'pagination[limit]': 5,
+        populate: 'story,cover_image',
+        sort: 'index:asc',
+      });
+
+    await queryClient.prefetchQuery({
+      queryKey: topStoriesQueryKey,
+      queryFn: topStoriesQueryFn,
+    });
+
     return dehydrate(queryClient);
   } catch (error) {
     console.info(error);
@@ -64,9 +77,10 @@ async function prefetchQueries(searchParams: HomePageProps['searchParams']) {
 
 export default async function HomePage({ searchParams }: HomePageProps) {
   const dehydratedState = await prefetchQueries(searchParams);
+
   return (
     <Hydrate state={dehydratedState}>
-      <Home />
+      <Globe />
     </Hydrate>
   );
 }

client/src/app/(landing)/home/page.tsx

@@ -0,0 +1,5 @@
+import Home from '@/containers/home';
+
+export default function HomePage() {
+  return <Home />;
+}

client/src/components/map/layers/marker/index.tsx

@@ -1,67 +1,72 @@
-import { MouseEventHandler } from 'react';
-
-import { Marker as RMarker, MarkerProps as RMarkerProps } from 'react-map-gl';
+import { Marker as RMarker } from 'react-map-gl';
 
 import { cn } from '@/lib/classnames';
 
 import { Button } from '@/components/ui/button';
 import CategoryIcon from '@/components/ui/category-icon';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 
-type MarkerProps = RMarkerProps & {
-  properties: GeoJSON.GeoJsonProperties;
-  onClick: MouseEventHandler<HTMLButtonElement>;
+type MarkerProps = {
+  markers?: (GeoJSON.Feature<GeoJSON.Point> | null)[];
+  handleClick: (id: string | number) => void;
 };
 
-const Marker = (props: MarkerProps) => {
-  const { properties, onClick, ...rest } = props;
+const Marker = ({ markers, handleClick }: MarkerProps) => {
+  const { coordinates } = markers?.[0]?.geometry || {};
+  if (!coordinates?.length) return null;
   return (
-    <RMarker {...properties} {...rest}>
-      <Tooltip open delayDuration={0}>
-        <TooltipTrigger asChild>
+    <RMarker anchor="left" latitude={coordinates[1]} longitude={coordinates[0]}>
+      <div className="flex items-center">
+        <div
+          className={cn({
+            'relative z-50 flex h-6 w-6 -translate-x-1/2 cursor-pointer items-center justify-center':
+              true,
+          })}
+        >
           <div
             className={cn({
-              'animate-in zoom-in relative flex h-6 w-6 cursor-pointer items-center justify-center duration-150':
+              'absolute left-1/2 top-1/2 flex h-3 w-3 -translate-x-1/2 -translate-y-1/2 rotate-45 items-center justify-center border-[1.5px] border-[#FFE094] transition-all':
                 true,
+              'bg-background scale-[1.25] border-gray-200': true,
             })}
           >
-            <div
-              className={cn({
-                'absolute left-1/2 top-1/2 flex h-3 w-3 -translate-x-1/2 -translate-y-1/2 rotate-45 items-center justify-center border-[1.5px] border-[#FFE094] transition-all':
-                  true,
-                'bg-background scale-[1.25] border-gray-200': true,
-              })}
-            >
-              <div className="h-[5px] w-[5px] bg-gray-200"></div>
-            </div>
+            <div className="h-[5px] w-[5px] bg-gray-200"></div>
           </div>
-        </TooltipTrigger>
-        <TooltipContent
-          className="bg-[rgba(51, 94, 111, 0.50)] max-w-[230px] p-4 text-white backdrop-blur-lg"
-          asChild
-        >
-          <div onMouseMove={(e) => e.stopPropagation()}>
-            <div className="mb-2 flex  items-center space-x-4">
-              <CategoryIcon
-                slug={properties?.category}
-                className="fill-secondary h-10 w-10 opacity-80"
-              />
-              <p className="text-xs">{properties?.categoryName}</p>
-            </div>
-            <p className="text-sm">{properties?.title}</p>
-            <p className="mb-4 text-xs italic text-gray-300">{properties?.location}</p>
+        </div>
 
-            <Button
-              variant="secondary"
-              className="h-8 w-full rounded-3xl bg-teal-500 py-2 text-xs text-white hover:bg-teal-500/50"
-              onClick={onClick}
-              disabled={!properties?.active}
-            >
-              Discover story
-            </Button>
-          </div>
-        </TooltipContent>
-      </Tooltip>
+        <div className="max-w-[230px] -translate-x-6 rounded border border-gray-700 bg-[rgba(51,94,111,0.50)] px-0 text-white backdrop-blur-lg">
+          {markers?.map((marker) => {
+            if (!marker || !marker?.id) return null;
+            return (
+              <div
+                className="border-b border-b-gray-700 p-4 last-of-type:border-b-0"
+                key={marker.id}
+                onMouseMove={(e) => e.stopPropagation()}
+              >
+                <div className="mb-2 flex  items-center space-x-4">
+                  <CategoryIcon
+                    slug={marker?.properties?.category}
+                    className="h-10 w-10 fill-transparent stroke-teal-300 opacity-80"
+                  />
+                  <p className="font-open-sans text-xs">{marker?.properties?.categoryName}</p>
+                </div>
+                <p className="font-notes text-sm">{marker?.properties?.title}</p>
+                <p className="font-open-sans mb-4 mt-2 text-xs italic text-gray-300">
+                  {marker?.properties?.location}
+                </p>
+
+                <Button
+                  variant="secondary"
+                  className="h-8 w-full rounded-3xl bg-teal-500 py-2 text-xs text-white hover:bg-teal-500/50"
+                  onClick={() => !!marker.id && handleClick(marker.id)}
+                  disabled={!marker?.properties?.active}
+                >
+                  Discover story
+                </Button>
+              </div>
+            );
+          })}
+        </div>
+      </div>
     </RMarker>
   );
 };

client/src/components/ui/card.tsx

@@ -4,7 +4,7 @@ import { InfoIcon } from 'lucide-react';
 
 import { cn } from '@/lib/classnames';
 
-// import { ScrollArea } from '@/components/ui/scroll-area';
+import { ScrollArea } from '@/components/ui/scroll-area';
 
 type CardProps = PropsWithChildren & {
   title?: string;
@@ -26,11 +26,9 @@ const Card = ({ children, title, info, className }: CardProps) => {
           {info && <InfoIcon className="h-4 w-4" />}
         </div>
       )}
-      {/* <ScrollArea className={cn('h-full px-4')}> */}
-      <div className={cn('h-full overflow-y-auto px-4')}>
+      <ScrollArea type="always" className={cn('px-4', !title ? 'h-[calc(100%-20px)]' : 'h-full')}>
         <div className="pb-4">{children}</div>
-      </div>
-      {/* </ScrollArea> */}
+      </ScrollArea>
     </div>
   );
 };

client/src/components/ui/dialog.tsx

@@ -55,6 +55,35 @@ const DialogContent = React.forwardRef<
 ));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
+const DialogContentHome = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay className="bg-background opacity-60" />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-[498px] max-w-[45vw] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-t-2xl border border-gray-800 bg-[hsla(198,100%,14%,0.31)] leading-relaxed text-white shadow-lg backdrop-blur-2xl duration-200 sm:rounded-lg',
+        className
+      )}
+      {...props}
+    >
+      <div className="">{children}</div>
+      <DialogPrimitive.Close
+        className={cn(
+          'ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute  right-1/2  top-0 -translate-y-1/2  translate-x-1/2 rounded-full border border-gray-800 bg-gray-900 p-4 px-4 py-2 opacity-100 backdrop-blur-lg transition-opacity hover:opacity-70 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none'
+        )}
+      >
+        <X className="h-6 w-6 fill-white" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+
+DialogContentHome.displayName = 'DialogContentHome';
+
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
 );
@@ -100,4 +129,5 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
+  DialogContentHome,
 };

client/src/components/ui/gradient-line.tsx

@@ -1,3 +1,11 @@
-const GradientLine = () => <div className="bg-header-line relative my-4 h-[1px]"></div>;
+import { cn } from '@/lib/classnames';
+
+type GradientLineProps = {
+  className?: string;
+};
+
+const GradientLine = ({ className }: GradientLineProps) => (
+  <div className={cn('bg-header-line relative my-4 h-[1px]', className)}></div>
+);
 
 export default GradientLine;

client/src/components/ui/input.tsx

@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'border-input bg-background ring-offset-background focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         ref={ref}

client/src/components/ui/loader.tsx

@@ -38,12 +38,12 @@ const ContentLoader = ({
         iconClassName="w-5 h-5"
         visible={isFetching && !isPlaceholderData}
       /> */}
-
-      {isError && isFetched && !isFetching && (errorMessage || 'Error')}
+      <div className="text-center">
+        {isError && isFetched && !isFetching && (errorMessage || 'Error')}
+        {!isPlaceholderData && !isError && isFetched && !data && 'No data'}
+      </div>
 
       {!isPlaceholderData && !isError && isFetched && !!data && children}
-
-      {!isPlaceholderData && !isError && isFetched && !data && 'No data'}
     </>
   );
 };

client/src/components/ui/scroll-explanation.tsx

@@ -0,0 +1,14 @@
+import { PropsWithChildren } from 'react';
+
+const ScrollExplanation = ({ children }: PropsWithChildren) => {
+  return (
+    <div className="font-notes z-10 flex w-full items-center justify-center gap-2 text-center text-sm italic text-white">
+      <div className="flex h-8 w-4 justify-center rounded-full border border-gray-200 bg-gray-900">
+        <div className="animate-fade-down h-2 w-2 rounded-full bg-gray-200" />
+      </div>
+      <p>{children}</p>
+    </div>
+  );
+};
+
+export default ScrollExplanation;