ts conversion

components/ErrorMessage.js → components/ErrorMessage.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
 import { ErrorSVG } from './SVGs';
 
-const ErrorMessage = ({ error }) => (
+const ErrorMessage = ({ error }: { error: string }) => (
   <div className="p-10 flex flex-col items-center justify-center bg-gray-50 col-span-full h-96">
     <ErrorSVG width="100%" />
     <h5 className="text-default mt-6 font-normal text-xl">{error}</h5>

components/Loader.js → components/Loader.tsx

@@ -1,9 +1,8 @@
-import React from 'react';
 import spin from './loader.module.css';
 
-const Loader = ({ fullScreen }) => (
+const Loader = ({ fullScreen }: { fullScreen: boolean }) => (
   <div className={fullScreen ? 'h-screen w-screen flex items-center justify-center' : ''}>
-    <div className={spin.spinner_3}  />
+    <div className={spin.spinner_3} />
   </div>
 );
 

components/NoDocumentFound.js → components/NoDocumentFound.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
 import { NoFilesFoundSVG } from './SVGs';
 
-const NoDocumentFound = ({ text }) => (
+const NoDocumentFound = ({ text }: { text: string }) => (
   <div className="bg-primary flex flex-col items-center justify-center flex-1 col-span-full">
     <NoFilesFoundSVG width={200} height={300} />
     <h5 className="text-white text-xl font-medium pb-10 lg:ml-6">{text}</h5>

components/RightSideBar.js → components/RightSideBar.tsx

@@ -32,10 +32,10 @@ const sections = [
   },
 ];
 
-const RightSideBar = ({ handlePrint }) => {
+const RightSideBar = ({ handlePrint }: { handlePrint: () => void }) => {
   const matches = useMediaQuery('(min-width:1024px)');
   const sectionTitles = sections.map(e => e.label);
-  const sectionDrawerStates = {};
+  const sectionDrawerStates: Record<string, boolean> = {};
   sectionTitles.map(section => (sectionDrawerStates[section] = false));
 
   const useStyles = makeStyles({
@@ -56,11 +56,11 @@ const RightSideBar = ({ handlePrint }) => {
     ...sectionDrawerStates,
   });
 
-  const toggleRightDrawer = (anchor, open) => () => {
+  const toggleRightDrawer = (anchor: string, open: boolean) => () => {
     setRightDrawerState({ ...rightDrawerState, [anchor]: open });
   };
 
-  const rightList = anchor => (
+  const rightList = (anchor: string) => (
     <div className={matches ? clsx(classes.list) : clsx(classes.fullList)} role="presentation">
       {anchor === 'font-face' && <GoogleFontsList closeDrawer={toggleRightDrawer(anchor, false)} anchor={anchor} />}
       {anchor === 'update-title' && <UpdateTitle closeDrawer={toggleRightDrawer(anchor, false)} anchor={anchor} />}
@@ -73,7 +73,7 @@ const RightSideBar = ({ handlePrint }) => {
         <div key={id} className="inline-block lg:block my-4 lg:my-8">
           <Tooltip title={title} placement={matches ? 'right' : 'bottom'} arrow>
             <Button onClick={toggleRightDrawer(label, true)}>
-              <Icon style={{ color: 'white' }} size="100px" />
+              <Icon style={{ color: 'white', fontSize: '30px' }} />
             </Button>
           </Tooltip>
           <Drawer anchor="right" open={rightDrawerState[label]} onClose={toggleRightDrawer(label, false)}>
@@ -83,7 +83,7 @@ const RightSideBar = ({ handlePrint }) => {
       ))}
       <Tooltip title="Print Resume" placement={matches ? 'right' : 'bottom'} arrow>
         <Button onClick={handlePrint}>
-          <PrintIcon style={{ color: 'white' }} size="100px" />
+          <PrintIcon style={{ color: 'white', fontSize: '30px' }} />
         </Button>
       </Tooltip>
     </div>

components/SVGs.js → components/SVGs.tsx

@@ -1,6 +1,4 @@
-import React from 'react';
-
-export const ResumeNotFoundSVG = props => (
+export const ResumeNotFoundSVG = (props: Record<string, string>) => (
   <svg width={257} height={299} viewBox="0 0 257 299" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <g opacity={0.5}>
       <path
@@ -175,7 +173,7 @@ export const ResumeNotFoundSVG = props => (
   </svg>
 );
 
-export const NoFilesFoundSVG = props => (
+export const NoFilesFoundSVG = (props: Record<string, string>) => (
   <svg viewBox="0 0 326 343" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <ellipse cx={204.376} cy={287.933} rx={112.5} ry={36.2} fill="url(#prefix__paint0_linear)" />
     <path
@@ -299,7 +297,7 @@ export const NoFilesFoundSVG = props => (
   </svg>
 );
 
-export const ErrorSVG = props => (
+export const ErrorSVG = (props: Record<string, string>) => (
   <svg width={375} height={159} viewBox="0 0 375 159" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       fillRule="evenodd"
@@ -453,7 +451,7 @@ export const ErrorSVG = props => (
   </svg>
 );
 
-export const EmptyFileSVG = props => (
+export const EmptyFileSVG = (props: Record<string, string>) => (
   <svg width={203} height={140} viewBox="0 0 203 140" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       d="M199.217 38.647c1.95-9.319-5.162-18.073-14.682-18.073H95.297a10 10 0 01-9.973-9.273l-.148-2.028A10 10 0 0075.202 0H61.785a10 10 0 00-9.826 8.14l-22.714 120C28.079 134.299 32.802 140 39.07 140H178l21.217-101.353z"
@@ -473,7 +471,7 @@ export const EmptyFileSVG = props => (
   </svg>
 );
 
-export const BuyMeACoffee = props => (
+export const BuyMeACoffee = (props: Record<string, string>) => (
   <svg width={545} height={153} viewBox="0 0 545 153" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       d="M0 24.48C0 10.96 10.96 0 24.48 0H520.2c13.52 0 24.48 10.96 24.48 24.48v104.04c0 13.52-10.96 24.48-24.48 24.48H24.48C10.96 153 0 142.04 0 128.52V24.48z"

components/cards/EducationCard.js → components/cards/EducationCard.tsx

@@ -1,9 +1,30 @@
 import { Button } from '@material-ui/core';
 import DeleteIcon from '@material-ui/icons/Delete';
 import EditIcon from '@material-ui/icons/Edit';
-import React from 'react';
 
-const EducationCard = ({ institution, startedAt, endedAt, major, onDelete, openEditEduForm, country, educationActive, id }) => (
+export interface EducationType {
+  institution: string;
+  startedAt: string;
+  endedAt: string;
+  major: string;
+  onDelete: (data: { id: string }) => Promise<void>;
+  openEditEduForm: (event: any) => void;
+  country: number;
+  educationActive: { [id: string]: boolean };
+  id: string;
+}
+
+const EducationCard = ({
+  institution,
+  startedAt,
+  endedAt,
+  major,
+  onDelete,
+  openEditEduForm,
+  country,
+  educationActive,
+  id,
+}: EducationType) => (
   <>
     <div className="flex justify-between items-center">
       <p className="font-light text-lg">{institution}</p>
@@ -22,7 +43,7 @@ const EducationCard = ({ institution, startedAt, endedAt, major, onDelete, openE
       className="mt-3 -mb-2"
       style={{ maxHeight: `${educationActive[id] ? '60px' : '0px'}`, transition: 'all 0.5s', overflow: 'hidden' }}
     >
-      <Button onClick={() => openEditEduForm()} className="mr-4" variant="text">
+      <Button onClick={e => openEditEduForm(e)} className="mr-4" variant="text">
         <div className="flex items-center justify-center">
           <EditIcon style={{ color: '#fff' }} />
           <p className="ml-2 text-white capitalize">Edit</p>

components/cards/ExperienceCard.js → components/cards/ExperienceCard.tsx

@@ -1,7 +1,29 @@
 import { Button } from '@material-ui/core';
 import DeleteIcon from '@material-ui/icons/Delete';
 import EditIcon from '@material-ui/icons/Edit';
-import React from 'react';
+
+interface ExperienceType {
+  designation: string;
+  startedAt: string;
+  endedAt: string;
+  company: string;
+  description: string;
+  onDelete: (data: { id: string }) => void;
+  id: string;
+  openEditExpForm: () => void;
+  country: string;
+  experienceActive: { [id: string]: boolean };
+}
+type ExperienceCardProps = {
+  onDelete: ({ id }: { id: string }) => Promise<void>;
+  openEditExpForm: () => void;
+  experienceActive: Record<string, boolean>;
+  company: string;
+  country: string;
+  description: string;
+  // ... other properties
+  years: string;
+};
 
 const ExperienceCard = ({
   designation,
@@ -14,7 +36,7 @@ const ExperienceCard = ({
   country,
   experienceActive,
   id,
-}) => (
+}: ExperienceType) => (
   <>
     <div className="flex justify-between items-center">
       <p className="font-light text-lg">{designation}</p>

components/cards/ExtrasCard.js → components/cards/ExtrasCard.tsx

@@ -1,9 +1,18 @@
 import { Button } from '@material-ui/core';
 import DeleteIcon from '@material-ui/icons/Delete';
 import EditIcon from '@material-ui/icons/Edit';
-import React from 'react';
 
-const ExtrasCard = ({ title, type, items, onDelete, openEditExtForm, extraActive, id }) => (
+interface ExtrasCardTypes {
+  title: string;
+  type: string;
+  items: string[];
+  onDelete: (data: { id: string }) => void;
+  openEditExtForm: () => void;
+  extraActive: Record<string, boolean>;
+  id: string;
+}
+
+const ExtrasCard = ({ title, type, items, onDelete, openEditExtForm, extraActive, id }: ExtrasCardTypes) => (
   <>
     <div className="flex justify-between items-center">
       <p className="font-light text-lg">{title}</p>

components/cards/TemplateCard.js → components/cards/TemplateCard.tsx

@@ -1,9 +1,45 @@
 import Image from 'next/image';
-import React from 'react';
+interface ResumeTemplate {
+  customStyles: {
+    font: string;
+    // You can add more style properties here if needed
+  };
+  template: boolean;
+  experience: string[];
+  education: string[];
+  extras: string[];
+  _id: string;
+  userId: string;
+  title: string;
+  templateName: string;
+  createdAt: string;
+  updatedAt: string;
+  __v: number;
+  personal: string;
+  id: string;
+}
+interface Templatetype {
+  title: string;
+  templateName: string;
+}
 
-const TemplateCard = ({ template, selected, onSelect, type }) => (
+const TemplateCard = ({
+  template,
+  selected,
+  onSelect,
+  type,
+}: {
+  template: ResumeTemplate;
+  selected: boolean;
+  onSelect: (data: ResumeTemplate) => void;
+  type: string;
+}) => (
   <div
-    onClick={() => onSelect(template)}
+    onClick={() => {
+      console.log(template);
+      onSelect(template);
+      console.log(template);
+    }}
     onKeyUp={() => onSelect(template)}
     role="button"
     tabIndex={0}