feat: replace types with templates

src/components/button/ButtonTemplate/default/form.tsx

@@ -0,0 +1,42 @@
+import FieldUploadImages from "elements/Fields/FieldImagesUpload";
+import FieldLocation from "elements/Fields/FieldLocation";
+import FieldTags from "elements/Fields/FieldTags";
+import { FieldTextArea } from "elements/Fields/FieldTextArea";
+
+export default function TemplateButtonDefaultForm({register, errors, control, selectedNetwork})
+{
+    return (
+        <>
+          <FieldTextArea
+                  label="Description:"
+                  name="description"
+                  placeholder="Write a description for your button"
+                  validationError={errors.description}
+                  classNameExtra="squared"
+                  {...register("description", {required: true, minLength: 10})}
+            />
+            <FieldTags
+                label="Tag suggestions"
+                name="tags"
+                control={control}
+                validationError={errors.tags}
+              />
+
+            <FieldUploadImages
+                name="images"
+                label="+ Add image"
+                maxNumber="4"
+                control={control}
+              />
+
+            <FieldLocation
+                control={control}
+                validationErrors={undefined}
+                initialLocation={{
+                  lat: selectedNetwork.location.coordinates[0],
+                  lng: selectedNetwork.location.coordinates[1],
+                }}
+              />
+        </>
+    )
+}

src/components/button/ButtonTemplate/index.tsx

@@ -0,0 +1,18 @@
+import TemplateButtonOfferForm from "components/button/ButtonTemplate/offer/form";
+import TemplateButtonDefaultForm from "components/button/ButtonTemplate/default/form";
+
+
+export default function TemplateButtonForm(props)
+{
+    const TemplateButtonFormComponents = {
+      offer: TemplateButtonOfferForm,
+      need: TemplateButtonDefaultForm,
+      exchange: TemplateButtonDefaultForm,
+    };
+    const TemplateButtonFields = TemplateButtonFormComponents[props.templateSlug];
+    return (
+        <>
+          <TemplateButtonFields {...props}/>
+        </>
+    )
+}

src/components/button/ButtonTemplate/offer/form.tsx

@@ -0,0 +1,35 @@
+import FieldUploadImages from "elements/Fields/FieldImagesUpload";
+import FieldLocation from "elements/Fields/FieldLocation";
+import FieldTags from "elements/Fields/FieldTags";
+import { FieldTextArea } from "elements/Fields/FieldTextArea";
+
+export default function TemplateButtonOfferForm({register, errors, control, selectedNetwork})
+{
+    return (
+        <>
+          <FieldTextArea
+                  label="Description:"
+                  name="description"
+                  placeholder="Write a description for your button"
+                  validationError={errors.description}
+                  classNameExtra="squared"
+                  {...register("description", {required: true, minLength: 10})}
+            />
+            <FieldTags
+                label="Tag suggestions"
+                name="tags"
+                control={control}
+                validationError={errors.tags}
+              />
+
+            <FieldLocation
+                control={control}
+                validationErrors={undefined}
+                initialLocation={{
+                  lat: selectedNetwork.location.coordinates[0],
+                  lng: selectedNetwork.location.coordinates[1],
+                }}
+              />
+        </>
+    )
+}

src/components/button/ButtonType/index.tsx

@@ -2,10 +2,12 @@
 import FieldError from "elements/Fields/FieldError";
 import FieldRadio from "elements/Fields/FieldRadio";
 import FieldRadioOption from "elements/Fields/FieldRadio/option";
+import { GlobalState, store } from "pages";
 import React from "react";
 import { useState } from "react";
 
 import { IoClose } from "react-icons/io5";
+import { useRef } from "store/Store";
 type IconType = "cross" | "red";
 
 function RadioIcon({ icon }: { icon: IconType }) {
@@ -24,29 +26,29 @@ function RadioIcon({ icon }: { icon: IconType }) {
 }
 
 const ButtonType = React.forwardRef(({name, onChange, onBlur, validationError}, ref) => {
+  const selectedNetwork = useRef(
+    store,
+    (state: GlobalState) => state.networks.selectedNetwork
+  );
   return (
         <>
-          <FieldRadio label="Button type:">
+         <FieldRadio label="Button type:">
+          {selectedNetwork &&
+            selectedNetwork.templateButtons.map((template: ITemplateButton) => {
+            return (
             <FieldRadioOption
               onChange={onChange} 
               onBlur={onBlur}
-              name={name}
+              name="type"
               ref={ref} 
-              value="need"
+              value={template.slug}
+              key={template.slug}
             >
-              <div className="btn-filter__icon red"></div>
-              <div className="btn-with-icon__text">Need</div>
-            </FieldRadioOption>
-            <FieldRadioOption
-              onChange={onChange} 
-              onBlur={onBlur}
-              name={name}
-              ref={ref} 
-              value="offer"
-            >
-              <div className="btn-filter__icon green"></div>
-              <div className="btn-with-icon__text">Offer</div>
+              <div className={`btn-filter__icon ${template.slug}`}></div>
+              <div className="btn-with-icon__text">{template.description}</div>
             </FieldRadioOption>
+            );
+          })}
           </FieldRadio>
           <FieldError validationError={validationError}/>
         </>

src/components/list/CardButtonList/index.tsx

@@ -14,7 +14,7 @@ export default function CardButtonList(props) {
 
   return (
     <div className="list__element">
-      <div className={`card-button-list card-button-list--${props.type}`}>
+      <div className={`card-button-list card-button-list--${props.template.slug}`}>
         <div className="card-button-list__picture-container">
           <div className="card-button-list__nav">
             <div className="arrow btn-circle__icon">
@@ -35,8 +35,8 @@ export default function CardButtonList(props) {
             <div className="card-button-list__header">
               <div className="card-button-list__info">
                 <div className="card-button-list__status card-button-list__status">
-                  <span className={`card-button-list__status--${props.type}`}>
-                    {props.type}
+                  <span className={`card-button-list__status--${props.template.slug}`}>
+                    {props.template.description}
                   </span>
                 </div>
 
@@ -49,7 +49,7 @@ export default function CardButtonList(props) {
             </div>
 
             <div className="card-button-list__hashtags">
-              <div className={`card-button-list__${props.type}`}>
+              <div className={`card-button-list__${props.template.slug}`}>
 
               {props.tags.length > 0 && props.tags.filter(tag => tag.length > 0).map( (tag,key)=>
                 (

src/components/list/ContentList/index.tsx

@@ -16,7 +16,7 @@ export default function ContentList ({buttons, ...props}) {
   }
   const markers = buttons.map((btn, i) => (
 
-      <CardButtonList key={btn.id} type={btn.type} userName={btn.owner} images={btn.images} buttonName={btn.name} tags={btn.tags} description={btn.description} date={btn.created_at} location={btn.location}/>
+      <CardButtonList key={btn.id} template={btn.template} userName={btn.owner} images={btn.images} buttonName={btn.name} tags={btn.tags} description={btn.description} date={btn.created_at} location={btn.location}/>
 
   ));
 

src/components/map/CardButtonMap/index.tsx

@@ -4,23 +4,23 @@ import { IoChevronForwardOutline } from "react-icons/io5";
 import { IoChevronBackOutline } from "react-icons/io5";
 import { Link } from "elements/Link";
 
-export default function CardButtonMap({ type, userName, images, tags, description, location, date }) {
+export default function CardButtonMap({ template, userName, images, tags, description, location, date }) {
   return (
-    <div className={`card-button-map card-button-map--${type}`}>
+    <div className={`card-button-map card-button-map--${template.slug}`}>
       <div className="card-button-map__content">
         <Link href="/ButtonFile">
           <div className="card-button-map__header ">
             <div className="card-button-map__info">
               <div className="card-button-map__status card-button-map__status">
-                <span className={`card-button-map__status--${type}`}>{type}</span>
+                <span className={`card-button-map__status--${template.slug}`}>{template.description}</span>
               </div>
             </div>
           </div>
 
           {(tags.length > 0) && (
             <div className="card-button-map__hashtags">
               {tags.map((tag, i) => (
-                <div key={i} className={`card-button-map__${type}`}>
+                <div key={i} className={`card-button-map__${template.slug}`}>
                   <div className="hashtag">{tag}</div>
                 </div>
               ))}

src/components/map/MarkerButton/IconButton.ts

@@ -15,7 +15,7 @@ function iconButton(button) {
 
                     <div class="marker-button__tags marker-button__tags--${ button.type }">
                         <div class="marker-button__link-tag">
-                          ${ button.type }
+                          ${ button.template.description }
                         </div>
                     </div>
               </figure>`

src/components/map/MarkerButton/index.tsx

@@ -50,7 +50,7 @@ export function MarkersButton({ buttons, onBoundsChange, ...props }) {
       <Popup className="card-button-map--wrapper">
         <CardButtonMap
           key={button.id}
-          type={button.type}
+          template={button.template}
           userName={button.owner}
           images={button.images}
           buttonName={button.name}

src/components/search/Filters/index.tsx

@@ -1,49 +1,48 @@
 //Filters is the component under the search bar sectioon of the home page and other pages. It consist of several items all with btn-fillter class, and its parts can be altered by the btn templates of the selected network.
 
+import { GlobalState, store } from "pages";
+import { ITemplateButton } from "services/ButtonTemplates/buttonTemplate.type";
+import { useRef } from "store/Store";
+
 //if the filters are too many, it ddisplays a "more filters" option at the end that brings the PopupExtraFilters
 
-export default function Filters({updateFiltersType}) {
-
+export default function Filters({ updateFiltersType }) {
+  const selectedNetwork = useRef(
+    store,
+    (state: GlobalState) => state.networks.selectedNetwork
+  );
+
   const buttonTypeChanged = (e) => {
     const buttonTypeName = e.target.value;
     const value = e.target.checked;
     updateFiltersType(buttonTypeName, value);
-  }
+  };
 
   return (
     <div className="filters">
+      <div className="checkbox-filter__container">
+        {selectedNetwork &&
+          selectedNetwork.templateButtons.map((template: ITemplateButton) => {
+            return (
+              <label key={template.slug} className="checkbox__filter-label">
+                <input
+                  type="checkbox"
+                  className="checkbox-filter__checkbox"
+                  id="input-tos"
+                  defaultChecked={true}
+                  value={template.slug}
+                  onChange={buttonTypeChanged}
+                ></input>
+                <div className="checkbox-filter__content btn-filter-with-icon">
+                  <div className={`btn-filter__icon ${template.slug}`}></div>
+                  <div className="checkbox__text">{template.description}</div>
+                </div>
+              </label>
+            );
+          })}
+      </div>
 
-        <div className="checkbox-filter__container">
-          <label className="checkbox__filter-label">
-            <input type="checkbox" className="checkbox-filter__checkbox" id="input-tos" defaultChecked={true} value="need" onChange={buttonTypeChanged}></input>
-            <div className="checkbox-filter__content btn-filter-with-icon">
-              <div className="btn-filter__icon red"></div>
-              <div className="checkbox__text">
-                Need
-              </div>
-            </div>
-          </label>
-          <label className="checkbox__filter-label">
-            <input type="checkbox" className="checkbox-filter__checkbox" id="input-tos" defaultChecked={true} value="offer" onChange={buttonTypeChanged}></input>
-            <div className="checkbox-filter__content btn-filter-with-icon">
-              <div className="btn-filter__icon green"></div>
-              <div className="checkbox__text">
-                Offer
-              </div>
-            </div>
-          </label>
-          <label className="checkbox__filter-label">
-            <input type="checkbox" className="checkbox-filter__checkbox" id="input-tos" defaultChecked={true} value="exchange" onChange={buttonTypeChanged}></input>
-            <div className="checkbox-filter__content btn-filter-with-icon">
-              <div className="btn-filter__icon black"></div>
-              <div className="checkbox__text">
-                Exchange
-              </div>
-            </div>
-          </label>
-        </div>
-
-{/* 
+      {/* 
         <select className="dropdown__filter">
           <option value="status" className="dropdown-select__option">Status changes</option>
           <option value="status" className="dropdown-select__option">All comments</option>
@@ -53,7 +52,6 @@ export default function Filters({updateFiltersType}) {
           <option value="status" className="dropdown-select__option">Other buttons interactions</option>
           <option value="status" className="dropdown-select__option">My buttons interactions</option>
         </select> */}
-
     </div>
   );
 }